CODEWITHSUNDEEP
javascripthtmljquery-mobiledialog
user1648449
user1648449

Reputation: 97

using ui-disabled on dialog buttons

I'm using jquery mobile and within a <form> i have 'save' and 'edit' buttons (<a> tags with data-role="button"). Once the save button is clicked, a dialog/confirmation opens. In this dialog is the usual confirm/cancel options.

What I want to happen is once the 'confirm' is clicked and using data-rel="back" to go back to the form page, i want the save button to be disabled and the edit button, that was by default disabled, to become enabled.

HTML:

<!--save button--><a class="save_button" data-role="button" href="save.html" data-rel="dialog" data-transition="pop">Save/Enter Line-Up</a>
<!--edit button--><a class="edit_button" data-role="button" href="edit.html" data-rel="dialog" data-transition="pop">Edit Line-Up</a>

(save.html):

<div data-role="content">   

    <p>Do You Want To Save?</p>

    <a class="confirm_button" href="#" data-role="button" data-rel="back">Confirm</a>
    <a class="cancel_button" href="#" data-role="button" data-rel="back">Cancel</a>

</div><!-- /content -->

JS:

$(document).ready(function() {

$('.edit_button').addClass('ui-disabled');
        /*edit button*/

    $('.confirm_button').on("click", function() {
      $('.edit_button').removeClass('ui-disabled');
      $('.save_button').addClass('ui-disabled');
    });
});

I cannot get this to work. The above JS works if I don't leave the page (i.e. if the confirm button was on the same page as the save and edit buttons). But once i open the dialog it doesn't work.

Thanks in advance for any help.

Upvotes: 1

Views: 634

Answers (2)

Gajotres
Gajotres

Reputation: 57309

You didn't mentioned one major thing. From what I have so you are using several html files. Maybe you don't know but jQuery Mobile works a little bit different then other pages. Mainly when first page is loaded its full content will be loaded into the DOM (HEAD and BODY). But only BODY will be loaded from other pages. If you think about it it is a normal situation, if there's already a HEAD inside a DOM there's no need for other pages HEAD-s to be loaded.

In your case, if your javascript is separated between your pages it will be discarded (with rest of HEAD content) if it is placed inside a HEAD. Here you can find solutions how to fix it.

In case all of your javascript is already placed inside a first HTML file then you have another problem. When binding events in jQuery Mobile it is advised to do it with delegated binding. Basically look at your code:

$('#confirmButton').on('click', function(){

});

If this event is bind before that button is loaded into the DOM then it will not work afterwards. To fix this we need to use delegated binding, in this case it doesn't matter if element exist / dont exist inside a DOM because event is bind to some perenet element or even better document:

$(document).on('click', '#confirmButton',function(){

});

One last thing. If possible don't use document ready with jQuery Mobile, sometimes it can trigger before page is loaded into the DOM. But there's a fix. jQuery Mobile developers have created page events to bridge this problem. Here you can read more about it.

There's one more thing, there are 3 type of jQuery Mobile buttons and 2 ways of disabling them (not just one), read more about it here.

Upvotes: 2

NuttySquirrel
NuttySquirrel

Reputation: 413

Well, I recreated your problem as good as I could, and I seemed to have no issues. But after a few variations, I discovered one situation where I could not disable the button either.

I did not use the class on the confirm button and then it all seemed to work. Give it an id, and I believe it should be solved.

<a class="confirm_button" id="confirmButton" href="#" data-role="button" data-rel="back">Confirm</a>

And then in ur js:

$('#confirmButton').on('click', function(){
   $('.edit_button').removeClass('ui-disabled');
   $('.save_button').addClass('ui-disabled');
});

According to my attempts, this should work now.

Upvotes: 0

Related Questions