Javascript code to Jquery code not working

Question

I have an image that is changed when I click on several links. The following javascript code works well :

<img src="myImage.png" id="mainImg"  /> 

<a href="javascript:;" id="report1_id" onclick="document.getElementById('mainImg').src='http://localhost/convertToReport1.do';">Report1</a>
<a href="javascript:;" id="report2_id" onclick="document.getElementById('mainImg').src='http://localhost/convertToReport2.do';">Report2</a>

But I'm trying to change the code to use Jquery code instead. It calls the same server code as the javascript example. No errors are generated & a png is streamed back. But the image is not updated on the html page. To make things worst, the html moves to the top of the page. In the working javascript code, the image would fresh with a nice ajaxy feel where only the image would change & the rest of the page would not move. My Jquery code is below :

<img src="myImage.png" id="mainImg"  /> 

<a href="" id="report1_id">Report1</a>
<a href="" id="report2_id">Report2</a>

<script type="text/javascript">

    $(document).ready(function(e) { 
        $("#report1_id").click(function(e)     {   
            alert("This Is Report1");
            d = new Date();
            $("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
        });     

        $("#report2_id").click(function(e)     {   
            alert("This Is Report2");
            d = new Date();
            $("#mainImg").attr("src", "http://localhost/convertToReport2.do?"+d.getTime());
        });             
    });
</script>

Can anyone see what I'm doing wrong? Any help would be appreciated.

Is there a reason why you are appending a time in the new jQuery code, but not in the old native, inline JS code? Also, you might want to wrap all your jQuery code within the DOM ready function. — Terry
– Terry, Commented Oct 12, 2014 at 20:44
Curiosity: why would you migrate from already-working and fast plain JavaScript to its slow and fat framework? — Shomz
– Shomz, Commented Oct 12, 2014 at 20:45
do the alerts fire? If not probably haven't wrapped your code in dom ready handler — charlietfl
– charlietfl, Commented Oct 12, 2014 at 20:49
@Terry I saw it somewhere else in StackOverflow. Something about the cache & forcing it. — LatinCanuck
– LatinCanuck, Commented Oct 12, 2014 at 20:53
@Shomz, you know how it is, if we use javascript, its considered old school and bad standards. Always use JQuery all the time they push on us. At least at my current job that's what they're forcing us to do. — LatinCanuck
– LatinCanuck, Commented Oct 12, 2014 at 20:54

Shomz · Accepted Answer · 2014-10-12 20:50:08Z

2

From your code, the image src should change, but maybe it doesn't change to what you'd like. Make sure that http://localhost/convertToReport1.do returns exactly what you need (ideally, you can specify that in the question itself).

The page jump happens because of the anchors href attribute. Either remove it, or prevent the default anchor behaviour in your click handler function, like this:

$("#report1_id").click(function(e)     {   
    e.preventDefault();  // <--- this is the key, return false would also work at the end
    alert("This Is Report1");
    d = new Date();
    $("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});

See it in action here: http://jsfiddle.net/egvac61c/

answered Oct 12, 2014 at 20:50

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shomz Over a year ago

@Terry Haha, sorry mate! :)

LatinCanuck Over a year ago

You're right, its right there. It should work. It has to be on the server side. But why would the same code work with the javascript code. I'll need to trace it further.

Shomz Over a year ago

Honestly, I doubt whether using plain JS or jQ to change an image's src attribute could break the code. It has to be something else. See what your server script outputs just by opening it in the browser or try to change the src directly to some other image. That should help you narrow down the problem.

Shomz Over a year ago

@LatinCanuck What happens if you don't use the query string? Could it be that your script "doesn't like it"?

LatinCanuck Over a year ago

Well, it finally works with the jquery code. I thought the e.preventDefault() was what did it but then I remove it, and it still worked(albeit without the nice ajaxy feeling). So I must have changed something on the server to make it work. No idea what though. This is the server code : response.setContentType("image/png"); WebViewer.streamImage(response, currentReport.makeReport(Report.PNG)); WebViewer is an internal library that we've been using for sometime. I'm just happy it works. Thanks for your help.

|

Collectives™ on Stack Overflow

Javascript code to Jquery code not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related