【问题标题】:How to add a PHP template to a dynamically generated Javascript code如何将 PHP 模板添加到动态生成的 Javascript 代码中
【发布时间】:2013-07-29 13:48:49
【问题描述】:

我正在使用 Code Igniter 和 Googlemaps 库。该库动态生成大量 Javascript 代码,包括每个新标记的 InfoWindows 的内容,但我想将其保存在单独的模板文件中,如常规视图。

我有这个 Javascript 代码(来自 Googlemaps 的库):

        var lat = marker.getPosition().lat();
        var long = marker.getPosition().lng();

        var windowContent = "";

        if( _new ) {
            var newIW = new google.maps.InfoWindow( { content: windowContent } );

我想做的是从模板文件中加载windowContent。我已经成功地为这个变量动态生成了一个表单,并使用了上面定义的latlong 变量,但是如何在 Code Igniter 中实现这一点?我不能使用load->view,因为我不在控制器的上下文中。由于 CI 的安全限制,我不能使用 include()readfile()

有什么提示吗?

【问题讨论】:

  • 将contentWindow内容放入文件,并使用ajax获取文件,并在回调中为googlemaps infowindow做初始化代码
  • 您能详细说明一下吗?不知道你说的初始化代码是什么意思。
  • var newIW = new google.maps.InfoWindow( { content: windowContent } ); 是初始化代码。由于 ajax 是一个异步进程,因此您只有在 ajax 调用返回内容后才能执行代码。
  • 那么用ajax调用替换这个初始化中的windowContent,传递lat和long作为参数来取回模板?
  • 添加了一个答案,显示 ajax 调用在您的代码中的样子。

标签: php javascript codeigniter


【解决方案1】:

使用纯javascript,获取lat和long,在查询字符串中用lat和long做一个url,用xhr做ajax调用。

var lat = marker.getPosition().lat();
var long = marker.getPosition().lng();

var xhr;
var url = "http://myurl.to/script.php?lat="+lat+"&lng="+long;
if(typeof XMLHttpRequest !== 'undefined') 
    xhr = new XMLHttpRequest();
else {
    //Get IE XHR object
    var versions = ["MSXML2.XmlHttp.5.0", 
            "MSXML2.XmlHttp.4.0",
            "MSXML2.XmlHttp.3.0", 
            "MSXML2.XmlHttp.2.0",
            "Microsoft.XmlHttp"];

    for(var i = 0, len = versions.length; i < len; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        }
        catch(e){}
    }
}
xhr.onreadystatechange = function(){
    //This function is called every so often with status updates
    //It is complete when status is 200 and readystate is 4

    if(xhr.status == 200 && xhr.readyState === 4) {  
        //Returned data from the script is in xhr.responseText
            var windowContent = xhr.responseText;

            //Create the info window
            var newIW = new google.maps.InfoWindow( { content: windowContent } );

            //Pass newIW to whatever other function to use it somewhere
    }
};

xhr.open('GET', url, true);
xhr.send();

如果使用像 jQuery 这样的库,它会像

var lat = marker.getPosition().lat();
var long = marker.getPosition().lng();
var url = "http://myurl.to/script.php";
jQuery.ajax({
   "url":url,
   "data":{ //Get and Post data variables get put here
      "lat":lat,
      "lng":long
   },
   "dataType":"html", //The type of document you are getting, assuming html
                      //Could be json xml etc
   "success":function(data) { //This is the callback when ajax is done and successful
      //Returned data from the script is in data
      var windowContent = data;

      //Create the info window
      var newIW = new google.maps.InfoWindow( { content: windowContent } );

      //Pass newIW to whatever other function to use it somewhere
   }
});

【讨论】:

  • 我尝试了一个简化的 jQuery 版本的代码,函数调用 windowContent = load_content(lat, long)。被调用的 URL 工作正常,我希望它返回“数据”,但不知何故它不起作用。我什至用 alert(data) 进行了测试,它都在那里,但它没有被返回。也许这与加载 Ajax 调用所需的时间有关。
  • ajax 是异步的,它在调用它时不会返回数据,这就是为什么您必须在回调函数中获取数据的原因,回调函数中的return data; 不会将其返回给 windowContent 变量,例如在windowContent = load_content(lat, long) 的上下文中,假设 load_content 是一个用于执行 ajax 调用本身的包装函数。
  • 非常感谢代码和信息。确实帮助了很多概念。我回家后将尝试按照您的建议在 Ajax 调用中设置 infowindow 内容。 :)
猜你喜欢
  • 2020-01-26
  • 1970-01-01
  • 1970-01-01
  • 2012-08-09
  • 1970-01-01
  • 1970-01-01
  • 2019-03-23
  • 2016-02-04
  • 2017-06-06
相关资源
最近更新 更多