Retriggering javascript default event after AJAX response

Question

I have a tab-based set-up, with the tab content being loaded asynchronously.

<nav>
  <ul>
    <li><a href="/default" class="handle current" data-handle="default">OVERVIEW</a></li>
    <li><a href="/services" class="handle" data-handle="services">SERVICES</a></li>
    <li><a href="/clients" class="handle" data-handle="clients">CLIENTS</a></li>
  </ul>
</nav>
</div>
  <div class="tab selected" data-handle="default" data-populated="true">Some stuff in here.</div>
  <div class="tab unselected" data-handle="services" data-source="/services-snipet" data-populated="false"></div>
  <div class="tab unselected" data-handle="clients" data-source="/clients-snipet.html" data-populated="false"></div>
</div>

I have attached events to the handle class, so that it can move the current class and switch selected/unselected classes appropriately. However, before it makes that switch, it checks dataset["populated"] on the new tab. If this is false, it will load the dataset["source"] via AJAX and populate.

Additionally, I am using event.preventDefault() as part of the process, so as not to follow the link on the tab itself.

All of that is working just fine.

The issue is that I want to be able to retrigger the default event - the link - if the AJAX request fails, or times out. Is there some way of suspending/delaying the default event until I have the asynchronous AJAX response, so can decide then if I want to prevent it or not? Is there an alternate mechanism that would allow me to prevent it at the beginning, then retrigger it when I get an AJAX failure or time-out? Or is my only choice to read the href of this and redirect the page in the failure case?

(no jQuery, please)

Here is an solution to circumvent the prevenDefault-issue: http://stackoverflow.com/questions/7610871/how-to-trigger-an-event-after-using-event-preventdefault — Adrian Forsius, Oct 08 '14 at 11:36
Thanks Adrian - I had already seen that one. It was the namespace pollution that put me off it; it would effectively have rerun the same checking process. — Rick, Oct 08 '14 at 13:30
If namespace pollution is the the only thing you dislike about that solution, you could always associate the flag with the element itself. Maybe use jQuery's .data() with $(this).data() in the event handler to set/read that flag. — Dave Ward, Oct 08 '14 at 14:52

Adrian Forsius · Answer 1 · 2014-10-08T14:48:09.320

0

In your ajax call to populate on failiure you can change the document.location.href to force redirect:

DEMO

function ajax(event) {
    console.log(event);
    if(event.detail === 1) {
        event.preventDefault();
        var target = event.target;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 ) {
               if(xmlhttp.status == 200){
                    //Do normal stuff
               }
               else 
               {
                    //Do the same event but without prevetion
                    target.click();
               }
            }
        }

        xmlhttp.open("GET", "ajax.php", true);
        xmlhttp.send();
    }
};

var elements = document.querySelectorAll("li a");
for(i=0; i<elements.length; i++) {
    elements[i].addEventListener("click", ajax, false);
}

edited Oct 08 '14 at 14:48

answered Oct 08 '14 at 11:47

Adrian Forsius

1,437
2
19
29

That was the fallback I was expecting… just hoping for a more generic option that doesn't assume the default action / require it always to be manually defined. – Rick Oct 08 '14 at 13:32
What do you mean assume default action? the default action for links are redirection. – Adrian Forsius Oct 08 '14 at 13:34
In this case, it is on a link. But what if I want to put it on something else? (No, I can't think of a specific other thing with a default action…) – Rick Oct 08 '14 at 17:55

Retriggering javascript default event after AJAX response

1 Answers1