Блог

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

Вот полный код jquery / javascript: $(документ).готово(функция() { $(«#savesubmainbutton»).live(‘click’,функция(){

            $.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>
  

Помните, что ваш вызов ajax является асинхронным — поэтому post не вернул данные до выполнения 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);

            });

        });





    });
  

}); //end

Ваш $.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');
  

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

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

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

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