2012-02-21 56 views
0

在点击发送ajax调用以获取响应的链接时,我能够得到正确的响应,但响应页面内的脚本标记不起作用。如何使它运行如何在ajax页面中运行脚本

这是HTML页面

<HTML> 
<HEAD> 

<link rel="stylesheet" type="text/css" href="css/global.css"> 
<script type="text/javascript" src="js/ajaxgetter.js"></script> 
<script type="text/javascript" src="js/mootools.js"></script> 
</HEAD> 

<BODY> 

<h1>ajax block container</h1> 

<div id="container"> 
    <div id="tab_wrapper"> 
     <ul id="tab_list" > 
      <li> 
      <a href="#" id="firstelement" onclick="ajaxenabled('elements/firstelement.html','firstelement','content_tab')">Number 1 </a>    
      </li> 
      <li> 
      <a href="#" id="secondelement" onclick="ajaxenabled('elements/secondelement.html','secondelement','content_tab')">Number 2</a> 
       <br/><br/><br/> 
       </li> 

     </ul> 
    </div> 

<br/><br/><br/><br/><br/><br/> 

<div id="content_tab"> 

</div> 
</div> 

</BODY> 
</HTML> 

的JavaScript代码

function ajaxenabled(url,param,id) 
{ 
    var page_request = false  
    if (window.XMLHttpRequest){ 
     page_request = new XMLHttpRequest() 
    } 
    else if (window.ActiveXObject){ 
     try{ 
      page_request = new ActiveXObject("MSXML2.XMLHTTP") 
     } 
     catch (e){ 
      try { 
       page_request = new ActiveXObject("Microsoft.XMLHTTP") 
      } 
      catch (e){} 
     } 
    } 
    else 
     return false; 
     page_request.onreadystatechange=function(){ 
      if(param!=null) 
      { 
       loadpage(page_request, param,id); 
      } 
      if(param==null) 
      { 
       loadpage(page_request,'',id); 

      } 
     } 
     page_request.open('GET', url, true); 
     page_request.send(null); 
} 


function loadpage(page_request,param,id){ 

    var getblock=document.getElementById(id); 

    if(page_request.status==200) { 
     getblock.style.display='block'; 
     getblock.innerHTML=page_request.responseText; 

    if(param!=null) 
     { 
      //alert("showed"); 
     } 

    } 

} 

响应页面 “firstelement.html”

<h1>First Element having ajax call</h1> 

<script type="text/javascript"> 
alert("testing the simple function"); 
</script> 

警报当前脚本选项卡内里面的firstelement.html没有触发,

+0

您运行mootools,但不使用Request类。请求有一个特殊选项'evalScripts:true | false' - 您可以使用它。 – 2012-02-21 15:08:10

回答

0

您应该将该脚本从HTML文件内移至.js文件,并在成功完成ajax调用后调用该脚本。 你的HTML文件将是:

<HTML> 
    <HEAD> 

    <link rel="stylesheet" type="text/css" href="css/global.css"> 
    <script type="text/javascript" src="js/ajaxgetter.js"></script> 
    <script type="text/javascript" src="js/mootools.js"></script> 
    <script type="text/javascript" src="js/YOUR_SCRIPT_FILE_HERE.js"></script> 
    </HEAD> 

    <BODY> 

    <h1>ajax block container</h1> 

    . 
    . 
    . 

你当然会移动

<script type="text/javascript"> 
alert("testing the simple function"); 
</script> 

到.js文件,您将 “JS” 目录中。记得做它,你可以调用所以.js文件都会有这样的事情

function afterAjaxSuccess(){ 
    alert("testing the simple function"); 
    } 

,然后在你的HTML文件时,更新loadpage方法是这样的方法:

function loadpage(page_request,param,id){ 

var getblock=document.getElementById(id); 

if(page_request.status==200) { 
    getblock.style.display='block'; 
    getblock.innerHTML=page_request.responseText; 
    afterAjaxSuccess();        //updated line here 

if(param!=null) 
    { 
     //alert("showed"); 
    } 

} 

}

和你的HTML页面变得

<h1>First Element having ajax call</h1> 

没有任何脚本

+0

你能演示如何实现它吗? – 2012-02-21 13:18:09

+0

我更新了我的答案 – 2012-02-21 13:53:18

+0

Thnx的答案,我会尽力让你知道 – 2012-02-21 14:00:01

0

我只是使用mootools Request.HTML它将评估返回页面中的所有脚本标记,并在元素中替换html,如果在选项中设置了更新。

相关问题