?
Solved

jQuery Dialog - Dialog popup on links click

Posted on 2010-11-18
6
Medium Priority
?
303 Views
Last Modified: 2012-05-10
I am facing the problem of dialog not opening on subsequent click on a same link.  I read about it on different sites however I still dont know how to go about it in my case.  I have the following page http://www.clemexdownload.com/sites/newlook/test5.html
where the behavior and code can be found.  My links look something like this  <a href="images/myImage.jpg" id="imgModalX" title="My title for this image">Click to enlarge</a>
where the image uri and title is pass to the function that open the dialog.

If you have any suggestions please let me know.
Thanks
0
Comment
Question by:clemex
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 2000 total points
ID: 34170933
I only experienced the problem you explained when using Chrome, it work on FF and IE.
I believe it's because after the first time image is loaded (and cached) for the session it won't fire the load() event on the second time you click the link.

Check if the code below works. (I haven't had time to test)

References:
http://api.jquery.com/live/
http://wap.w3schools.com/jsref/prop_img_complete.asp
jQuery(document).ready( function() {
 
	  
	  /* Creer images PopUp sur certain liens */
	  $("a[id^=imgModal]").click(function(event){       
			
		event.preventDefault();
		PreviewImage($(this).attr('href'),$(this).attr('title'));
											
	  });  	  
  
  //When the image has loaded, display the dialog
  $('#image').live('load', function(){
	ShowDialog();
  });

});

PreviewImage = function(uri, mytitle) {

  //Get the HTML Elements
  imageDialog = $("#dialog");
  imageTag = $('#image');
  
  //Split the URI so we can get the file name
  uriParts = uri.split("/");

  //Set the image src
  imageTag.attr('src', uri);

  if(imageTag[0].complete) ShowDialog();
}

ShowDialog = function(){

    $('#dialog').dialog({
		modal: true,
		resizable: false,
		draggable: false,
		width: 'auto',
		title: mytitle
    });
    
}

Open in new window

0
 

Author Comment

by:clemex
ID: 34175947
This is great thanks.
I modified the code slightly and it work great.  Also did not understand what the lines 12-15 were doing so   I removed them and it still work.  Are they really necessary? Maybe for a specific browser?  You can see it in action here:
http://www.clemexdownload.com/sites/newlook/test51.html

Thanks
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34176276
Good to know you got it working.

Lines 12-15 will not come in to play as you are using the same image in the main page and in the dialog box, because the image is already loaded by the browser in the main page before you open the dialog box.
But if you use a different image in the dialog box you will need this part of the code.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:clemex
ID: 34188549
Ok I updated this page with a different image in the dialog window but even with the bit of code it seems not to open on the first click but only on subsequent clicks.

http://www.clemexdownload.com/sites/newlook/products/powderdisperser.html

If possible you can let me know your thought on this at chabot_eric at hotmail.com
Thanks
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34189432
Try changing the
  //When the image has loaded, display the dialog
  $('#image').live('load', function(){
        ShowDialog();
  });

to

  //When the image has loaded, display the dialog
  $('#image').bind('load', function(){
        ShowDialog();
  });

I saw few articles when I was digging this, that live event binding seem to has a problem with load event.
0
 

Author Comment

by:clemex
ID: 34190802
Perfect!
Thanks again.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question