0

Im beginner in AJAX & JS so please bear with me.

I use this AJAX for the pagination :

 $(function () {
     var keyword = window.localStorage.getItem("keyword");

     //pagination
     var limit = 3;
     var page = 0;
     var offset = 0;

     $("#btnLoad").on('click', function () {
         page++;
         if (page != 0)
             offset = (page - 1) * limit;

         $.ajax({
             url: "http://localhost/jwmws/index.php/jwm/search/msmall/" + keyword + "/" + limit + "/" + offset, //This is the current doc
             type: "GET",
             error: function (jq, st, err) {
                 alert(st + " : " + err);
             },
             success: function (result) {
                 alert("offset=" + offset + " page =" + page);
                 //generate search result
                 $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>' + '<br/>' + '<p>Found ' + result.length + ' results</p>');

                 if (result.length == 0) {
                     //temp
                     alert("not found");
                 } else {
                     for (var i = 0; i < result.length; i++) {
                         //generate <li>
                         $('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p><p class="hidden"></p></li>');
                     }

                     var i = 0;
                     $(".box").each(function () {
                         var name, address, picture, id = "";
                         if (i < result.length) {
                             name = result[i].name;
                             address = result[i].address;
                             picture = result[i].boxpicture;
                             id = result[i].mallid;
                         }

                         $(this).find(".name").html(name);
                         $(this).find(".address").html(address);
                         $(this).find(".picture").attr("src", picture);
                         $(this).find(".hidden").html(id);
                         i++;
                     });

                     $(".box").click(function () {
                         //alert($('.hidden', this).html());
                         window.localStorage.setItem("id", $('.hidden', this).html());
                         $("#pagePort").load("pages/MallDetail.html", function () {});
                     });

                 }
             }
         });
     }).trigger('click');

 });

Please notice that i use the variables for pagination in the url:. I tried to alert the page and offset variable, and its working fine.

However, the AJAX only working for the first page (when page load). The rest is not working even though the page and offset variable's value is true.

Theres no warning/error in console. The data just not shown.

Any help is appreciated, Thanks :D

4
  • Does your button #btnLoad exist? Commented Aug 2, 2013 at 11:00
  • Whay jQuery version do you use? Commented Aug 2, 2013 at 11:03
  • @putvande yes its exist, i have checked it :D Commented Aug 2, 2013 at 11:16
  • @putvande its the newest one Commented Aug 2, 2013 at 11:39

1 Answer 1

-1

It is a bit hard to debug your code when the whole HTML is missing. Could you put your code into JSFiddle, both HTML and JS.

Sign up to request clarification or add additional context in comments.

2 Comments

This isn't an answer. Consider to put this in as a comment.
Sorry. I did't have enough reputation to add it in a comment.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.