AJAX call working but page not updating

Question

I am using python flask, I want the status of the button to change from "like" to liked when a user clicks it. I get no console errors, XHR loads perfectly. If I click the button and reload the page manually the status of the button changes, but I will like to do the reload with Ajax. Here is my code, thanks in advance. The backend returns a JSON object with jsonify.

HTML:

<button class="btn btn-pill btn-warning btn-xs" id="async_like">
<span class="icon icon-thumbs-up"></span> Like

jQuery:

<script>
$('button#async_like').click(function () {

  $.ajax({
    url :"{{ url_for('.like_post', id=post.id) }}",
    type : 'POST',
    success : function (resp) {
        $('#async_like').append(resp);
    }
  })
})
</script>

Is requirement for `"#async_like"` selector HTML to remain the same after reloading the `document`? — guest271314, Oct 03 '17 at 02:06
Don't use `.append()`, that will add the new content from `resp` after the existing button content. Assuming you want to replace the existing button content use `.html()` instead. — nnnnnn, Oct 03 '17 at 02:09
See [Global Variable usage on page reload](https://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) — guest271314, Oct 03 '17 at 02:09
@guest271314 I am not sure I totally understand your question, this is my attempt answering. Yes I should remain the same and only affect the post whose button is clicked — aharding378, Oct 03 '17 at 02:10
@aharding378 _"If I click the button and reload the page manually the status of the button changes"_ Is expected result for HTML set following `$.ajax()` call to remain rendered when `window` is reloaded? — guest271314, Oct 03 '17 at 02:18
guest271314 yes, that's what I am expecting. I have replaced .append with .html() but getting the same result — aharding378, Oct 03 '17 at 02:20
@guest271314 yes but I am not sure how to apply that to my code, it seems to be more complex. Any tips? — aharding378, Oct 03 '17 at 02:23
The "tips" are at the linked Question and Answers. You can use several different approaches to achieve requirement, including `window.history` or query string parameters. — guest271314, Oct 03 '17 at 02:25
@ nnnnnn I have changed .append to .html but getting the same result — aharding378, Oct 03 '17 at 02:26
The code will continue to get the same result. An HTML `document` does not store the content of the `document` which is adjusted by user at browser. The reload request is for the HTML stored at server. One option is to use `window` object to store data before reload and access the stored data after reload. — guest271314, Oct 03 '17 at 02:27
@guest271314 I am looking at the linked question but I am honestly confused by it. I am a beginner with JS — aharding378, Oct 03 '17 at 02:32
You could consider taking the time to read the question and answers. — guest271314, Oct 03 '17 at 02:33

guest271314 · Answer 1 · 2017-10-03T03:03:50.717

One possible approach could be to use query string parameter when reloading HTML document. At load event of window check if location.search is not an empty string, or is a specific key, value pair, if the condition is true, set the HTML using the query string key and value.

$.ajax()
.then(resp => {
  $("#async_like").html(resp);
  location.href = location.href + "?button=" + resp
})

At .ready() alias jQuery() at each HTML document check if the query string exists to set HTML of an element

$(() => {
  if (location.search) {
    let [prop] = [...new URLSearchParams(location.search).values()];
    if (prop === "clicked") {
      $("#element").html(prop);
    }
  }
});

plnkr http://plnkr.co/edit/3VQVSevHFvSE8SYcNEvU?p=preview

AJAX call working but page not updating

1 Answers1