CODEWITHSUNDEEP
jqueryhtmljquery-mobile
user3206729
user3206729

Reputation: 163

Using regular jquery syntax within jquerymobile code?

I have a problem with this line - $('#container1').html(html); if i use alert(html); it shows the html fine but the problem is putting the html into container1 div. how is this possible? i am new to jquerymobile so i'm not sure if i am doing something wrong, is it not possible to use regular jquery syntax anymore?

jquery

$(function () {
    $.event.special.swipe.scrollSupressionThreshold = 10; // More than this horizontal displacement, and we will suppress scrolling.
    $.event.special.swipe.horizontalDistanceThreshold = 30; // Swipe horizontal displacement must be more than this.
    $.event.special.swipe.durationThreshold = 500; // More time than this, and it isn't a swipe.
    $.event.special.swipe.verticalDistanceThreshold = 75; // Swipe vertical displacement must be less than this.

    $(document).on("swipeleft", function () {
        alert('test');
        $.get('notifications.php').success(function (html) {
            $('#container1').html(html);
        });
    });
});

html

<div data-role="page" id="page" data-theme="a">

<div data-role="header">

<a href="#left-panel" class="jqm-navmenu-link  ui-nodisc-icon ui-alt-icon ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext" data-role="button" role="button" data-theme="c">Menu</a>

<h1>Edit Contact</h1>

<a href="#right-panel" class="ui-btn ui-icon-user jqm-navmenu-link   ui-alt-icon ui-btn-right  ui-btn-icon-notext ui-nodisc-icon" data-role="button" role="button" data-theme="c">Menu</a>

<div data-role="navbar" class="nav-glyphish-example" >
    <ul>
        <li><a href="#" id="notif" data-icon="custom" ></a></li>
        <li><a href="#" id="email" data-icon="custom"></a></li>
        <li><a href="#" id="freq" data-icon="custom"></a></li>
    </ul>
</div>

</div>



<div data-role="content">

        <!--
        Place the Container here because
        jQuery Mobile data-role="page" defines a browser fullscreen page 
        (the dataroles are rules for formating a page and there can be only one visible page)
        -->
        <div  id="container1"></div>
    </div>  


<div data-role="panel" data-position-fixed="true" data-position="left" data-display="push" data-theme="b" id="left-panel">

</div>

<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b">

    <p>Right push panel.</p>
    <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>

</div><!-- /panel -->


</div><!-- /page -->

Upvotes: 0

Views: 122

Answers (1)

Omar
Omar

Reputation: 31732

First off, modifying Global Settings should be done during mobileinit event. This event fires after loading jQuery JS libraries, hence, you need to do any changes before loading jQuery Mobile Library.

<script src="jquery.js></script>
<script>
  $(document).on("mobileinit", function () {
      $.extend($.event.special.swipe, {
          scrollSupressionThreshold: 10,
          horizontalDistanceThreshold: 30,
          durationThreshold: 500,
          verticalDistanceThreshold: 75
      });
  });
</script>
<script src="jquery-mobile.js></script>

For loading contents from an external file, use $.get with html option and then initialize elements by calling .enhanceWithin().

Don't forget to wrap your code in pagecreate, it is equivalent to .ready().

$(document).on("pagecreate", "#pageID", function () {
    $(document).on("swipeleft", function () {
        $.get("URL", function (data) {
            $("#container1").html(data).enhanceWithin();
        }, "html");
    });
});

Demo

Upvotes: 1

Related Questions