Solved

Simple JQuery Dialog opening problem.

Posted on 2010-09-23
7
585 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:Dushyant Sharma
ID: 33742484
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
ID: 33742542
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:Dushyant Sharma
ID: 33742610
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 2

Author Comment

by:jdav357
ID: 33743350
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:
Dushyant Sharma earned 500 total points
ID: 33743393
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:Dushyant Sharma
ID: 33743425
also check error console if there is any javascript error reported.
0
 
LVL 2

Author Closing Comment

by:jdav357
ID: 33835920
thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

856 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