JQuery Function code not running properly

Question

I am having problems with the code below. Basically it's 2 parts in the function...

Part 1 just clicks on a submit button and Part 2 shows a dialog.

For some reason both parts run separately work but when added together in the function no dialog appears, so when together Part 2 does not run.

Syntax issue?

Here's the code:

function myfunction() { 
    $('input[type=submit]#mysubmit').click();  

    $("#info").dialog({
    autoOpen: false,
    modal: true,
    width: 400,
    zIndex: 9999999,
    resizable: false,
    buttons: [
        {
            text: "Close",
            click: function () {
                $(this).dialog("close");
            }
        }
    ]
});    
}

Update: I've tried commenting out Part 1 and the dialog still doesn't show up so it's something to do with the Dialog code ... Part 2

See below:

function myfunction() { 
    //$('input[type=submit]#mysubmit').click();   //commented out

    $("#info").dialog({
    autoOpen: false,
    modal: true,
    width: 400,
    zIndex: 9999999,
    resizable: false,
    buttons: [
        {
            text: "Close",
            click: function () {
                $(this).dialog("close");
            }
        }
    ]
});    
}

Are you preventing the form from submitting (causing a page reload) when you click the submit button? — Michael Berkowski
– Michael Berkowski, Commented Jan 8, 2012 at 12:28
Please see update...It seems to be Part 2 .. The Dialog Part that has the problem — Satch3000
– Satch3000, Commented Jan 8, 2012 at 12:34
@Satch3000 See my attached answer / fiddle, the dialog appears: jsfiddle.net/TEN7Z/2. Have you actually included jquery-ui.js and jquery-ui.css? — Rob W
– Rob W, Commented Jan 8, 2012 at 12:42

Bart Vangeneugden · Accepted Answer · 2012-01-08 12:39:21Z

3

Try initializing and opening in 2 different places (right now, everytime you execute myfunction, the dialog gets initialized

$(document).ready(function(){
 $("#info").dialog({
    autoOpen: false,
    modal: true,
    width: 400,
    zIndex: 9999999,
    resizable: false,
    buttons: [
        {
            text: "Close",
            click: function () {
                $(this).dialog("close");
            }
        }
    ]
});    
});

function myfunction(){
    $("#info").dialog('open');
}

answered Jan 8, 2012 at 12:39

Bart Vangeneugden

3,4464 gold badges35 silver badges52 bronze badges

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

Comments

Rob W · Accepted Answer · 2012-01-08 12:37:47Z

2

Remove autoOpen: false. This option causes the dialog to be rendered invisible at initialisation.

Another option is to add .dialog("open") at the end:

$("#info").dialog(..autoOpen: false...).dialog('open');

Comparison (3x): http://jsfiddle.net/TEN7Z/2/

answered Jan 8, 2012 at 12:37

Rob W

350k87 gold badges811 silver badges683 bronze badges

Collectives™ on Stack Overflow

JQuery Function code not running properly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related