2

AJAX関数によって呼び出されるスクリプトを許可する多くの方法を読みましたが、それを機能させるのに問題があります.JSとAJAXに比較的慣れていないので、可能であればこの特定のコードの例は素晴らしいでしょう.

これは、更新されたコンテンツを要求するメインの JavaScript (インデックス ページでループされます) です (これを index.php と呼びましょう)。

if (window.XMLHttpRequest)
    xmlhttp2 = new XMLHttpRequest();
} else {
    xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange = function () {
    if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
        document.getElementById("botcontain2").innerHTML = xmlhttp2.responseText;
    }
}
xmlhttp2.open("GET", "chat/shownew.php?fie=" + Math.random() + "&id=" + id + "&nm=" + nm, true);
xmlhttp2.send();
}

これは、以下のフォームにフックするためのshownew.phpファイルで呼び出すjavascriptです。

   <script id=runscript2 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
    <script type="text/javascript" id="runscript">
        Ext.onReady(function(){
            Ext.fly('form').on('submit', function(e){
                e.preventDefault();
            var date = Ext.fly('date').dom.value;
            var me = Ext.fly('me').dom.value;
            var them = Ext.fly('them').dom.value;
            var n = Ext.fly('text').dom.value;
            var hi = "submit.php?me="+me+"&them="+them+"&date="+date+"&ty=ty";
                Ext.Ajax.request({
                   url: "chat/insertchat.php?me="+me+"&them="+them+"&date="+date+"&ty=ty",
                   success: function(){ alert(hi); },
                   failure: function() { alert(hi) ; }, 
            params: { text: n }
                });
                return false;               
            });         
        });     
    </script>

ええ、それは ajax(shownew.php) によって呼び出される同じファイルでこのフォームにフックすることを意味します

    <form id="form">
    <input id="date" type="hidden" name="date">
    <input id="me" type="hidden" name="me">
    <input id="them" type="hidden" name="them">
    <input id="text" type="text" name="text">
        <input type="submit">
    </form>

ええ、現時点では、shownew.php javascript をまったく機能させることができません。どんなアドバイスも素晴らしいでしょう。または、どのように機能させるかについての簡単な例です。

4

3 に答える 3

0

JavaScript を動的にロードする場合、最も簡単な方法はスクリプト要素としてアタッチすることです (上記のコメントで Ben Carey が提案したように)。JQuery に依存するのではなく、通常の JavaScript のコードを次に示します。

function loadJs(file) {
  var head= document.getElementsByTagName('head')[0],
      script=document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.setAttribute("src", file);
  head.appendChild(script);
}

編集:スクリプトをロードしたい時点でこの関数を呼び出すことができます。両方のリクエストを同時に実行できるように、ajax 呼び出しの直前に行うのがおそらく最適です。

loadJs('runscript2.js');
if (window.XMLHttpRequest)
...

しかし、あなたの質問をもう少し注意深く見てみると、まだ問題があります。新しいフォームで dom を更新する前に、スクリプトが読み込まれる場合があります。これにより、呼び出される前にdomがそこにあると想定されるため、スクリプトが機能しなくなります。これは、dom が更新された後にのみ loadJS を呼び出すことで解決できますが、フォームが機能する前に不必要な遅延が発生します。別の方法は、次のように runscript.js を変更することです。

<script id=runscript2 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<script type="text/javascript" id="runscript">
  var runscript2 = function() {
    Ext.fly('form').on('submit', function(e){
    ...
  };
</script>

dom を操作した後、関数 runscript2 を呼び出すことができます (コード スニペットには示されていませんが、おそらく次のようになります)。

document.getElementById('someDiv').innerHTML=xmlhttp2.responseText;
var runscript2Ready = function() {
  if (typeof runscript2 === 'function') {
    runscript2();
  }
  else {
    setTimeout(runscript2Ready, 50);
  }
}
runscript2Ready();

ここでは、DOM が更新された後、javascript がロードされている場合はそれを実行する関数を実行します。ロードされていない場合は、ロードされるまで 50 ミリ秒間隔で再試行し続けます。

注:私が賢かったら、最初にこれを言ったでしょうが、実際に js を動的にロードする必要がありますか? 元のインデックス ファイル (私が提案したように変更) に含めて、dom を操作した後に runscript2 関数を呼び出すだけではどうですか。そうすれば、js がまだ読み込まれているかどうかを心配する必要はありません。

注2：私がもっと賢かったら、extJS（あなたが使っているようです）について何か知っているでしょうが、残念ながら私は知りません。Ext.onReady メソッドが単に dom が読み込まれるのを待つよりも特別なことをする可能性はありますが (ほとんどありません)。この場合、私のコードは失敗します。おそらく、ExtJS には、まだ存在しない dom 要素を処理する機能があります (JQuery のように)。これにより、状況が大幅に簡素化されます。

于 2013-05-15T09:45:46.950 に答える