Solved

Simple JQuery Dialog opening problem.

Posted on 2010-09-23
7
582 Views
Last Modified: 2013-11-11
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
Comment
Question by:jdav357
  • 4
  • 3
7 Comments
 
LVL 14

Expert Comment

by:ddsh79
Comment Utility
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
 
LVL 2

Author Comment

by:jdav357
Comment Utility
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
 
LVL 14

Expert Comment

by:ddsh79
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Author Comment

by:jdav357
Comment Utility
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
 
LVL 14

Accepted Solution

by:
ddsh79 earned 500 total points
Comment Utility
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
 
LVL 14

Expert Comment

by:ddsh79
Comment Utility
also check error console if there is any javascript error reported.
0
 
LVL 2

Author Closing Comment

by:jdav357
Comment Utility
thanks
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now