Rectangle 27 0

data-role="dialog"
<div data-role="dialog" id="page30">
    ...
</div>

Then use this in your javascript.

$(document).on('change', '#radio11', function() {
    $.mobile.changePage('page30.html');
});

it wants to work, I get the jqm message Error Loading Page.

ok so does page30.hmtl exist in that same directory? Also what version of JQM are you using.

i'm using jqm 1.1.0 and yes page page30.html is in the same folder

found the solution. your example is correct but jqm doesn't like file:// I had to put the files on my server and it worked. do I change all id's to "radio11" if I want the dialog box to show? will i have a conflict?

So you always want page30 to show no matter what radio? You can only have one id. Add a class instead perhaps or just use the input[type=radio] selector.

jQuery Mobile onSelect ... load dialog when radio button is selected -...

jquery jquery-mobile
Rectangle 27 0

Somehow showing the loading dialog is interfering with the click event. If you delay the ajax call with setTimeout, it works.

javascript - UPDATED: jquery dialog modal radio button not selected aj...

javascript ajax jquery jquery-dialog
Rectangle 27 0

It seems the problem comes from the modal: true option of the #ajax-dialog dialog. If you set the option to false, it works as expected. Upgrading to the latest version of jquery and jquery ui did not seem to resolve the problem.

You can use the plugin BlockUI which allows blocking the full page or an specific element. it works by showing a overlay div (over the page or the element) forbidding any interaction with the underlying content. You can display a message and customize the look&feel.

Blocking a dialog content (with the radio boxes):

Note the option baseZ in this case, this is the z-index of the overlay, which has a default value of 1000. Set it to something higher than the dialog to cover it.

javascript - radio button not selected on jquery dialog box in ajax ca...

javascript jquery ajax jquery-ui jquery-dialog
Rectangle 27 0

You were close, how about using $.inArray to toggle the button? Also, you need to use $(this).val() or this.value to figure out the value of an input element.

$("#dialog").dialog({
    autoOpen: false,
    buttons: {
        Select: function() {
            // Carry out some proceedure knowing they've selected a valid label.
        },
        Cancel: function() {
            // Cancels the selection and closes the dialog box.
        }
    },
    closeOnEscape: false,
    create: function(event, ui) {
        var labels = ["Bird", "Boar", "Dog", "Dragon", "Ox", "Tiger"];
        $("#input").autocomplete({
            delay: 0,
            source: labels
        });
        $("#input").change(function() {
            var enabled = $.inArray(this.value, labels) >= 0 ? "enable" : "disable";
            $(".ui-dialog-buttonpane button:contains('Select')").button(enabled);
        });
    },
    draggable: false,
    modal: true,
    resizable: false,
    title: "Select Dialog",
    width: 460
});

Per the comment, here's an example with keyup instead of change:

$("#dialog").dialog({
    open: function () {
        $(".ui-dialog-buttonpane button:contains('Select')").button("disable");
    },
    buttons: {
        Select: function() {
            // Carry out some proceedure knowing they've selected a valid label.
        },
        Cancel: function() {
            // Cancels the selection and closes the dialog box.
        }
    },
    closeOnEscape: false,
    create: function(event, ui) {
        var labels = ["Bird", "Boar", "Dog", "Dragon", "Ox", "Tiger"];
        $("#input").autocomplete({
            delay: 0,
            source: labels,
            select: function () {
                $(".ui-dialog-buttonpane button:contains('Select')").button("enable");       
            }
        });

        $("#input").keyup(function() {
            var enabled = $.inArray(this.value, labels) >= 0 ? "enable" : "disable";
            $(".ui-dialog-buttonpane button:contains('Select')").button(enabled);
        });
    },
    draggable: false,
    modal: true,
    resizable: false,
    title: "Select Dialog",
    width: 460
});

Ah, I see. The one issue I have is that it only triggers the change when you either select one of the labels from the autocomplete (which is perfect) or when the user presses enter after typing. Is there anyway to have it check whenever a key is added or removed? Like rather than using the change event, using the keypress or keyup event?

@KrisSchouw: Sure thing, see the updated answer.

Ah, ok, thanks. I originally missed disabling the button on the open event, which was throwing me off. The second fiddle you posted does just about what I'm looking for. Unfortunately, the user still has to hit a key after they've clicked on one of the autocomplete labels in order to trigger the check. Could this be combined with the select event the Autocomplete comes compatible with, too?

I managed to make $(".ui-autocomplete").click() trigger the same check, and it works like a charm. Thank you.

@KrisSchouw: Good point. I updated the second example. I would actually use the select event instead of binding to click.

Enable jQuery UI Dialog Button when a Valid Label from a jQuery UI Aut...

jquery jquery-ui jquery-ui-dialog jquery-ui-autocomplete
Rectangle 27 0

My assumption is that when you specify the 'modal' type for the jQuery UI dialog, it automatically focuses the first button. Also, the reason it isn't styled properly is because you did not add the css in your fiddle.

jQuery Modal Dialog opens with button selected - Stack Overflow

jquery button jquery-ui-dialog
Rectangle 27 0

$('input:radio').change(function(){
   if($(this).val() == 'radio1') {
        $('#somewhere').load('path/to/page30.html')
   }
})

was looking around, wouldn't it be best to detected if radio becomes "checked" to determine when the new page loads?

it detects the value of input, it's better to use a checkbox.

jQuery Mobile onSelect ... load dialog when radio button is selected -...

jquery jquery-mobile
Rectangle 27 0

You have to listen for the change event:

$('#my-select-id').change(function(e){
    if(e.target.value === 'special') {
        displayDialog();
    }
});

how about if you select a certain radio button?

i imagined this would only be for a dropdown box! thanks :)

Django Jquery Dialog box when specific radio button selected - Stack O...

jquery django jquery-ui django-templates django-views