Cant .ajax() отправить форму php, загруженную на главную страницу с помощью jQuery .load()

-1

У меня возникла следующая проблема. Ниже приведено объяснение того, что мои страницы PHP и как они работают. Когда я напрямую обращаюсь к form.php и пытаюсь отправить его через AJAX, он работает отлично.Cant .ajax() отправить форму php, загруженную на главную страницу с помощью jQuery .load()

Проблема - Когда я загружаю() form.php в main.php, ни один из jQuery-кода в form.php не срабатывает. (проверено через firebug) Никаких подчинений, никаких предупреждений, ничего. Как я могу получить код jQuery в form.php для работы при его загрузке в main.php?

main.php -> Это основная страница PHP, на которой есть ссылка на нее. После нажатия этой ссылки следующий код jQuery запускает загрузку «form.php» в div, называемом #formcontainer. Это код внутри main.php, который загружает form.php.

<a href="#" id="addHomeProfile">Foobar</a> 
<div class="formcontainer"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#addHomeProfile").click(function(){ 
     $(".formcontaineropen").load("form.php"); 
    }); 
}); 
</script>

form.php -> это форма, которая загружается выше. Он отправляет данные в MySQL через jQuery .ajax() POST. Вот код jquery, который представляет форму, которая имеет идентификатор, называемый #homeprofile.

<form id="homeprofile"> <input type="text" name="name" id="name" /> 
<input type="submit" value="submit" id="submit"></form> 

<script type = "text/javascript"> 
$(document).ready(function() { 
    $('#homeprofile').submit(function(e){ 
     e.preventDefault(); 
     alert("form submitted"); 
     $.ajax({ // Starter Ajax Call 
      type: "POST",   
      url: 'update.php', 
      data: $('#homeprofile').serialize(), 
     }); 
    }); 
});

источник

2013-08-29 Syed Ahmed

Что именно происходит? Появляется ли предупреждение? – Thomas

В вашей форме нет кнопки, это очень сложно представить. – Halcyon

Возможный дубликат [Ajax PHP Созданная форма не отправляется] (http://stackoverflow.com/questions/7217544/ajax-php-created-form-not-submitting) – IROEGBU

Используйте on() для этого, как,

$(document).on('submit','#homeprofile',function(e){ 
    e.preventDefault(); 
    alert("form submitted"); 
    $.ajax({ // Starter Ajax Call 
     type: "POST", 
     url: 'update.php', 
     data: $('#homeprofile').serialize(), 
    }); 
    return false; 
});

источник

2013-08-29 15:48:42

Это сработало отлично, спасибо! Просто хочу отметить, что я переместил этот фрагмент кода в main.php, тем самым удалив весь код jQuery из form.php ... Проблема решена! –

Небольшой вопрос в том, что вы приводится ссылка formcontaineropen в вызове JQuery (это, вероятно, опечатка?). Причина в том, что код JS, загружаемый через AJAX, будет интерпретироваться (поэтому eval() не требуется), но событие готовности к документу будет немедленно вызвано (что может быть до того, как загруженный контент AJAX фактически вставлен и готов в документе - поэтому событие отправки может не соответствовать правильно). Вместо этого вы должны связать свой код успеха запроса AJAX, что-то вроде этого:

main.php:

<html> 
<a href="#" id="addHomeProfile">Foobar</a> 
<div class="formcontainer"></div> 
<script src='jquery.js'></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#addHomeProfile").click(function(){ 
     $(".formcontainer").load("form.php", '', 
     function(responseText, textStatus, XMLHttpRequest) { 
      onLoaded(); 
     }); 
    }); 
}); 
</script>

form.php:

<form id="homeprofile"> <input type="text" name="name" id="name" /> 
<input type="submit" value="submit" id="submit"></form> 

<script type="text/javascript"> 
function onLoaded() { 
    $('#homeprofile').submit(function(e){ 
     e.preventDefault(); 
     alert("form submitted"); 
     $.ajax({ // Starter Ajax Call 
      type: "POST", 
      url: 'update.php', 
      data: $('#homeprofile').serialize(), 
     }); 
    }); 
}; 
</script>

источник

2013-08-29 16:14:08 Odin

готовый обратный вызов будет немедленно выполнен, так как dom уже готов. Ваше решение могло бы решить возможное состояние гонки, которое могло бы произойти. –

Вы правы. Бьюсь об заклад, проблема заключается в состоянии гонки. – Odin

Вы должны использовать .on() синтаксис для таргетинга динамически созданных элементов (элементы, загруженные в DOM с помощью JS или jQuery после первоначального рендеринга)

Хорошо

// in english this syntax says "Within the document, listen for an element with id=homeprofile to get submitted" 
$(document).on('submit','#homeprofile',function(e){ 

    //stop the form from submitting 
    e.preventDefault(); 

    // put whatever code you need here 

});

Не так хорошо

// in english this syntax says "RIGHT NOW attach a submit listener to the element with id=homeprofile 
// if id=homeprofile does not exist when this is executed then the event listener is never attached 
$('#homeprofile').on('submit',function(e){ 

    //stop the form from submitting 
    e.preventDefault(); 

    // put whatever code you need here 

});

Надеется, что это помогает!

источник

2013-08-29 16:32:14 MonkeyZeus

Спасибо за отличное объяснение! Это помогло мне в полной мере понять, как решить проблему с помощью кода, описанного выше @Rohan Kumar. –

Мое решение несколько своеобразно, но так или иначе оно и есть.

Это будет ваш main.php:

<a href="#" id="addHomeProfile">Foobar</a> 
<div class="formcontainer"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#addHomeProfile").click(function(){ 
     $(".formcontaineropen").load("form.php", '', function(response){ 
      var res = $(response); 
      eval($('script', res).html()); 
     }); 
    }); 
}); 
</script>

И это ваш form.php:

<form id="homeprofile"> <input type="text" name="name" id="name" /> 
<input type="submit" value="submit" id="submit"></form> 

<script type = "text/javascript"> 

    $('#homeprofile').submit(function(e){ 
     e.preventDefault(); 
     alert("form submitted"); 
     $.ajax({ // Starter Ajax Call 
      type: "POST",   
      url: 'update.php', 
      data: $('#homeprofile').serialize(), 
     }); 
    }); 

</script>

источник

2013-08-29 16:35:07

Cant .ajax() отправить форму php, загруженную на главную страницу с помощью jQuery .load()

ответ

Смежные вопросы