Javascript $. Не всегда обновляется при клике

Question

Мне интересно, почему мой код не обновляет вызов ajax, когда я нажимаю на кнопку.Отображается только после обновления страницы.Мой код ниже:

Вот полный код jquery / javascript: $ (document) .ready (function () {$ ("# savesubmainbutton"). Live ('click', function () {

           $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
              $('#submain_save_message').html(data);
            });

            $('#submain').hide();

            // Load data after submission
                $.get('getsubmain.php', { mainid: "<?php echo $_GET['id'];  ?>" },
                function(data) {
                  $('.submain_message').html(data);

                });



        });

    }); //end

Это часть формы HTML

<div id="submain">

    <form id="submainform" name="submainform" method="post" action="" enctype="multipart/form-data" >
    <table><input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <!--<tr><td width="289" align="right">Jou naam:</td><td><input type="text" name="yourname" id="yourname" style="background-color:lightblue;" /></td></tr>
    <tr><td width="289" align="right">Jou e-posadres:</td><td><input type="text" name="email" id="email" style="background-color:lightblue;"/></td></tr>-->
    <tr><td width="289" align="right">Naam van die geskiedkundige figuur (bv. Jan van Riebeeck):</td><td><input type="text" name="name" id="name" /></td></tr>
    <tr><td width="289" align="right">Foto van die geskiedkundige figuur :</td><td><input id="file_upload" name="file_upload" type="file" /></td></tr>
    <tr><td width="289" align="right"><div id="filname"></div></td><td><input id="filename2" name="image" type="hidden" value=""  /></td></tr>
    <!--<tr><td width="289" align="right">Naam van jou inskrywing :</td><td><input type="text" name="title" id="title" /></td></tr>-->
    <tr><td width="289" align="right">Datum waarop die inskrywing gemaak is (bv. 1652):</td><td><input type="text" name="date" id="date" /></td></tr>
    <tr><td width="289" align="right">Status update (bv. Wat sien ek daar in die verte? Is dit 'n tafel?):</td><td><textarea name="message" id="message"></textarea></td></tr>
    <input type="hidden" name="mainid" value="<?php echo $_GET['id']; ?>" />
    <tr><td></td><td><div id="savesubmainbutton" style="color:blue"><input type="button" value="Save" /></div></td></tr>
    </table>
    </form>

Answer 1

Ваш $.get не вызывается при обратном вызове вашего $.post. Таким образом, $.get работает, но поскольку данные еще не были отправлены, новые данные не возвращаются.

Если переместить $.get внутрь обратного вызова, он должен работать как положено.

Хотя было бы лучше и эффективнее не беспокоиться о выполнении второго вызова ajax, а вместо этого просто вернуть данные из $.get в возвращаемые данные для $.post.

Примерно так, как показано ниже, при условии, что вы возвращаете данные как объект json, так что вы можете просто иметь две переменные для двух разных частей ответа.

  $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
       $('#submain_save_message').html(data.save_message);
       $('#submain').hide();
       $('.submain_message').html(data.return_data);
     },'json');

Answer 2

Помните, что ваш ajax-вызов асинхронный - поэтому сообщение не вернуло данные до того, как вы получили get - измените ваш код, как показано.

 $(document).ready(function() { 

// Save SubMain data
    $("#savesubmainbutton").live('click',function(){

       $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
          $('#submain_save_message').html(data);
          $('#submain').hide();

        // Load data after submission
            $.get('getsubmain.php', { mainid: "<?php echo $_GET['id'];  ?>" },
            function(data) {
              $('.submain_message').html(data);

            });

        });





    });

});// конец

Answer 3

Несколько замечаний.Если вы хотите заменить поведение отправки по умолчанию, лучше убедиться, что событие click отменено, иначе будет иметь место поведение формы по умолчанию.

Кроме того, сообщение является асинхронным, поэтому вам необходимолюбая последующая работа, которую вы хотите выполнить, выполняется в функции обратного вызова.

Answer 4

Запросы Get могут кэшироваться браузером, если они используют одинаковые параметры, см. здесь для получения более подробной информации.

Вы можете использовать POST или добавить фиктивный параметр, например, тики или текущее время, что будет отличаться, чтобы заставить GET не кэшироваться.