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>
3 answers
solution1
3 ACCPTED 2018-08-27 15:32:06
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
Ps continue reading @JC Rocamonde's answer : answer
solution2
2 2018-08-27 15:35:36
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.
solution3
0 2018-08-27 15:33:50
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.