2009-07-26 22 views
0

私は私のニーズ のために大にあるAJAXのタブではなく、jQueryのUIのためのjQueryを使用するが、このコードは以下の私のAjaxのタブで、それはフォーム送信時にjqueryタブを再ロードするにはどうすればよいですか?

私もそのために、AJAXを使用していた外部ファイルを使用して、選択したタブをロードしますこのページにデータを投稿するHOMEfriendstatus.inc.phpは#tab2です

ユーザーが画面にロードしたタブに関係なく、フォームを送信するときに知りたいことは、リロードするか、 tab2の更新内容を表示するにはtab2?

<script type="text/javascript"> 
var pageUrl = new Array();   
pageUrl[1] = "HOMEbulletin.inc.php"; 
pageUrl[2] = "HOMEfriendstatus.inc.php"; 
pageUrl[3] = "HOMEbulletin.inc.php"; 



function loadTab(id){ 
    if (pageUrl[id].length > 0){ 
     $("#loading").show(); 
     $.ajax({url: pageUrl[id], cache: false, success: function(message) {        
      $("#tabcontent").empty().append(message); 
      $("#loading").hide();    
     } 
    });     
} 
} 

$(document).ready(function(){ 
    /*$("#tab1").addClass('selected');*/ 
    $("#loading").hide(); 
    $("#tab1").click(function(){ 
     loadTab(1); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab2").click(function(){ 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab3").click(function(){ 
     loadTab(3); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
    }); 
</script> 
+2

あなたが書いているこのような余計なことがあれば、すぐにJQueryUIのサイズに近づいています。 JQueryUIのコアとタブは、圧縮されていない184.23 kbと縮小された〜122.7 kbのみです。グーグルがサーバー上であなたのためにそれをホストすることさえ考慮すると、あなたのものよりもずっと速く、そして多くはあなたのものよりも真実であることがほとんどありません。これを使わないことは、率直で愚かなことです。 – Sneakyness

+1

Googleがホストしているという理由で、あなたの訪問者の誰かがすでにGoogleのホストバージョンを使用しているWebサイトを既に訪れた場合、既にダウンロードしたコピーを単に使用します。これは、ユーザーのコンピュータからロードされた0の帯域幅を意味します。それ以上は得られない。 – Sneakyness

答えて

1

フォーム成功コールバックでloadTab(2)を実行しようとしましたか?これで十分です。あなたは私たちにAJAXを経由してフォームを送信するためのコードを示したしていないが、私はそれに似た何かが動作する必要がありますね

:あなたが名前の関数を使用することを検討する必要がありますので、これは$("#tab2").click()関数のコードを複製することを

$.post('http://example.com/ajax/form', $('form').serialize(), 
    function (data, textStatus) { 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $('#tab2').addClass('selected'); 
    } 
); 

お知らせその場合は匿名ではなくajaxコールバックで再利用してください:

function loadSecondTab() { 
    loadTab(2); 
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
    $('#tab2').addClass('selected'); 
} 

$('#tab2').click(loadSecondTab); 
$.post('http://example.com/ajax/form', $('form').serialize(), loadSecondTab); 

PS。 jQueryのUIはそれほど大きくありません。すべてのビットを使用する必要はありません。簡単にタブモジュールをロードできます。

+1

彼はそれを理解することができません.JQueryUIには、これらすべての機能が組み込まれています。彼が言語を理解していないことは明らかです。彼はこれとは何か、3つの質問が同じコード上にあるのかと尋ねました。私たちは彼のために彼のサイトを書いています。誰かが住所を書き留めて、請求書を送ることができます。 – Sneakyness

+0

ありがとうございます。私は試してみましょう – JasonDavis

関連する問題