jquery
  • ajax
  • 2012-03-28 1 views 0 likes 
    0

    フォームのサブミットボタンをajaxリクエストの一部としてajaxローダーに置き換えようとしました。ローダは、次に示して、私はアヤックスに戻って完了ボタンを取得していないが、ボタンはもはやフォームを送信し、jquery submitボタンを置換する

    beforeSend: function() { 
        $("#submit").replaceWith("<img id='loader' width ='14px' src='../img/loader.gif'>"); 
    }, 
    success: function(data){ 
        $("#loader").replaceWith("<input id='submit' type='submit' class='button blue' value='Get History' />"); 
    

    これは最初の提出のために動作します。ここでは

    は私が使用したコードのですか? EDIT

    :ここ はフォームです

    <form id="history" action="temp_history.php" method="post" onsubmit="getHistory();return false;" > 
    <?php 
    foreach($_SESSION['contacts'] as $user => $id) {?> 
    <li class="contactList"><span><input type="checkbox" name="contact[]" id="contact" value="<?php echo $id; ?>" /></span><?php echo $user; ?></li> 
    <?php } ?> 
    </div> 
    </ul> 
        <div style="bottom: 0; position: absolute; text-align: left; margin-bottom:10px; margin-left:10px; width: 210px;"> 
        <input type="text" name="days" id="days" style="border:0; color:#8a8a8a; font-weight:bold; background: url(../img/nav_secondary_bg.png);" readonly="readonly" /> 
        <div id="slider"></div> 
        <input id="submit" type="submit" class="button blue" value="Get History" /> 
        <input type="button" class="button grey" value="Clear" /> 
        </div> 
    </form> 
    

    全体の機能:

    function getHistory() { 
        //var contact = $("#contact").val() 
        var contact = new Array(); 
         $("input[@name='contact[]']:checked").each(function() { 
         contact.push($(this).val()); 
         }); 
        var days = $("#days").val() 
        $.ajax({ 
         type: 'post', 
         url: 'temp_history.php', 
         data: {contact: contact, days: days}, 
         context: document.body, 
         beforeSend: function() { 
          $("#submit").replaceWith("<img id='loader' width ='14px' src='../img/loader.gif'>"); 
         }, 
         success: function(data){ 
          $("#loader").replaceWith("<input id='submit' type='submit' class='button blue' value='Get History' />"); 
          var json = jQuery.parseJSON(data); 
          var divs = "", tabs = "", counts = 0; 
    
          jQuery("#gMap").gmap3({ action: 'clear' }); 
          jQuery(".marker").remove(); 
    
          jQuery.each(json, function(i, item) { 
           var name = item.name; 
           var userId = item.data.user; 
           jQuery.each(item.data.data, function(i, nav) { 
            var ts = nav.timestamp; 
            var lat = nav.latitude; 
            var long = nav.longitude; 
    
            if (lat != null && long != null) { 
             addMarker(name, counts = counts + 1, ts, lat, long, userId); 
            } 
           }); 
          }) 
         } 
        }); 
    

    }

    +0

    を使用するフォームのためにあなたのコードを投稿することができます。

    後に追加しますか? –

    答えて

    1

    あなたは、.replaceWith()後にあなたのイベントを再バインドする必要がありますDOMれるクラスとしてこれは、それにイベントが付いていない新しい要素です。

    $("input[type='submit'].button.blue").click(function(){ 
        getHistory(); 
    }); 
    
    +0

    うーん、どうすればいい?現在、フォームは次のように送信されます。

    +0

    @VinceLowe私は答えを更新しました。うまくいけば、これは助けてください。 – Curt

    +0

    変更のメイトはありません。正確にどこに追加しますか? –

    1

    どちらかが成功のコールバックにsubmitボタンにイベントを再バインドやイベントの委任.delegate

    関連する問題