Question

I have a link as follows:

<a onclick="runSomeJsonpCall();" href="www.goherenext.com"> make this work </a>

The javascript method does your basic JSONP call, something like this:

function runSomeJsonpCall() {
var script = document.createElement("script");
script.src = "http://jsonpurl.com?parameter1=" + "someparam";
document.body.appendChild(script);
}

My JSONP call never actually executes, unless I put in return false to the onlick event, but then of course the href doesn’t navigate to the target.

How do I get both things to work?

NOTE: I can use pure JavaScript only, no libraries

Answer 1

you should prevent default event …
look there : event.preventDefault something like that …

function runSomeJsonpCall(event) {

    if (!event) var event = window.event;
    if (event.preventDefault) {
       event.preventDefault();
    }else{
       // IE
       event.returnValue = false;
    }
    var script = document.createElement("script");
    script.src = "http://jsonpurl.com?parameter1=" + "someparam";
    document.body.appendChild(script);

   // you should wait for jsonp loading
   // here i use an ID to retreive  the element but you can do your way ...
   setTimeout("changeLocation('"+ document.getElementById('linkID').href +"')", 1000);
}
changeLocation(location) {
    window.location.href = location;
} 

Personnaly, i really don’t like the use of inline onclick attribute, i’ll use addEventListener or attachEvent … i think it’s a beeter way 🙂