Member Avatar for amith_ami

hi all.. i'm trying to get the next page content inside the <ol> tag to append within the current page <ol> tag... given below is the jquery i'm using... when i use alert "next_page" its showing the next page's link..
but its not loading the next page content in the current page...

<script type="text/javascript">
jQuery(".paging div a").live('click', function(e) {
    e.preventDefault();
    var next_page = jQuery(this).attr('href');
    //alert(next_page);
      jQuery.get(next_page, function(data) {
     var $response = jQuery(data);
     var more_div = $response.find('.job').html();

    jQuery('</ol>').hide()
               .append(more_div)
               .appendTo('.job')
               .delay(100)
               .slideDown('slow')
    jQuery('.paging').not(':last').hide();
});
//alert($response);
});
jQuery('.paging div a').live('click', function(e) {
    e.preventDefault();
    if (jQuery('.job').length != 1) {
        jQuery('.job').last().remove();
    } 
    jQuery('.paging').last().remove();
    jQuery('.paging').last().show();
});

</script>

i don't know that this code is working or not..... pls help me to fix this....

here is the sample html content...

<ol class="jobs">
<li class="job">
                   <dt>Location</dt>
                    <dd class="location"><strong>Anywhere</strong></dd>

                    <dt>Date Posted</dt>
                    <dd class="date"><strong>27 Mar</strong> <span class="year">2013</span></dd>

                    <dd class="type"><span class="jtype freelance">Freelance</span></dd>
                    <div class="jo-content">we're looking for another great mobile developer to join our team.

We are a tight-knit, talented group of engineers and designers building custom mobile and web software for smart clients.&nbsp; We have an incredible attention to detail ...</div>

            </li>
            </ol>
  • 2 Contributors
  • 1 Reply
  • 334 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Two quick causes to check (and fixes): first, the selector/string mistake that spotted — you must target the actual list element you want to append into (your markup shows <ol class="jobs"> with <li class="job"> children). Second, don’t append a stray closing tag or the wrong fragment from the fetched page. Parse the returned HTML, pick out the new <li> nodes and append those into the existing ol.jobs. Also avoid binding the click handler more than once and prefer delegated handlers (.live() was removed from modern jQuery).

A straightforward approach: bind a delegated click, fetch the next page, create a temporary container, select the li.job children from that container and append them to the current list, then update the pagination block. Example (keeps changes minimal and safe):

$(document).on('click', '.paging a', function(e) {
  e.preventDefault();
  var url = this.href;
  $.get(url).done(function(html) {
    var tmp = $('<div>').append($.parseHTML(html));
    var items = tmp.find('ol.jobs > li.job');
    if (items.length) items.hide().appendTo('ol.jobs').slideDown('fast');
    var newPaging = tmp.find('.paging').last();
    if (newPaging.length) $('.paging').last().replaceWith(newPaging);
  });
});

Troubleshooting tips: make sure the fetched page is same-origin (CORS blocks cross-domain GETs), confirm the server returns an ol.jobs section on the next page, and check the browser console for selector results (console.log(items.length)). If you see duplicated handlers, unbind before binding or bind once to a stable parent. Avoid copying whole <ol> wrappers — append the <li> entries to avoid nested lists and duplicate IDs. If you want the URL to reflect progress, call history.pushState after the append.

Following those steps should fix the symptom you described: new job items appended into the current ol.jobs and the paging section replaced with the next-page control.

Member Avatar for Member #949455

hi all.. i'm trying to get the next page content inside the <ol> tag to append within the current page <ol> tag... given below is the jquery i'm using... when i use alert "next_page" its showing the next page's link..

This code here:

jQuery('</ol>').hide()

There shouldn't be a </ol> tag but instead the word ol

Then it should like this:

jQuery('ol').hide()

I got no idea what you try doing. If you want to click next page or preivous page then take a look at this example. I found this online and it works. You can modify the code to suited your own code. Right now the code you provided above doesn't add up so I rather have to used something that is working so you can make changes on your own:

http://jsfiddle.net/olli/4rQRb/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.