CODEWITHSUNDEEP
phpjqueryjquery-mobile
IMB
IMB

Reputation: 15899

Jquery Mobile: Show new data without refresh after adding it to DB

I'm displaying data from DB like this:

<?php foreach ($r as $k => $v):?>
    <div data-role="collapsible" data-mini="true" class="collapsible">
        Name: <?=$v['name']?>
    </div>
<?php endforeach; ?>

Now when I add new data to DB and the form is submitted, my script redirects back to this page. How do I show the new data immediately without manually refreshing the browser? I usually don't have this issue if I'm not using Jquery Mobile.

Upvotes: 0

Views: 333

Answers (3)

Mei Gwilym
Mei Gwilym

Reputation: 397

The problem here is that the data is hard coded into the page's HTML. After your form submission it's jQueryMobile that's changing the page/view, and no refresh of the page takes place so you're still seeing the same data.

You should refactor to create the loop with JSON data (loaded via AJAX). If the data is cached in a local variable, you can either add to it with the form's data, or make a fresh AJAX call to the server (recommended if you need sorting or filtering).

After reloading the data, the rendering code can be called, showing the new list.

Upvotes: 1

Karlton
Karlton

Reputation: 116

You could send the form with jquery ajax

$('form[name="myform"]').submit(function(evt){
    evt.preventDefault();

    $.post('/my_form_handler.php', $(this).serialize())
          .done(function(data){
              //Populate dom elements here with new data
          }).fail(function(data){
              //Handle failed ajax post.
          }); 
});

And then on successful post change the content of the dom-elements.

Not 100% sure i got the right syntax for it but i think it should give you a general idea on how to do it.

Upvotes: 3

Nelis Engels
Nelis Engels

Reputation: 21

it is easy. you can send the request to the server using ajax. and on the server side, you have to make the function to return the data added. the ajax function will get the success or fail function. the success function will run if it works.

on the success function , you have to add the content using javascript jquery with the returned data.

Thanks

Upvotes: 0

Related Questions