jQuery dialog won't open at the first click

Question

I'm trying to do a dialog with jQueryUI, but actually when I'm clicking on a link to open it, it generate some divs, and if I'm clicking a second time, the dialog appears.

EDIT : The "click" is an HyperLink that call a JS method (that handle my code), generated by a webobject (Apple WebObjects)

I'd like to open the dialog at the first click.

Here are the differents codes :

HTML before first click:

<div id="theDialog">Hello</div>

HTML after the first click:

<div tabindex="-1" role="dialog" style="display: none;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="theDialog" aria-labelledby="ui-id-1">
    <div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
        <span id="ui-id-1" class="ui-dialog-title">&nbsp;</span>
        <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close">
        <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
        <span class="ui-button-icon-space"> </span>Close</button>
    </div>
    <div id="theDialog" class="ui-dialog-content ui-widget-content">Hello</div>
</div>

My script:

$("#theDialog").dialog().dialog('open');

This script gives me an error by the way (Syntax error, unrecognized expression: ,)

I've tried many possibilities before this script, like this post (Jquery dialog won't open) but actually I've always the same problem or an error in the console...

Many thanks in advance for any help

please check this link, definitely you will get your issue resolved. — Krishan Kumar
– Krishan Kumar, Commented Aug 20, 2020 at 14:25

Lars · Accepted Answer · 2020-08-20 14:30:57Z

0

$("#theDialog").dialog().dialog('open');

Shouldn't it be:

$("#theDialog").dialog('open');

I would make a function out of this:

$("#theDialog").click(function(e) {
  e.preventDefault();
  $("#theDialog").dialog(opt).dialog('open');
});

edited Aug 20, 2020 at 14:30

answered Aug 20, 2020 at 14:24

Lars

14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ferenc Over a year ago

Thanks for answering ! I tried, but I got an other error : cannot call methods on dialog prior to initialization; attempted to call method 'open'

Ferenc Over a year ago

Sorry, I edited my post, I've a hyperlink that call the script to execute it

Jakub Ujvvary · Accepted Answer · 2020-08-20 14:33:22Z

First of all You should priovide more code so we can help You. The code You provided is not reproducable example depends on what You said :"Dialog open on second click" - i don't see any click function or evethandler.

I dont know dialog('open') function but this div with You try to open is display:none So to display whole div just use jquery show().

Next thing is that You dont have any element that You can click and action to it. I renamed Your id "theDialog" to "theDialogButton". Next is to use this as a button and in jquery use click() function on this element.

$('#theDialogButton').click(()=>
  $("#dialog").show()
  );

body {
  background: white; /* try type yellow */
  color: #323232;

  margin: 0;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: Helvetica neue, roboto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header"></h1>
<div id="theDialogButton">>Click to open <</div>

<div tabindex="-1" role="dialog" id="dialog" style="display: none;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="theDialog" aria-labelledby="ui-id-1">
    <div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
        <span id="ui-id-1" class="ui-dialog-title">&nbsp;</span>
        <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close">
        <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
        <span class="ui-button-icon-space"> </span>Close</button>
    </div>
    <div id="theDialog" class="ui-dialog-content ui-widget-content">Hello</div>
</div>

You're right, I didn't give enough information... I'll edit my post, thanks for answering !

Collectives™ on Stack Overflow

jQuery dialog won't open at the first click

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related