I'm hoping someone has come across this before. I'm using LightBox to retrieve an image from a server. The image is created at run time by using parameters in the URL request. Now, this works fine in all browsers. Today I noticed that Chrome is sending the request twice. IE, FF and Safari don't do this.
Using Chrome developer's tool Network tab I see that two calls are made to the server, first by lightbox and the second by Jquery line 7937. Using the same tool for firefox, only one call is made.
From the server side, I debugged it and all it does is return an image through a OutputStream. Its called twice from Chrome but only because chrome calls it twice. Any ideas why it would be doing this? Any ideas would be appreciated.
Code Below
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript" src="http://localhost/dawn/AEIX/js/lightbox.js"></script>
<script type="text/javascript">
$("#display_id").click(function(e){
var urlGetString = $.param($('#mainform_id').serializeArray());
urlGetString = "http://localhost/show.do?" + urlGetString;
$("#display_id").attr("href", urlGetString);
});
</script>
</head>
<body>
<form name="mainform" id="mainform_id" action="http://localhost/report.do">
<!-- lots of input fields here -->
<a id="display_id" href="#" data-lightbox="histogram3">
<button type="button" class="button">DISPLAY</button>
</a>
</form>
</body>
</html>
Solution was provided in GitHub by a very helpful user. The solution & user info can be found below.
https://github.com/lokesh/lightbox2/issues/239#issuecomment-46556681
I tried the solution in Chrome and it is now working fine. It only sends the data to the server once. The rest of the browsers are still working as before.