jQuery UI dialog onClick event

Question

i'm trying to open a dialog box with an onclick command, but i'm having no luck whatsoever. I've tried everything and I just can get it to work.

Here the dialog jQuery:

<script type="text/javascript">
        $(function runDialog(){
            $('#testimonialOpen').dialog({
                autoOpen:false
                });
            })
    </script>

There is a div id'd testimonialOpen so I know it's selecting the element, and the dialog box works when the autoOpen is removed, however, when I try and call the function like this:

<p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p>

It just does nothing. I tried to use the 'open' command in the jQuery but it still does nothing, any ideas?

Answer 1

Firstly your document.ready handler isn't quite using the right syntax - you're currently placing a function declaration within a jQuery object.

Secondly if you're using jQuery you should use it to attach your events, rather than the outdated onclick attributes. The latter should be avoided where possible in preference of unobtrusive event handlers. In jQuery this would be done by using on(), and in native JS it would be addEventListener().

Try this:

<p class="topper">
  Top words
  <a href="#">
    <img id="readMore" style="display: inline; padding-left: 40px;" src="../images/content/readMore.png"/>
  </a>
</p>

$(function() {
  $('#testimonialOpen').dialog({
    autoOpen: false
  });

  $(".topper a").on('click', function(e) {
    e.preventDefault();
    $('#testimonialOpen').dialog('open');
  });
});

Answer 2

Try this code

 $(function() {
  $("#ok_link").click(function(e) {
        e.preventDefault();
        $('#dialog-confirm').dialog('open');
    });

  $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:160,
      modal: true,
      minWidth: 400,
      autoOpen:false,
      buttons: {
        "OK": function() {
          location.href="index.html";
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<a href="index.html" id="ok_link">OK</a>

<div id="dialog-confirm" title="Are you sure to go home?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You are about to redirect to home page. Are you sure?</p>
</div>