Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 605
  • Last Modified:

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

0
jdav357
Asked:
jdav357
  • 4
  • 3
1 Solution
 
Dushyant SharmaCommented:
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
0
 
jdav357Author Commented:
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..

0
 
Dushyant SharmaCommented:
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>
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
jdav357Author Commented:
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

0
 
Dushyant SharmaCommented:
working for me..
try this below code in a separate html file and see this works or not.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         

    </head>
    <body>
<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>
<div id="form_new_ticket">this is test</div>
<div id="new_ticket">clickme</div>
    </body>
</html>
0
 
Dushyant SharmaCommented:
also check error console if there is any javascript error reported.
0
 
jdav357Author Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now