jQuery-mobile and ASP.NET combination issue

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?

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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="https://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
<script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });    
</script>
<script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Method 2

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 ! 😉

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating