Trying to change behaviour of a button with jquery/json result

In my app I'm clicking a link/button which generates a curl request and the request responds back with a url. Upon success the colour and text of my button changes (works fine) and ideally if I was to click the newly updated button, the url that was passed back in my json would be where my button click would now go to instead of generating the curl request.

I am receiving back the json encoded url example:
({"0":"http:\/\/reports.carproof.com\/mobile?id=ti5jfifjridjje"})  
and updating the href of my button which was previously just href="".

Issue is if you now click the button, it of course executes the curl request again instead of now going to the newly passed back url.

My question is: How could I change my code below so upon successful return of the url, it would open that instead of doing another curl request?

	$("#carproof_btn").click(function(e) {
		$("#carproof_text").text("Please hold...");
		$("#carproof_btn").removeClass('sButton sBlue').addClass('sButton sRed');
		$("#activity").attr('src',"assets/images/icons/loader13.gif");
		e.preventDefault();
        $.ajax({
            url: 'trades/carproof/?vin=<?php echo $trade["vin"]?>',
            type: "POST",
            success: function(result){
            if(result){
                $("#carproof_btn").removeClass('sButton sRed').addClass('sButton sGreen');
                $("#activity").attr('src',"assets/images/icons/sPlus.png");
                $("#carproof_text").text("Open Report"); //text changes on button
                $("#carproof_btn").attr("href", result[0] ); //the url is contained here
                } else {
                $("#carproof_text").text("Failed!");
                }
            }
        });
	});
</script>

Open in new window

LVL 1
tjyoungAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
	$("#carproof_btn").click(function(e) {
if($("#carproof_btn").attr("href")==""){
		$("#carproof_text").text("Please hold...");
		$("#carproof_btn").removeClass('sButton sBlue').addClass('sButton sRed');
		$("#activity").attr('src',"assets/images/icons/loader13.gif");
		e.preventDefault();
        $.ajax({
            url: 'trades/carproof/?vin=<?php echo $trade["vin"]?>',
            type: "POST",
            success: function(result){
            if(result){
                $("#carproof_btn").removeClass('sButton sRed').addClass('sButton sGreen');
                $("#activity").attr('src',"assets/images/icons/sPlus.png");
                $("#carproof_text").text("Open Report"); //text changes on button
                $("#carproof_btn").attr("href", result[0] ); //the url is contained here
                } else {
                $("#carproof_text").text("Failed!");
                }
            }
        });

}
else{
location.href=$("#carproof_btn").attr("href")
}
	});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tjyoungAuthor Commented:
Its real close but not quite happening:
When I click it opens a new window (which is what I'm after, but I didn't mention about a opening new window), AND it opens in the one the button is in. Can I get it to open only in a new window?

Does this help? This is the current button code:
<a href="" title="" target="blank" id="carproof_btn" class="sButton sBlue" style="margin-top: 0px; border:0px;"><img id="activity" src="assets/images/icons/sPlus.png" width="10" height="10" alt="" /><span id="carproof_text">Get CarProof</span></a>
0
GaryCommented:
You're contradicting yourself...
You want it to open in a new window? If yes then change

target="blank"
to
target="_blank"
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

tjyoungAuthor Commented:
Thanks I changed that. The problem is its opening the url twice (once in a new _blank window) and also in the window that contains the button.
I"m trying to get it to only open a new window.
0
GaryCommented:
Remove this

else{
location.href=$("#carproof_btn").attr("href")
}
0
Chris StanyonWebDevCommented:
You will need to unbind the click event once your ajax has completed successfully:

$("#carproof_btn").click(function(e) {
	e.preventDefault();
	thisButton = $(this); //we'll need this later!
	
	$("#carproof_text").text("Please hold...");
	$("#carproof_btn").removeClass('sBlue').addClass('sRed');
	$("#activity").attr('src',"assets/images/icons/loader13.gif");

	$.ajax({
		url: 'trades/carproof/?vin=<?php echo $trade["vin"]?>',
		type: "POST",
		success: function(result){
			if(result){
				$("#carproof_btn").removeClass('sRed').addClass('sGreen').attr("href", result[0]);
				$("#carproof_text").text("Open Report");
				$("#activity").attr('src',"assets/images/icons/sPlus.png");
				thisButton.unbind("click"); //prevent this code from running again!
			} else {
				$("#carproof_text").text("Failed!");
        		}
    		}
	});
});

Open in new window

0
tjyoungAuthor Commented:
Thank you very much for your input. Works perfect with the unbinding addition.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.