asked on

Simple JQuery Dialog opening problem.

Hi,
I have the following code.
if in the dialog box, I set autoOpen to true, it opens just fine.
If in the click handler I remove"jQuery('#form_new_ticket').dialog("open");"
The alert is displayed. So these two work just fine on their own!
but when I try to get the dialog box to open from the click handler, it simply won't do it. I have sued similar code before no problem, but for some reason this wont work.
Any clues?
Cheers
John

jQuery('#form_new_ticket').dialog({
                                       autoOpen:false,
                                        modal: true	
				});

    jQuery('#new_ticket').click(function(e){
                    jQuery('#form_new_ticket').dialog("open");
                    alert('here');
                    e.preventDefault();
                })

Open in new window

Dushyant Sharma

first check typo, i got this wrong with ticket and ticker, second try this in document load event.
$(document).ready(function(){
jQuery('#form_new_ticker').dialog({
autoOpen:false,
modal: true
});

jQuery('#new_ticker').click(function(e){
jQuery('#form_new_ticker').dialog("open");
})
});

<div id="form_new_ticker">new ticker</div>
<div id="new_ticker">tick</div>

the above is working perfectly fine for me.

i'm using jquery 1.4 and ui 1.8

jdav357

ASKER

Hi Thanks for that,
I changed a little bit of your code:
[code]
jQuery(document).ready(function(){
jQuery('#form_new_ticket').dialog({
autoOpen:false,
modal: true
});

jQuery('#new_ticket').click(function(e){
jQuery('#form_new_ticket').dialog("open");
})
});
[/code]
I changed the typo you said, but I also changed :jQuery(document) from $(document)

Unfortunately this did not work..

Dushyant Sharma

what version of jquery and ui are you using.

just give a try adding the one which i'm using from google.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

jdav357

ASKER

No Joy, here is my code. I have it placed at the bottom of my page.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
    jQuery.noConflict();

    jQuery('.hide').hide();
    jQuery('.accordion').find('h3').click(function(e){
        jQuery(this).siblings('div').toggle(1000);
    })
    
jQuery(document).ready(function(){
    jQuery('#form_new_ticket').dialog({
                                       autoOpen:false,
                                        modal: true	
				});

    jQuery('#new_ticket').click(function(e){
                    jQuery('#form_new_ticket').dialog("open");
                    alert('here');
                    e.preventDefault();
                })
});
     jQuery(".tooltipped").mouseover(function() {
        jQuery(this).find(".tip").show(200);
     }).mouseout(function(){
        jQuery(this).find(".tip").hide();
     });




</script>

Open in new window

ASKER CERTIFIED SOLUTION

Dushyant Sharma

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dushyant Sharma

also check error console if there is any javascript error reported.

jdav357

ASKER

thanks