CODEWITHSUNDEEP
jquery-mobile
user2889058
user2889058

Reputation: 135

jquery mobile cannot change another the page with data

Index.html

<div data-role="page" id="reviewsPage">
    <div data-role="header">
        <h1>Reviews</h1>
        <a href="#" id="mybtn" class="ui-btn-right">TWEET</a>
    </div>

    <script type="text/javascript">
    $(document).on("pageshow", "#reviewsPage", function(event) {
        $("#mybtn").bind("click", function(e) {
            $.mobile.showPageLoadingMsg();
            $.mobile.changePage("my.html", {
                reloadPage: true, changeHash: true
            });
        });
    });
    </script>
</div>

my.html

<script type="text/javascript">
$(document).bind('pagebeforechange', function(event, data) {
    $.ajax({
        url: " searchresult.php",
        success: function(data) {
            alert(data);
            var markup = "";
            $.each(data, function(i, elem) {
                var $template = $('<div><li><img class="ui-li-icon     profile"><p class="from"></p><p class="tweet"></p></li></div>');
                $template.find(".from").append(elem['a']);
                markup += $template.html();
            });
            $("#tweet-list").append(markup).listview("refresh", true);

            $.mobile.changePage($("#twitterPage"));
        },
        error: function(request, error) { 
            alert(error);
        }
    });
});
</script>
<div data-role="page" id="twitterPage">
    <div data-role="content">
        <ul id="tweet-list" data-role="listview" data-inset="true">
            <li data-role="list-divider">
                <p>Tweetsdd</p>
            </li>
        </ul>
    </div>
</div>

Above code is used to change the page with dynamic data. If i click the link the my.html will not be populated with data. But if i run the my.html file directly it works. If i write two pages inside the same page it works. But i need to run this in separate pages. I have been searching answer for this question since yesterday. I am new to jquery.

Upvotes: 0

Views: 613

Answers (1)

Ben10
Ben10

Reputation: 3259

Try this

Index.html

<!DOCTYPE HTML>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script language="text/javascript">
  /* VERY IMPORTANT this is before loading jquery.mobile JS */
  $( document ).on( "mobileinit", function() {
   // Make your jQuery Mobile framework configuration changes here!
        $.mobile.allowCrossDomainPages = true;
        $.mobile.ajaxEnabled = false;
        });

     </script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">      </script>
  <script type="text/javascript">
    $(document).on("pagebeforeshow", function(event) {
        $("#mybtn").bind("click", function(e) {
          $.mobile.showPageLoadingMsg();
           $.mobile.changePage("my.html", {
             reloadPage : false,changeHash : true
        });

    });
});

   </script>
 </head>

<body>
<div data-role="page" id="reviewsPage">

  <div data-role="header">
      <h1>Reviews</h1>
       <a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>

</div>

my.html

   <div data-role="page" id="twitterPage">
     <script type="text/javascript">
         $(document).bind('pageshow', function(event, data){
   alert("shdgs");
     $.ajax({
      url : " searchresult.php",


       success : function(data) {
        alert(data);
        var markup = "";
        $.each(data, function(i, elem) {
            var $template = $('<div><li><img class="ui-li-icon     profile"><p class="from"></p><p class="tweet"></p></li></div>');
            $template.find(".from").append(elem['a']);
            //$template.find(".tweet").append(result.text);
            //$template.find(".profile").attr("src", result.profile_image_url);
            markup += $template.html();

        });
        $("#tweet-list").append(markup).listview("refresh", true);
        // Transition to the Twitter results page.
         $.mobile.changePage($("#twitterPage"));
    },

    error : function(request, error) {
        // This callback function will trigger on unsuccessful action
        alert(error);
    }
   });
  }); 
 </script>
        <div data-role="content">
          <ul id="tweet-list" data-role="listview" data-inset="true">
        <li data-role="list-divider">
        <p>
            Tweetsdd
        </p>
    </li>
</ul>
 </div>
</div>

Upvotes: 2

Related Questions