1

Using this post I've been able to implement a dialog box that appears once the form is loaded. I would however like to change this so that the user clicks a button for the dialog to appear.

I've followed the guidance provided, and removed this line $("#divdeps").dialog('open'); from the Javascript function as instructed, and added it to the 'onclick' event of my button i.e.

<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>

so my code is now:

<div id="divdeps" style="display: none">This is my div</div>
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>
<script> 
$(document).ready(function(){
  $("#divdeps").dialog({
    autoOpen: false,
    show: 'slide',
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
  });

 // $("#divdeps").dialog('open');
});

</script>

However, I can't get this to work on the 'onclick' event of the button. I've been through the instructions quite a few times now and I'm not sure where I'm going wrong.

I just wondered whether someone could perhaps take a look at this please and let me know what I'm doing wrong.

Many thanks and regards

2
  • 1
    Your button code has mismatched quotes and is not properly closed. <button value="Upload" onclick="$('#divdeps').dialog('open');"></button>. This should work, however there are different ways to implement this as mentioned in the answers.
    – Virendra
    Dec 31, 2011 at 18:22
  • @Virendra - I hope you don't mind me adding your comment to my answer +1 to your old answer as thanks :) Dec 31, 2011 at 18:29

3 Answers 3

2

I would do it with the click function of jQuery instead of that dom level 0 handler:

$("#divdeps + button").click(function() { $("#divdeps").dialog('open'); });

Or of course you can give this button an id and do

$("#buttonID").click(function() { $("#divdeps").dialog('open'); });

Either of those sections of code would go in your document.ready handler.


Per Virendra's comment, your original button tag was wrong—you were missing a closing tag, and have mismatched quotes:

<button value="Upload" onclick="$("#divdeps").dialog('open');"</button> 

should have been

<button value="Upload" onclick="$('#divdeps').dialog('open');"> </button> 
4
  • The button isn't inside the <div>
    – Wex
    Dec 31, 2011 at 18:22
  • 1
    @Wex - I know - OP's indentation threw me off - it's fixed Dec 31, 2011 at 18:24
  • Still broken, the quotes are mismatched.
    – Virendra
    Dec 31, 2011 at 18:31
  • @Virendra - thanks. I was searching and searching for the mismatched quotes but couldn't find it. It's fixed now. Dec 31, 2011 at 18:40
1

Instead of $("#divdeps").dialog('open'); that you commented out, try:

$("button#give_it_some_id").click(function(e) {
    e.preventDefault();
    $("#divdeps").dialog('open');
})
2
  • If it's a button that isn't in a form, is e.preventDefault() absolutely necessary?
    – Wex
    Dec 31, 2011 at 18:21
  • All, many thanks for taking the time to help me out with this. I've gone for the solution provided by @Virendra. Once again thanks and kind regards
    – IRHM
    Dec 31, 2011 at 19:00
0

Use this code its working in my application.

PopUpWindow = function (titles, message, redirectURL) {
        document.getElementById('window').innerHTML = message;
        $("#window").dialog({
            resizable: true,
            height: 180,
            title: titles,
            width: 500,
            modal: false,
            open: function () {
                $('.ui-widget-overlay').show();
                $('.ui-dialog-titlebar-close.ui-corner-all').hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    if (redirectURL) {
                        window.location = redirectURL;
                    }
                }
            }
        });
    };

div tag

  <div id="window" style="display: none;width:190px"> 

Let me know if you have any problem here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.