Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2016
    Posts
    36
    Thanks
    6
    Thanked 1 Time in 1 Post

    increase limit of query by given amount using php and ajax

    I'm trying to show a limited set of topics on a page (i.e. LIMIT 10 in query) then have a button that will load the next 10 (now LIMIT 20 in same query).

    The problem is that when I press the button, it not only refreshes the the specified div - but it re-runs the getForumTopic at the very top of the page - and thereby resetting the LIMIT to 10... so nothing happens on the page...

    But if I
    1. load the result-page
    2. comment out the getForumTopic at top of page
    and first then...
    3. click the button

    It works as perscribed... it now show 20 topics... and if I click again it shows 30... etc.

    And if I uncomment the getForumTopic at the very top of page again and click the button... it now shows 10 topics again...

    the code in question in my ajax-code - which is the code that is supposed to only refresh the div in question (ie. #showtopics) but insists on re-running the getForumTopic from the top of the page also
    Code:
    self.closest("#showtopicsAll").find("#showtopics").load(location.href + " #showtopics>*", "");
    under success

    I can't see why my code would re-run the getForumTopic at the top of page... but hopeully some of you wise folks can see the error of my ways and set me on the right path...

    My basic setup:
    getForumTopic.php (using the categoryID ($_GET), and liimit (10) from getForumTopic at top of topics page)
    Code:
    SELECT 
        ft.date AS ftDate , 
        ft.title AS ftTitle , 
        ft.summary AS ftSummary , 
        ft.randomString AS ftRandomString , 
        u.username AS uUsername 
    
    FROM 
        forumtopic AS ft 
    
    LEFT JOIN 
        userlogininfo AS u 
    ON u.id = ft.userID 
    
    WHERE 
        categoryID = ? 
    
    ORDER BY 
        ft.date DESC 
    
    LIMIT ?
    it then takes those results - puts them in arrays - and set them in session cookies that is then used to display the info found on the webpage

    page with results:
    Code:
    <?php
        getForumTopic ($pdo, $_GET['forumcategory'], 10); // starts out limit 10
    ?>
    .
    .
    .
    <div id="showtopicsAll">
        .
        .
        .
        <div id="showtopics">
            // Loop through the found topics using the values from the session cookies set in getForumTopic to populate the page
           
           <div class="show-more-topic">
               
               <input type="hidden" id="categoryID" name="categoryID" value="<?php echo $_GET['forumcategory']; ?>">
               <input type="hidden" id="topicCount" name="topicCount" value="<?php number of found topics in getForumTopic ?>">
               
               <button id="showMoreTopic">
               </button>
               
           </div>
           
        </div>
        
    </div>
    My jQuery
    jQuery.js
    Code:
    $(document).ready(function(){
        "use strict";
        $(document).on('click','button[id^="showMoreTopic"]', function(){
            var self = $(this);
            var closestDiv = self.closest('.show-more-topic');
            var topicCount = closestDiv.find("#topicCount").val();
            var categoryID = closestDiv.find("#categoryID").val();
            var topicCountNew = + topicCount + 10;
            $.ajax({
                type: "POST",
                url:'../scripts/moretopic.php',
                data:"topicCountNew="+topicCountNew+"&categoryID="+categoryID,
                success:function(){
                    self.closest("#showtopicsAll").find("#showtopics").load(location.href + " #showtopics>*", "");
                }
            });
        });
    });
    And lastly my php called from the ajax
    moretopic.php
    Code:
    session_start ();
    
    require ( "../scripts/definitions.php" ); // holds some definitions needed for functions.php to work
    require ( "../scripts/functions.php" ); // holds the getForumTopic function + the connection script for $pdo
    
    $categoryID = $_POST['categoryID'];
    $limit = $_POST['topicCountNew'];
    
    getForumTopic ( $pdo , $categoryID , $limit ); // repopulates the session cookie now with 20 topics, 30 topics, 40... until no more so they are ready when the div is refreshed
    And like I said... all code works perfectly if I comment out the getForumTopic at the top of page after first page load... but not a valid user friendly solution

    Update
    So I did some tinkering and found a sort of hack

    by adding above getForumTopic
    Code:
    if (isset($_SESSION['countTopic_getForumTopic'])) {
        $limit = $_SESSION['countTopic_getForumTopic'];
    } else {
        $limit = 10;
    }
    and then changing the getForumTopic call to
    Code:
    getForumTopic ($pdo, $_GET['forumcategory'], $limit);
    The button now does what I want with one caviot... because the $_SESSION['countTopic_getForumTopic'] is now 20, 30, 40,... and is stored in a session cookie it stays that way...

    So if user now goes to another page and later come back - the session cookie is still set to 20, 30, 40,... and the page will still show that amount of topics (at least until user logs out)... which is not ideal...

    + it's a hack - and it's not even a very elegant one at that

    There has to be an easier way to accomplice what I want...

    + I still don't get why my
    Code:
    self.closest("#showtopicsAll").find("#showtopics").load(location.href + " #showtopics>*", "");
    re-runs any functions on top of the page.... as far as I can seee it shouldn't...
    Last edited by Thothlike; Dec 14th, 2017 at 09:24 PM. Reason: added update

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,998
    Thanks
    36
    Thanked 1,072 Times in 1,068 Posts
    I don't use jquery, but was talked into learning it many days ago.

    Did not know of "closestDiv" so looked it up. Doesn't exist "closest" does, but why are you using it???
    Your looking for a val(), and please note the parentheses and the semicolon, and this would give it to you:
    Code:
    var categoryID = $("#categoryID").val();
    and not
    Code:
    var categoryID = closestDiv.find("#categoryID").val
    In fact trying to see if any of your VARs gave a result show that none of them did.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New Coder
    Join Date
    Oct 2016
    Posts
    36
    Thanks
    6
    Thanked 1 Time in 1 Post
    closestDiv is not an official jQuery variable

    it's a user created one by me 1-2 lines above where it's being used

    so first I start with the button itself
    Code:
    var self = $(this);
    Then I go from the button to the closet parent (the div that holds it) about 4 lines up and then I call that closetsDIV using closest on the button (self)
    Code:
    var closestDiv = self.closest('.show-more-topic');
    And then I go back down about 2-3 lines to find my siblings topicCount and categoryID using the closestDiv variable I just created
    Code:
    var topicCount = closestDiv.find("#topicCount").val();
    and
    Code:
    var categoryID = closestDiv.find("#categoryID").val();
    The reason I do it this way and not with
    Code:
    var categoryID = $("#categoryID").val();
    is just that the whole beauty of jQuery and ajax is that you can stay where you are and not go galavanting all around the document to find and display things...

    some of my pages (though not this one) is thousands of lines long and holds a lot of div's... and where you methods goes to start of document and read line by line down until it reaches the id/class/etc. it is looking for (potentially 1000's of lines of code) - my method looks from the button (where you are)... goes 4 lines up and 2 and 3 lines down (everytime no matter the size of the rest of the document)

    Now on this particular page the difference is so minute that it is not really an issue... but as a general rule my way is almost by definition faster and uses the beauty of jQuery and ajax to stay very close to where I am and not have to travel the whole document looking for things...

    PS. my code in the OP (and in my script) has (); after val... your example of my code doesn't... I'm guessing that's just a copy/paste error but since you wrote
    'please note the parentheses and the semicolon'
    I just wanted to make sure that this wasn't why your test of my value grabbing using my code didn't give you any results
    Last edited by Thothlike; Dec 15th, 2017 at 05:13 AM. Reason: spelling error


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •