Tuesday, August 11, 2009

JQuery dialog open only first time problem, solution

This is a big problem to me for long time in JQuery. I downloaded the Jquery UI min file and started using in my projects. On the way, there are some requirements where I need to show the dialog box and execute some logic. But, whenever I click some button to open a dialog, very first time only it opens like a charm. From the time when I close it, it will never open again by clicking on open dialog link. This gave me lot of frustration and I don’t know where the exact problem is. After reading all the documentation in JQuery docs, finally found the problem and fixed it in seconds.

Solution:

$("#dialog").dialog({ modal: true, resizable: false,
draggable: false, width: 515, height: 245 });

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

I know everyone is declaring only the first statement in their code and no one will write the second statement to open the dialog. Below is the explanation for it.

As far as I understood, what JQuery framework doing internally is, When we write the first statement, it is treating it as the initiation of the dialog for the div or HTML control. Because of adding "model:true", it will open for the first time, when you click on a link and never open again once you closed. Because no where we mentioned to open the dialog in the first statement.

And about second statement, JQuery is calling the dialog property and forcibly loading the dialog to the DOM and shows it on the screen. So, open property/attribute will do the trick. So, whenever you want to use a dialog box in JQuery, this is the code you need to use to open it as many times as you want.

Is this what you are looking for? Or do you know any other ways to implement it? Please post all your ideas here.

10 comments:

  1. want link exchange.

    www.tech-crat.blogspot.com


    with the title "Tech-world"

    ReplyDelete
  2. Really good post. Saved me lot of time. Your posts are nice. Keep posting.

    ReplyDelete
  3. Thanks for the post is very helpful.

    Can you also suggest how to do this from the code behind.If certain condition fails which will be similar to ajax modal extender,where we can fire server side events as well

    Thanks

    ReplyDelete
  4. Anushka,
    Thanks for the comment. And little bit confused about what you are asking. Can you please explain me what you need here?

    -Praveen.

    ReplyDelete
  5. Hi Praveen,

    I am trying to show and hide the modal dialog from the code behind on a button click and also raise the post backs from the buttons which are inside the modal dialog displayed from the code behind.

    I have tried snippet from the post
    with the following
    Page.ClientScript.RegisterClientScriptBlock

    But seems that doesnt work

    Thanks

    ReplyDelete
  6. Hi Anushka,
    I got it now and below are the solutions you can try.
    1. To write script to DOM from server-side then you can do this.
    ClientScript.RegisterStartupScript(this.GetType(), "TestingScript", "Some script goes here");
    2. To call server side event from JQuery, then read this article.

    http://praveenbattula.blogspot.com/2009/08/call-aspnet-server-side-event-in-jquery.html

    Hope that will fix your problems. Let me know if you have any issues...

    ReplyDelete
  7. Thanks man, appreciate it. This is sure a helpful post. My dialog is up and running in no time.

    ReplyDelete
  8. Hi, I'm having the dialog open upon load of the page.. and I'm trying to show the dialog only once. Is there a way to make so when a visitor that has already seen the dialog will not see it again ( unless some exceptions have taken place )

    ReplyDelete
  9. button onClientClick="return false;"

    ReplyDelete