Ajax on Click Event

Question

I am using ajax to redirect pages without refreshing for a tags. However, it randomly works. Sometimes, it doesnt even generate log that I put inside the function on purpose to check if its called. I guess a tag performs href that is already declared on inline. How do I make this 100% work?

$(".view-about-us a").on('click', event=>{

event.preventDefault();
var new_url = $(this).attr("href");

$.ajax({
    dataType: 'html',
    type: "POST",
    url: new_url,
    data: {

    },
    success: function(result) {
      window.history.pushState(null, null, new_url);

      var htmlString = result;

      var parser = new DOMParser();
      var doc = parser.parseFromString(htmlString, "text/html");
      var parent = doc.querySelector(".main-container");
      var children = parent.childNodes;

      children.forEach(child => console.log(child));

      $(".main-container").html(children);
    },
    error: function(result) {
        alert('error');
    }
});
});

Where is `event` defined before you do `event.preventDefault();`? — kshetline, Jul 18 '18 at 03:24
You are using an arrow function so `this` will not be bound to the element clicked. In this case, use a normal function, ie `function(event) { ... }` — Phil, Jul 18 '18 at 03:45
@Phil Well, it only works with 2 links of 4 links. The rest doesnt work with Ajax, but it redirected by its href which is declared inline. If I click the links twice, the rest as well works, its weird — Hclee, Jul 18 '18 at 03:50
The `` tags it doesn't work on... are they loaded from a prior AJAX call? — Phil, Jul 18 '18 at 03:52
@SamHolmes Unfortunately, I didnt solve it yet. I was doing another part for website. I guess the problem is DOMPARSER, because when I use it, href of the a tag is active so that it refreshes the page while redirecting to new pages. Btw, it randomly happens out of a tags. The reason why I thought the DOMPARSER is the problem, its because it totally works fine when I do it with $('body').html(result). — Hclee, Jul 20 '18 at 18:19
What happens if you turn `children` back into a string _before_ setting the HTML using [Object.prototype.toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString)? — Sam Holmes, Jul 21 '18 at 10:04

score 0 · Accepted Answer · answered Jul 18 '18 at 03:33

0

One thing you could do is make all of you href attributes javascript:void(0), then store what had previously been your href in a data attribute, such as data-href.

answered Jul 18 '18 at 03:33

kshetline

12,547
4
37
73

I cant do that, because I am working under Drupal and i guess Drupal doesnt allow me to do that. Btw, I checked new_url, but it returns undefined. So, I guess i need to find a way to make it return proper url. – Hclee Jul 18 '18 at 03:37

Ajax on Click Event

1 Answers1