Rectangle 27 8

I got this working with the method .dialog("widget") which returns the dialog DIV itself. If you're in the dialog methods:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);

How can I disable a button in a jQuery dialog from a function? - Stack...

jquery jquery-ui
Rectangle 27 1

The reason it isn't working is because the ID of the button changes when it's rendered to the page. To access the control in JavaScript, you need to use the ClientID property:

$("#<%= btnCancel.ClientID %>").click(function(e){
    //open the dialog
});

I tried many variations on this and couldn't ever get it to work. I must have something else wrong. I'm going to put an alert in there as matpol suggested to see if my javascript is even running.

javascript - jQuery UI modal confirmation dialog with ASP.NET not firi...

javascript jquery asp.net jquery-ui jquery-ui-dialog
Rectangle 27 58

I found the answer by Paul didn't quite work as the way he was setting the options AFTER the dialog was instantiated on the click event were incorrect. Here is my code which was working. I've not tailored it to match Paul's example but it's only a cat's whisker's difference in terms of some elements are named differently. You should be able to work it out. The correction is in the setter of the dialog option for the buttons on the click event.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

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

    });

});

Hope this helps someone else as this post originally got me down the right track I thought I'd better post the correction.

I'm not seeing what you did that was different than Paul's answer.

Looks good to me. The only thing I would sugest would be to use on instead of click, as this will continue to work if (for example) the field is redrawn using jQuery - api.jquery.com/on

hah "cat's whisker's difference" -- I need to use that phrase more.

How to implement "confirmation" dialog in Jquery UI dialog? - Stack Ov...

jquery jquery-ui dialog modal-dialog
Rectangle 27 58

I found the answer by Paul didn't quite work as the way he was setting the options AFTER the dialog was instantiated on the click event were incorrect. Here is my code which was working. I've not tailored it to match Paul's example but it's only a cat's whisker's difference in terms of some elements are named differently. You should be able to work it out. The correction is in the setter of the dialog option for the buttons on the click event.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

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

    });

});

Hope this helps someone else as this post originally got me down the right track I thought I'd better post the correction.

I'm not seeing what you did that was different than Paul's answer.

Looks good to me. The only thing I would sugest would be to use on instead of click, as this will continue to work if (for example) the field is redrawn using jQuery - api.jquery.com/on

hah "cat's whisker's difference" -- I need to use that phrase more.

How to implement "confirmation" dialog in Jquery UI dialog? - Stack Ov...

jquery jquery-ui dialog modal-dialog
Rectangle 27 1

Add CompletionListCssClass property to the AutoCompleteExtender with the following style:

.AutoCompleteExtenderList
{
    z-index: n !important;
}

Where n is dialog's z-index + 3 (4002 by default)

javascript - Asp.net ajax autocomplete inside jquery ui dialog not wor...

javascript asp.net ajax asp.net-ajax
Rectangle 27 6

I tried the accepted answer and it appeared to work in some situations, but not others. Using the same idea, this is the code I came up with this code...

.ui-dialog {
    z-index: 9999 !important;
}

...which is based on the fact that the z-index of .ui-widget-overlay is 9998.

Additionally, to fix the problem where the overlay does not cover the full height of your page (as .ui-widget-overlay only has a height of 1000%), I came up with this:

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Dialog was hidden behind overlay when Modal: true on Jquery Dialog in ...

jquery asp.net jquery-ui modal-dialog jquery-ui-dialog
Rectangle 27 1

Pretty simple, the $(document).ready(function () { }); event is only fired when the page is loaded and everything is ready. But when you page the grid, all the buttons are reloaded by ajax and non of them has the click event attached.

1fst Solution: Look in the documentation for the paging event of your grid (usually every grid has such an event), attach the click event to your actionlinks everytime the grid has changed the page.

2nd Solution: Apply an onclick attribute to your actionlinks on the server, this onclick can lead to your InitializeDialog function.

(Edit) Addition: You could try not to use a javascript event handler, but the built in Ajax Actionlink. This will keep your page clean and you don't have to deal with javascript event handling.

Had a bad case of tunnel-vision with the $(document).ready - thanks for that. I used your Edit approach and made Ajax.ActionLink -- will post an edit with the final solution in my question.

asp.net mvc 4 - MVC4 Ajax enabled WebGrid Jquery dialog not working wh...

asp.net-mvc-4 jquery-ui model-view-controller
Rectangle 27 6

The submit button in your dialog is not working because you've got nested forms - form2 is inside form1, which is not valid.

Move the dialog (<div id="dialog" and everything inside it) outside of form1 and the submit button will cause a postback as expected.

P.S. Despite the title of the question, the root cause of this issue is nothing to do with jQuery, or even Javascript. It's simply malformed HTML.

Thanks a lot. It worked. Also, how can I submit the data into the form1?

if you have done what I suggest, then you haven't got any data in form1 to submit. All the form fields are within your dialog, and enclosed within form2

Yes I did it, and worked perfectly. But now, The data that I will put into the form 2(into the dialog), I need them to be showed into the form1. Can I do it in anyway without using db?

yes you can use javascript/jQuery to just copy the contents of each form element into an element somewhere else on the page. You don't have to save it to the db at at all, unless you want the data to persist beyond the life of the page. BTW, you don't need a <form> if all you want to do is display data (e.g. form1 in your case) - forms in HTML are for data entry, not display.

jquery - submit button doesn't work with html code - Stack Overflow

jquery html
Rectangle 27 6

The submit button in your dialog is not working because you've got nested forms - form2 is inside form1, which is not valid.

Move the dialog (<div id="dialog" and everything inside it) outside of form1 and the submit button will cause a postback as expected.

P.S. Despite the title of the question, the root cause of this issue is nothing to do with jQuery, or even Javascript. It's simply malformed HTML.

Thanks a lot. It worked. Also, how can I submit the data into the form1?

if you have done what I suggest, then you haven't got any data in form1 to submit. All the form fields are within your dialog, and enclosed within form2

Yes I did it, and worked perfectly. But now, The data that I will put into the form 2(into the dialog), I need them to be showed into the form1. Can I do it in anyway without using db?

yes you can use javascript/jQuery to just copy the contents of each form element into an element somewhere else on the page. You don't have to save it to the db at at all, unless you want the data to persist beyond the life of the page. BTW, you don't need a <form> if all you want to do is display data (e.g. form1 in your case) - forms in HTML are for data entry, not display.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

jquery - submit button doesn't work with html code - Stack Overflow

jquery html
Rectangle 27 5

Primefaces already has a jQuery, so it's very recommended to not to use another jQuery lib while working with Primefaces.

Try to remove you external jQuery lib and call the dialog by the command PF('dlg').show();

jsf - Primefaces 5.0 dialog widgetvar - Stack Overflow

jsf primefaces dialog
Rectangle 27 7

I agree with the previous posters in that if the dialog is not working for you, it may be good to rethink your design. However, I can offer a suggestion.

Could you put the dialog content inside a scrollable div? That way instead of the whole page needing to scroll, just the content inside the div would need to scroll. This workaround should be pretty easy to accomplish too.

I used a scrollable div in one of my recent projects. It appears to work fine for all but Safari on OS X Lion (works fine with Safari on Windows 7 and OS X Snow Leopard, though). For Lion, the scrolling works, but the scroll bar isn't visible. I ended up here looking for a solution to that issue.

Scrollbar problem with jQuery UI dialog in Chrome and Safari - Stack O...

jquery jquery-ui safari google-chrome
Rectangle 27 3

Need to delegate the function to a static element....paginated elements are created after the DOM, so they'll have no events bound to them.

.on()
$(document).on('click', '.delete-recip', function(){ 
   // copy function code here
 });

Much appreciated, been trying to fix that for a while.

jQuery UI dialog not working on 2nd page of tablesorter pager - Stack ...

jquery jquery-ui pagination jquery-ui-dialog tablesorter
Rectangle 27 6

However the example provided in the post wasn't quite working simply because the instantiation of the dialog was incorrect on the click handler. There is a different way of setting properties/options on the dialog once a dialog has already been instantiated. So my final code was:

$(document).ready(function(){

$("#dialog").dialog({
  modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
  autoOpen: false
  });


$(".lb").click(function(e) {
    e.preventDefault();
    var theHREF = $(this).attr("href");


    $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
                },
            "Cancel" : function() {
                $(this).dialog("close");
                }
            });

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

});

});

Hope this helps someone else. Gurdas, thanks for your help, it definately got the gears turning. :)

jQuery UI confirmation dialog and asp.net postback - Stack Overflow

asp.net jquery jquery-ui jquery-ui-dialog
Rectangle 27 6

However the example provided in the post wasn't quite working simply because the instantiation of the dialog was incorrect on the click handler. There is a different way of setting properties/options on the dialog once a dialog has already been instantiated. So my final code was:

$(document).ready(function(){

$("#dialog").dialog({
  modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
  autoOpen: false
  });


$(".lb").click(function(e) {
    e.preventDefault();
    var theHREF = $(this).attr("href");


    $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
                },
            "Cancel" : function() {
                $(this).dialog("close");
                }
            });

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

});

});

Hope this helps someone else. Gurdas, thanks for your help, it definately got the gears turning. :)

jQuery UI confirmation dialog and asp.net postback - Stack Overflow

asp.net jquery jquery-ui jquery-ui-dialog
Rectangle 27 1

All I need was z-index:1 applied to ui-dialog. There was no z-index I could apply to ui-widget-overlay to make this work.

I'm doing this in Wordpress including the 'jquery', 'jquery-ui-core', 'jquery-ui-dialog' scripts. Here's my relevant css:

.ui-widget-overlay {    
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%;
    height:100%;
    background: #aaaaaa;
    opacity: 0.3;  
}    

.ui-dialog {    
    background-color: #FFFFFF;    
    overflow: hidden;   
    z-index:1;
}

Dialog was hidden behind overlay when Modal: true on Jquery Dialog in ...

jquery asp.net jquery-ui modal-dialog jquery-ui-dialog
Rectangle 27 1

When jQuery silently fails, it usually means that you have an empty selection. So the first thing to test is that the selector $("#editfrm > input[id='FirstName']") really does produce the fields you think it does. Pull up firebug and type that selector into the console. If it works, it will produce an array with the input element you want. If not, it'll produce an empty list.

jQuery val(val) is not working in modal dialog (jQuery ui) - Stack Ove...

jquery jquery-ui modal-dialog
Rectangle 27 1

You have not shown any of the rendered code that toggles your modal.

However, the following should help you come to the solution.

The .validate() method is how the plugin is initialized on the form. Normally, .validate() is called within DOM ready, which is the same point when a static form's HTML has been constructed and is already in the DOM.

In your case, I presume that since your form is within a modal, it does not yet exist in the DOM. The solution is to follow this logical order....

Hi Sparky, I didn't show the codes toggling my modal because I am using FlatUI framework( built on top of bootstrap with some extra features). So i am creating dialog box with FlatUI classes and data-targets. Doing it pure jquery way (ex: jsfiddle.net/bipen/ZrfhU), it works. So, I am assuming it has to be issue with flatui. I have opened an issue in their github. For now, I will just make the dialog box without FlatUI.

Jquery validation not working in Bootstrap Flatui modal dialog box - S...

jquery twitter-bootstrap jquery-validate modal-dialog
Rectangle 27 1

Validator should parse partial page after loading partial page. if you are using Unobtrusive Validation:

$(this).load('@Url.Action("AddNewFormPart1")', function(response, status, xhr){
    var form = $("#AddNewFormPart1");
    form.removeData('validator');
    form.removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(form);
})

Could you please tell which version of jQuery supports .done(). I am getting JS error. I was using jquery-1.7.1.js.

Thanks that worked!! Thanks a lot!

javascript - Client Side validations not working in jQuery UI Dialog -...

javascript jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-4
Rectangle 27 3

I put this aside for most of the day and just revisited it. I got it working! Here's my code:

$("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": {
                    text: "Continue",
                    id: "btnContinue",
                    click: function (e) {
                        $("#loginForm").unbind('submit').submit(),
                        $(this).dialog("close"),
                        $("#loginForm").submit();
                        $("#btnLogin").click();
                    }
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            },
            open: function () {
                $(document).keydown(function (event) {
                    if (event.keyCode == 13) {
                        $("#btnContinue").click();
                    }
                });
            }
        })
    }

Essentially, I assigned the button in my dialog an ID value, and instead of $("#dialog-confirm").keydown I used $(document).keydown. Since the function is set only after the dialog opens, it won't necessarily affect the rest of my page. Inside of the keydown function, I have it hitting the continue button of which I call out by ID.

javascript - Confirm Jquery UI Dialog Prompt on Enter Key - Stack Over...

javascript jquery jquery-ui modal-dialog jquery-ui-dialog
Rectangle 27 2

I was experiencing this issue while working with a twitter-bootstrap modal; just like JadedCore, who answered above. I fairly certain his assumption that the datepicker being created outside of the popup (in my case, the modal) was the cause of the problem.

I've used this datepicker in several modals and wanted something to 'fix' all locations. I took JadedCore's answer and modified to be more universal for multiple modals; I also move the datepicker back to the body when a modal is closed. I foresee issues with this example if there are multiple modals being displayed simultaneously, so beware.

$(function() {
    $('.modal').on('show.bs.modal', function (e) {
        var datePicker = document.getElementById('ui-datepicker-div');
        if (datePicker) {
            e.delegateTarget.appendChild(datePicker);
        }
    });

    $('.modal').on('hide.bs.modal', function (e) {      
        var datePicker = document.getElementById('ui-datepicker-div');
        if (datePicker) {
            $("body").append(datePicker);
        }
    });
});

JQuery UI Datepicker's select Month/Year drop down doesn't work in iPa...

jquery ipad jquery-ui jquery-ui-datepicker jquery-dialog