Solved

Simple JQuery Dialog opening problem.

Posted on 2010-09-23
7
587 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
[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
  • 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
Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

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…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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)

696 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