Javascript to Check for Event Without Page Refresh

How can I detect page navigation without reloading?

That's because the new pages are either

1 ) Already at the ready and simply being brought in-sight by jQuery

2 ) Ajax called in.

If you scout for your navigation (the links you click on to go to the other page), you should find <a href="someUrl" data-attr="someUrlMaybe">click me</a> or so.

If you look for wherever this is is bound (i.e.: $('#navigation a').on("click", function(){});, you can simply wrap your script within a function, and trigger this function together with loading the new page every time. (after it, obviously).

I wish I could be more clear, but you did not provide any code yourself, so I have absolutely no idea of what kind of example I should be giving here.

-- the point: Those page changes are triggered by something in your javascript. Find the trigger that makes the page-change happen, and simply insert myCustomFunction();.

---

If you want to make your bindings update with a new DOM, you could use this:

  function setBindings(){
  //removing the old bindings prevents the "click" from triggering twice.
  $('a').off("click");
  $('a').on("click", function(){
    //load page and such here
    //Apply script you want to run here
    setbindings(); //rerun the function to set the bindings.
  });
}

Refresh data without reloading the page

Assuming those DIVs hold the number of hearts, if the response of the target page is the new number of hearts then:

 success: function(data) {
    targetElement.find(".comments-sub-header__item-icon-count").html(data)
 }

elsewhere if you want to add +1 to current number regardless of server response:

 success: function() {
    var current= parseInt(targetElement.find(".comments-sub-header__item-icon-count").html());
    targetElement.find(".comments-sub-header__item-icon-count").html(current+1)
 }

Footnote: as the ajax request is nested inside the click function, the targetElement in my codes is the clicked element. You may get it in defferent ways e.g.

$('.like-button').on('click', function(event) {
     var targetElement=$(this);
     ....
}

How to detect service worker update without page refresh?

You can force the browser to check for a new Service Worker by calling registration.update(). This also installs the new SW if there's one.

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

Submit form and refresh DIV without page refresh not working?

For image caching you can try the age old "cachebuster" method.

All it is is put something unique into the url query.

 www.example.com/image.jpg?cachebuster=somethingunique

The browser will see this as a new request because it doesn't know what the query string does, it could be a search form for all it cares. So it will not pull it from the cache.

Good choices for the something unque is any time based component, as you know its never been used before. Ive used filesize($file) before when doing image edits.

$url = "www.example.com/image.jpg?cachebuster=".microtime(true); //as a float
$url = "www.example.com/image.jpg?cachebuster=".time(); // only 1 second granularity
$url = "www.example.com/image.jpg?cachebuster=".filesize($file); // based on the size of the file
$url = "www.example.com/image.jpg?cachebuster=".hash_file($file);  //based on file contents

And so on. You can even do it in JavaScript if you want to.

For the form

    $('#uploads6').submit(function(e){
          e.preventDefault();

          //.. other code

          return false;
    });

One note is using $.post how you are will probably prevent the file from being uploaded.

Here is another SO question on that:

jQuery Ajax File Upload

If you want a non-javascript way to upload without refreshing page, you can also do it though an iframe but the onLoad even may not work in Chrome for that, so it can be hard to tell when the file is uploaded from the client side.

Here is a SO question I answered on that back in 2014

How can I upload files asynchronously?

JQuery - trigger click event without page reloading

I would highly recommend using an AJAX call to to submit the form. You will be given additional flexibility and the URL does not have to change. The form will submit to the URL you give it(The one you have above) and the section will change to the desired verbiage.
An additional change will be to change the type="submit" input to a button. This will not submit the form on click (and no additional work arounds will be needed to stop the submission).

Updated the Fiddle to include both the radio button example and the anchor tags as described. Update the URL to your URL. This is running using JQuery.

HTML:

<div class="data-form">
  <p>Are you hungry?</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="yes">Yes</label>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="no">No</label>
    <button type="button" class="submitButton1 btn btn-primary">Submit</button>
  </form>
  <a id="areYouHungryOption" data-value="yes">Yes</a>
  <a id="areYouHungryOption" data-value="no">No</a>
</div>

Javascript:

$(".submitButton1").click(function() {

  if ($('input[name="optradio"]:checked').size() > 0) {
    submitData($('input[name="optradio"]:checked').val());
  } else {
    alert('Please select an option!');
  }
})

$("a#areYouHungryOption").click(function() {
  submitData($(this).data("value"));
})

var submitData = function(answer) {
  $.ajax({

      method: "GET",
      url: "/echo/html/",
      data: {
        ans: $('input[name="optradio"]:checked').val()
      }
    })
    .done(function(msg) {
      $('.data-form').html('Thanks for your feedback!');
    });
}

See the following JSFiddle project for the example

https://jsfiddle.net/bgerhards/3y0vwf2m/

---

Related Topics