Jquery dialog box wont open?

Question

I'm new to jquery. I attempted to make a jquery dialog box on a dynamic html content. I tried in two different ways. be that as it may, its not working? What is the amiss with the code. pls help me.

1 try $('#opener').on('click', function(){ //action });

2 try $(document).on('click', '#opener', function(){ //action });

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">Open Dialog</button>

<div id="new_dialog_area"></div>
</body>
</html>


<script>

$(function() {

  function makedialog(){
     var htmlData = '<div id="dialog" title="Basic dialog">';
       htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>';
       htmlData += '</div>';
       $('#new_dialog_area').html(htmlData);
  }

//  $('#opener').on('click', function(){
  $(document).on('click', '#opener', function(){
    makedialog();
   $("#dialog").dialog({
    autoOpen:false,
   });
   $("#dialog").dialog("open");
 });

});
</script>

I don't know if that is the error, but you should use `.click` instead of `.on`. Does it throw any errors in the console log? — , Aug 27 '18 at 15:29
Perhaps the problem is your script tag is outside document head/body? — Spikolynn, Aug 27 '18 at 15:30
There's a broken string in `makeDialog`. *Always* check the browser console for error messages. — Chris G, Aug 27 '18 at 15:32
@ChrisG can you pls kindly explain me to what is this "There's a broken string in makeDialog" ? — Adam, Aug 27 '18 at 18:26
@Adam As I'm sure you've realized by now, you're trying to use `'` inside a String that's delimited by `'`. — Chris G, Aug 27 '18 at 23:10

Leo · Accepted Answer · 2018-08-27T15:39:26.197

3

I think the mistake is another

change this  'x' to  \'x\'

In the first case it is seen as a variable

In the second it is seen as a simple string / character in quotes

htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the \'x\' icon.</p>';
       htmlData += '</div>';

Demo: jsfiddle

P.s continue reading @J. C. Rocamonde's answer : answer

edited Aug 27 '18 at 15:39

answered Aug 27 '18 at 15:32

Leo

540
3
17

Thank you so much sir! now I got it. – Adam Aug 27 '18 at 18:22
I have added two buttons and I updates as this. https://jsfiddle.net/adam93/rjawemup/1/ I want to make that dialog boxes toggleable. Mean If one button click open dialog box with its id and then click on the same button hide it. and also if dialog box open then click on the other button dialog box close and open dialog box for it. how to that? – Adam Aug 27 '18 at 18:42
@Adam Good morning, could you explain better ..? partly I think I understand :) – Leo Aug 28 '18 at 06:41
@Adam you could ask another question, so that other people can help you too – Leo Aug 28 '18 at 06:53
@Adam to use a toggle, you can do like this `if(!$("#user_dialog").dialog("isOpen")) { $("#user_dialog").dialog("open"); } else { $("#user_dialog").dialog("close"); }` – Leo Aug 28 '18 at 07:04
1

Good morning! Yeah I also tried that. https://jsfiddle.net/rjawemup/32/ but the problem is dialog box titles dont change and if I first click button 1 dialog box show for that and then click on the button 2 that dialog box close, but not poping up dialog box 2 for same time. – Adam Aug 28 '18 at 08:14
@Adam this work, https://jsfiddle.net/Micio/rjawemup/36/, but I had to repeat the function '$ ("# user_dialog"). dialog (' destroy '). remove ();' and I do not understand why. – Leo Aug 28 '18 at 09:47
1

Thank you sir. I ll check that. – Adam Aug 28 '18 at 15:43
@Adam have you found a solution? – Leo Aug 29 '18 at 06:43
1

Still no luck. But Im researching on it. I think the thing I want to do is cant do on the default jquery dialog box. I think I ve to make a custom dialog box to do that. btw thanks sir for asking again. – Adam Aug 29 '18 at 07:06

score 2 · Answer 2 · 2018-08-27T15:44:46.140

Apart from @Leo's answer, which is correct (you have to escape single quote characters inside single quote), you should add your script tag inside the html, preferably before the end of the body tag:

<html>
<head></head>
<body>
<!-- all your bodycontent goes here --> 
<!-- your script goes here: --> <script>...</script>
</body>
</html>

Should you need to learn more about this, you may check: Where should I put <script> tags in HTML markup?

As for the string escaping, for the way that JavaScript interpreter reads the code, when you use a quote to begin a string, it will understand that when you use that quote again, the string has ended. If not, how would it be able to tell from when you want to actually use the quote character or when you want to end the string? So to solve that problem, you have to use a backslash to add special characters to a string.

To learn more about string escaping please check this SO answer: What does it mean to escape a string?

Also please do check the browser's console when debugging, because the string escape error is a basic syntax error that you would have noticed if you looked with a bit of care at your code and console log.

I mentioned you in the answer, thank you for continuing the correction ;) — Leo, Aug 27 '18 at 15:41

Josh Adams · Answer 3 · 2018-08-27T17:41:04.260

You need to escape the ' , otherwise it thinks you are ending right before X. You could also use " " instead.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">Open Dialog</button>

<div id="new_dialog_area"></div>
</body>
</html>


<script>

$(function() {

  function makedialog(){
     var htmlData = '<div id="dialog" title="Basic dialog">';
       htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the \'x\' icon.</p>';
       htmlData += '</div>';
       $('#new_dialog_area').html(htmlData);
  }

//  $('#opener').on('click', function(){
  $(document).on('click', '#opener', function(){
    makedialog();
   $("#dialog").dialog({
    autoOpen:false,
   });
   $("#dialog").dialog("open");
 });

});
</script>

Jquery dialog box wont open?

3 Answers3