Doesn’t work when page load with ajax?

  • Resolved jbboro3

    (@jbboro3)


    7 years, 7 months ago

    I’m loading the page (where alm shortcode is placed) with ajax but when it’s loaded, ALM fails to load.. Where the problem lies?

    I’m using this code to load via ajax:

    $(‘#djj’).on(‘click’, function(e){
    e.preventDefault();
    $.ajax({
    type: “GET”,
    url: “https://xxx.com/posts/”,
    data: { },
    success: function(data){
    $(‘#special’).html(data);
    }
    });
    });

    or alternative trial

    function djj() {
    var xhttp;
    if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

    document.getElementById(“special”).innerHTML = this.responseText;
    }
    };
    xhttp.open(“GET”, “https://xxx.com/post”, true);
    xhttp.send();
    }

    Thanks

    • This topic was modified 7 years, 7 months ago by jbboro3.
Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    Hi @jbboro3,
    I have an example here of loading with Ajax.
    https://connekthq.com/plugins/ajax-load-more/docs/code-samples/loading-via-ajax/

    Hope this helps.

    Thread Starter jbboro3

    (@jbboro3)

    @dcooney.. Yes it helped me a lot. You are awesome.. If you don’t mind, I’d like to ask you for one more solution..

    I’ve this tab to load different categories of post. I tried to applied ALM but here too I’m not able to get the auto scroll working.. Yes, the first page loading occurs but subsequent auto scrolling doesn’t work.. I like using tabs because it’s way faster.. here is the code I use

    <button class=”tablinks” onclick=”openCity(event, ‘post1’)” id=”defaultOpen”>post1</button>
    <button class=”tablinks” onclick=”openCity(event, ‘post2’)”>post2</button>
    <button class=”tablinks” onclick=”openCity(event, ‘post3’)”>post3</button>
    </div>

    <div id=”post1″ class=”tabcontent”>

    <?php echo do_shortcode(‘[ajax_load_more container_type=”div” post_type=”post” category=”post1″]’); ?>

    </div>

    <div id=”post2″ class=”tabcontent”>

    <?php echo do_shortcode(‘[ajax_load_more container_type=”div” post_type=”post” category=”post2″]’); ?>

    </div>

    <div id=”post3″ class=”tabcontent”>

    <?php echo do_shortcode(‘[ajax_load_more container_type=”div” post_type=”post” category=”post3″]’); ?>

    </div>

    <script>
    function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName(“tabcontent”);
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = “none”;
    }

    tablinks = document.getElementsByClassName(“tablinks”);
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(” active”, “”);

    }
    document.getElementById(cityName).style.display = “block”;
    evt.currentTarget.className += ” active”;
    }

    // Get the element with id=”defaultOpen” and click on it
    document.getElementById(“defaultOpen”).click();

    </script>

    Just that load more or auto scroll is not working otherwise first page loads normally..

    Thank you very much for help..I will review..

    • This reply was modified 7 years, 7 months ago by jbboro3.
    Plugin Author Darren Cooney

    (@dcooney)

    It’s difficult for me to following what you got going on here… So these tabs are NOT using Ajax to load ALM?

    What do your shortcode look like?

    Cheers,

    Thread Starter jbboro3

    (@jbboro3)

    Hi @dcooney.. No they are not using ajax.. They are just using Javascript and css.. ALM is loaded by using shortcode which looks like: <?php echo do_shortcode(‘[ajax_load_more container_type=”div” post_type=”post” category=”post1″]’); ?>

    This is the line I need to get it working: $(“.ajax-load-more-wrap”).ajaxloadmore(); })

    This is the script function:

    function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName(“tabcontent”);
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = “none”;
    }
    tablinks = document.getElementsByClassName(“tablinks”);
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(” active”, “”);
    }
    document.getElementById(cityName).style.display = “block”;
    evt.currentTarget.className += ” active”;
    }

    // Get the element with id=”defaultOpen” and click on it
    document.getElementById(“defaultOpen”).click();

    Thanks

    Plugin Author Darren Cooney

    (@dcooney)

    Yes, so you need to call that function when you click into the tab, but only call it once.

    Is this what you need help with?

    Thread Starter jbboro3

    (@jbboro3)

    Yes.. right now, it doesn’t auto scroll though it opens the first page.. it should trigger auto scroll at the success..

    Regards

    Plugin Author Darren Cooney

    (@dcooney)

    I can’t tell by looking at your code. I’ll need to see a link to the issue is possible.

    Thanks.

    Thread Starter jbboro3

    (@jbboro3)

    ok, no problem. leave it alone. Thanks for spending time looking at it..

    I implemented the code of ajax loading but unfortunately it loads only once.. auto load will not work in second click until page is refreshed without ajax.. here is the code i used

    $(document).ready(function(){
    $(document).ajaxStart(function(){
    $(“#imgloader”).css(“display”, “block”);
    });
    $(document).ajaxComplete(function(){
    $(“#imgloader”).css(“display”, “none”);
    });
    $(‘content’).on(“click”, “#button”, function(e){
    e.preventDefault();

    $(“#special”).load(“/posts.php”, function(){

    $(“.ajax-load-more-wrap”).ajaxloadmore(); });

    });
    });

    When in ajax page if i click the same button, the auto load will not work for second click.. more function needed to execute next call?

    I know it might be burden for you flowing up responses for long conversation but I want to get this working. Even if I subscribe for pro ALM, I will still need them.

    Regards

    Plugin Author Darren Cooney

    (@dcooney)

    After ajax load more has been initialized then you need to let the plugin load the next set of posts.

    So, I’m saying you should NOT call $(“.ajax-load-more-wrap”).ajaxloadmore(); again after it has already been initialized.

    Thread Starter jbboro3

    (@jbboro3)

    Hello,

    I call only once after the page load… here…

    $(“#content”).load(“/posts.php”, function(){

    $(“.ajax-load-more-wrap”).ajaxloadmore(); });

    });

    where is the problem? can you please indicate me in the code?

    Thanks

    Plugin Author Darren Cooney

    (@dcooney)

    I really need to see a link to issue. I’m not understanding what the problem is.

    Is the issue all the ajax load mores are loading at the same time?

    If so, you need to target the specific instance.
    $(“.ajax-load-more-wrap”).ajaxloadmore(); will init all instances.

    Thread Starter jbboro3

    (@jbboro3)

    Proper explanation:

    Menu: Articles | sports | Stories | Post

    I’ve a template page called “Post” (as you see in the menu post).. I’ve ALM short code placed in that template page. Shortcode is [ajax_load_more container_type=”div” post_type=”post” category=”post”]..

    When I click on the menu button “Post”.. The page load with ajax and ALM also works fine.. But while in that same post page if I click again in the menu button post, the page loads with ajax but this time ALM will not load..

    So, it works only on first instance.. Though it will work again when I visit non-ajax page and click the post button again.. Hope you understood..

    Thanks

    Plugin Author Darren Cooney

    (@dcooney)

    Are you Saying when you click the POST page for a second time it reloads?

    Why are you clicking the page twice? Can you put a JS block in place to not allow clicks if that menu item is active?

    Cheers,

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Doesn’t work when page load with ajax?’ is closed to new replies.