Question posted in
You can find the official documentation here.

How do implement an Ajax partial page refresh within this block of code? – Jquery ajax

I am trying to refresh part of a page. More specifically, it is a division tag with a "class name". I am trying to keep things simple and to the point to avoid confusion. How would I add a partial page refresh to a single class within my current block of code? Please note that the code seems to be doing exactly what I want it to. I just need to add a partial page refresh to finish it off, but I have no idea how to.

<script type="text/javascript">
$('form').on('submit', function() {
  var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
  that.find('[name]').each(function(index, value) {
    //console.log(value);
    var that = $(this),
        name = that.attr('name'),
        value = that.val();

      data[name] = value;
  });

  //console.log(data);
  //now we are using ajax
  $.ajax({
    url: url,
    type: type,
    data: data,
    success: function() {
      //console.log(response);
      //I think I would put the code for a page refresh here???
    }
  });
  return false;
});
</script>

Thank you so much in advance for your time and effort.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <!--Ajax request with form element-->
<script type="text/javascript">
$('form').on('submit', function() {
  var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
  that.find('[name]').each(function(index, value) {
    //console.log(value);
    var that = $(this),
        name = that.attr('name'),
        value = that.val();

      data[name] = value;
  });

  //console.log(data);
  //now we are using ajax
  $.ajax({
    url: url,
    type: type,
    data: data,
    success: function(data) {
      $('#update-whole-cart').load(document.URL + ' #update-whole-cart');//make sure to include space before second id input
      $('.update-whole-cart-added-icon').load(document.URL + ' .update-whole-cart-added-icon');
    }
  });
  return false;
});
</script>

    The problem was that I needed to filter out the data to only load part of the page with the contents I needed loaded. Thank you @MikeB for guiding me in the right direction. Another tip for anyone struggling is that you might need to put you desired part of page to reload in a separate class division and then for that new class division style it with a margin of 0 and padding of 0. The reason being is that if you do not add a new class once the Ajax request is completed it seems to move the element/class around to its original position I think. I don't know if there is a better way to do this but this is what worked for me. Hopefully my input can save you headaches. Context: this code is used to grab input data from a form element without whole page reload. Then the data is submitted and part of the page that needed to be reloaded, in this case the cart widget and my add to cart icon, was only reloaded.


  2. 0

    Since you appear to be using jQuery, you will need to add a param to your success function, eg:

    success: function(data) {
  $(".my-div-class").html(data); // update all divs with this class
 }

    This will take whatever your page returns (so ensure it is HTML) and update ALL div nodes class="my-div-class" with data.

    If you used in your parent page, you could use:

     $("#my-div-class").html(data);

    instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search