2012-03-28 5 views
0

Я попытался заменить кнопку отправки формы загрузчиком ajax как часть моего запроса ajax.jquery replace submit button

Вот код, я использовал:

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' />"); 

Это работает для первого представить, загрузчик показывает то я получаю кнопку назад на AJAX завершен, но кнопка больше не отправляет форму?

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