3

I am developing a mobile solution with a combination of jQuery.mobile and asp.net webforms.

For postbacks of my asp.net controls to work properly I have to disable ajax at the top of the page, like this:

   <script>
      $.mobile.ajaxEnabled = false;
   </script>

But when ajax is disabled like this, other functions doesn't seem to work. I can't call dialogs/popups from jQuery document ready

For example:

  $(document).ready(function () {        
     $('#myPopup').popup('open'); 
  });

This will just cause the popup to show in less than a second, then it dissapears. Also when I register a clientscript from codebehind to trigger the popup when a serverside button is clicked, the popup just flashes, then dissapears. But when I disable ajax at the top of the page, the popup calls works fine.

Any ideas how to get around these issues?

micknt
  • 297
  • 1
  • 8
  • 23

2 Answers2

0

Document ready can not be successfully used with jQuery Mobile. It will usually trigger before page DOM is populated.

Instead of this line:

$(document).ready(function () {        
    $('#myPopup').popup('open'); 
});

Use this line:

$(document).on('pagebeforeshow', '#page-id', function(){       
    $('#myPopup').popup('open'); 
});

Where #page-id is an id of page that contains that popup.

jQuery Mobile has a problem with document ready so its developers have created page evenets to remedy this problem, read more about it in this ARTICLE or find it HERE.

EDIT :

I think your problem is also in $.mobile.ajaxEnabled = false; handling.

That code sample MUST be triggered from mobileinit event like this:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

One more thing, mobileinit event MUST be triggered before jQuery Mobile is initialized, like this:

<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
<script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });    
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Hi - thanks for your reply. I tried to change to 'pagebeforeshow' but it still only works if I set $.mobile.ajaxEnabled = true; – micknt Mar 14 '13 at 11:56
  • Lets to it step by step. Did you disabled ajax inside a mobileinit event? Ajax can not be disabled like this: – Gajotres Mar 14 '13 at 12:01
  • Hi, I'm getting closer, but not there yet. It is a kind of strange workflow in JQM. I now have: $(document).on('pageinit', function () { $.mobile.ajaxEnabled = false; }); And then a button event in my codebehind with: Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "popup", "$(document).on('pagebeforeshow', '#mobile_page', function () { $('#alert').popup('open'); });", True) Response.Write("test") The problem is that any code after the call of the popup is not executed. So in this case Response.Write("test") is not executed. – micknt Mar 14 '13 at 13:30
  • That is it. $.mobile.ajaxEnabled = false; must be initialized in mobileinit event, otherwise it wont work correctly. I will put an example in my answer. Try it now. – Gajotres Mar 14 '13 at 13:36
  • 1
    Hi again, now it finally seems to work. But I have to initialize then mobileinit codeblock with ajax disabling event BEFORE referencing the standard jQuery .js file before it will work. Hmm.. I think I have to stydy your link about the JQM page life cyclus to understand... – micknt Mar 14 '13 at 14:24
0

I DID IT.....

DO NOT USE instructions described here

simply open jquery.mobile-1.3.1.min.js file fine ajaxEnabled:!0 and change it to : ajaxEnabled:!1

now hit CTRL+F5 and joy the project while it continues ! ;)

Jalil Abdollahi
  • 1
  • 1