CODEWITHSUNDEEP
jquery-pluginsjquery-mobile
Joe Lones
Joe Lones

Reputation: 499

jQueryMobile - SimpleDialog fullHTML rel='close' moves back many times

I am really struggling with the following issue.

I am using jQueryMobile - SimpleDialog plugin found here:

I figured to create a global utility function such that I may call as often as I need like so:

function popAlert(title, msg) {
    $(this).simpledialog({
       'mode' : 'blank',
       'prompt' : title,
       'cleanOnClose' : true,
       'useModal':true,
       'fullHTML': msg + '<a rel="close" data-role="button" data-theme="c">Ok</a>'
        })
     $(this).simpledialog('refresh');
}

I just want when the user hits Ok the dialog page disappers and returns to the previous page , ie like the 'X' button functionality of the dialog box.

However, every time the dialog gets invoked, it adds a back move to the stack. That is, if it has been invoked twice, when the user hits Ok, the mobile app will move to the previous page and the one before it...two moves back.

Any suggestions?

Thanks.

Upvotes: 1

Views: 1614

Answers (3)

Marko Rakic
Marko Rakic

Reputation: 76

I think I find where is a problem in rel close.

in file jquery.mobile.simpledialog.js (line 129)

if ( o.mode === 'blank' ) {
    self.pickerContent.delegate('[rel="close"]', o.clickEvent, function() {
       self.close();
           alert('1');
    });
}

if you put alert and try it in mobile browser (android 2.3.3) on first open and close you wil get one alert, on secound open and close you will get a two alerts and so on...

Seams that is all time binding events and never unbinding (Im using transition not load of page probably on load will not happen)

Im not familiar with delegates and I rewrote this code with bind and unbind jquery functions

if ( o.mode === 'blank' ) {
      self.pickerContent.find('[rel="close"]').bind('click',function() {
         self.close();
         self.pickerContent.find('[rel="close"]').unbind();
      });   
      /*
      self.pickerContent.delegate('[rel="close"]', o.clickEvent, function() {
         self.close();
      });*/
}

I tested on mobile browser and now is working.

probably self.pickerContent.undelegate('[rel="close"]'); will fix the original code.

What I find more is different behaviour and becouse of that diferent behaviour in close

Different behaviour in localy and on mobile browser, I used useDialog is false and when I put it in mobile browser I get dialog. this is becouse of

line 141 - jquery.mobile.simpledialog.js

if ( ( docWinWidth > 400 && !o.useDialogForceTrue ) || o.useDialogForceFalse || o.fullScreen ) {

if you put just useDialog is true does not work if with is greater 400px then you should put useDialogForceTrue = true and you will get dialog in all browser. Little bit confusing becouse there are 5 variables that affect show dialog mode (docWinWidth, useDialogForceTrue , useDialogForceFalse,fullScreen and useDialog). This means if you use useDialog : false in mobile browser will always show dialog becouse ( docWinWidth > 400 && !o.useDialogForceTrue ).

Then I told ok figured out but now I want to reload different content in this dialog and then I will close it and reopen with different content activedialog.simpledialog('close');

line 213 - jquery.mobile.simpledialog.js

if ( self.options.cleanOnClose === true && self.options.useDialog === false ) {
    self.clean();
}

but then hmmm ... if is dialog you can not use property 'cleanOnClose' you can not clean a content of dialog

what I did is simply remove a check for is dialog

if ( self.options.cleanOnClose === true) {

and now Im reusing a dialog for showing a different content

Suggest to use simpledialog2 lot of issues is solved in this version!

Upvotes: 0

Marko Rakic
Marko Rakic

Reputation: 76

the tprivious answer was not working on phone. I tryed another thing but is working just if you have modal window and if you dont have fixed footer menu (becouse menu ins not any more fixed on android 2.3).

$('.ui-simpledialog-screen').click();

just clicking out side a window.

Upvotes: 0

Marko Rakic
Marko Rakic

Reputation: 21

I had a same problem. The fix - instead of using rel='close' I used 

onclick="$('#simpledialog').simpledialog('close');"

Upvotes: 2

Related Questions