3

ユーザーが単純なドロップダウンから何かを選択したときに描画される ajax 駆動のページがあるという問題に遭遇しました。

<select id = "selectdepartment">
    <option id = "default">Select an option...</option>
    ....
</select>

ページの残りの部分は jquery を使用して描画されます.change()。

$('#selectdepartment').change(function(){

});

次に、いくつかの ajax to php スクリプトを実行します。すべてがうまく機能します。問題は、ajax で描画されたフォームを送信すると ( $_SERVER['PHP_SELF'];. ユーザーは、別のオプションに移動してから、最初に選択したオプションに戻って を再起動する必要があります.change()。それは最悪です。

すべてのフォームで php 変数を渡し、ページの読み込みごとに設定されている変数を確認し、それがページ パーツを描画するかどうかを確認することで、これを修正できますが、これはコードがかなり乱雑になり、望ましくありません。

jquery ライブラリでこれを行う方法が必要ですが、JavaScript 言語全般に関する私の知識は、私が望んでいるものではありません。誰かが役立つヒントを共有してくれたら、私のためにそれをしないでください、私はそのように学びません:)

編集: .trigger を使用したコード

$('#selectdepartment').change(function(){
var department = $('#selectdepartment').val();
var day = $('#data').data('day');
var month = $('#data').data('month');
var year = $('#data').data('year');
//alert (department);

if(department === "Select an option..."){
    $('.hiddenuntildepartmentisselected').css({"display":"none"});
}
else{
$('.hiddenuntildepartmentisselected').css({"display":"block"});
}

showpoints(department);
drawpointstable(department, day, month, year);
displaytheuseresforselecteddepartment(department, '');

$('#sendthedepartment').val(''+department+'');
$('#hiddendepartmentidforaddinganewpoint').val(''+department+'');

}).trigger('change');//end run functions
4

2 に答える 2

7

この関数を使用して、ページが読み込まれたときにすぐにイベント ハンドラーを.trigger()トリガーできます。change

$('#selectdepartment').change(function() {
    // code here
}).trigger('change');

または、JavaScript/jQuery を介して別の場所で呼び出す必要がある場合:

$('#selectdepartment').trigger('change'); // or just .change() as a shorthand
于 2013-04-10T15:45:07.543 に答える
2

更新しました

フォームのボタンはonClick属性を利用できます。これにより、メソッドが呼び出されてフォーム フィールドが解析され、.php スクリプトにデータが送信されます.ajax()。

イベント メソッドでは、success必要なフラグを確認し、必要に応じて必要に応じて要素を変更します。

基本的な例:

の内部.ajax():

...

url: 'xxx.xxx.xxx',
async: true,
type: 'POST',
dataType: 'html',
data: JSON.stringify( form_fields ),
beforeSend: function()
{
     // Pre send stuff, like starting a loading gif
},
success: function( data, textStatus, xhr )
{
    // Be sure you load the page with the content first
    $( '#containing-div' ).html( data );

    // Do  your check here, and modify your element if needed here
    if( flagtocheck === 'xxx' )
    {
        // Modify the element in question...
    }

    // I call a custom method termed `.ctrls()` here that makes any 
    // adjustments to the DOM once its loaded/updated.
},
error: function( xhr, textStatus, errorThrown )
{
}

もちろん、flagtocheck自分の場合は適切に設定する必要があります。

それが役立つことを願っています!

編集に関する注意 この投稿は、もう少し説明的で理解しやすいように編集されました。質問者はすでに.ajax()メソッドを使用しているため、successイベント メソッドは、質問者が要求していることを実行するのに理想的な場所です。.trigger()そこで要素を直接変更するメソッド呼び出しは、それを使用して呼び出したり、要素を直接変更したりするよりも 1 回少なくなり.change()ます。

于 2013-04-10T15:51:32.740 に答える