#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    Tab Container and Insert to SQL


    I have a jquery tab container that works great. When a user clicks on the tab to see content, I would like to log that click with an insert statement to SQL, capturing the id of the content that was clicked. This is the the url of the tab. I don't know where to add the insert statement. The javascript is below. Thanks for any insight!

    Code:
    // When the document loads do everything inside here ...
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
    
         }); 	  
    
    });     
    
    </script>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    If your wanting to do this asynchronous (without having to reload/load another page); you will need to insert the jQuery.ajax() API into the $("a.tab").click function. Then create a numeric variable and have it increment inside the $("a.tab").click function. Add this variable to jQuery.ajax() API's url parameter, as a query string of your server side page's url (that has your SQL in it).
    Last edited by web_loone08; February 21st, 2013 at 12:18 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    Thank you


    Originally Posted by web_loone08
    If your wanting to do this asynchronous (without having to reload/load another page); you will need to insert the jQuery.ajax() API into the $("a.tab").click function. Then create a numeric variable and have it increment inside the $("a.tab").click function. Add this variable to jQuery.ajax() API's url parameter, as a query string of your server side page's url (that has your SQL in it).
    OK, I am too new - what I found online does not explain clearly enough how to do this...

    So, from what you are saying I would put a call here:

    // When a link is clicked
    $("a.tab").click(function () {

    NEW CODE HERE?

    or do I put it inside of the function?

    // When a link is clicked
    $("a.tab").click(function (NEW CODE HERE) {

    I haven't learned to work with AJAX yet, and I may be in over my head I am will keep going through the tutorials though...
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Really, you probably do not even have to use the ajax() API for this; you could probably just use the $.get() API. You would do it somewhere along these lines:

    Code:
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
              // send request to sever side page
              $.get("server_side_sql_page.php?count=yes");
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
    
         }); 	  
    
    });
    [php=server_side_sql_page.php]<?php
    $countClick = $_GET["count"];
    // select database
    // select data table
    if ($countClick == "yes") {
    $total_hits = // query table row with number, in it; representing current number of tab clicks
    $current_hit = $total_hits + 1;
    // insert $current_hits into table row with number, in it; representing current number of tab clicks
    }
    ?>[/php]
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    Thank you Again


    Originally Posted by web_loone08
    Really, you probably do not even have to use the ajax() API for this; you could probably just use the $.get() API. You would do it somewhere along these lines:

    Code:
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
              // send request to sever side page
              $.get("server_side_sql_page.php?count=yes");
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
    
         }); 	  
    
    });
    [php=server_side_sql_page.php]<?php
    $countClick = $_GET["count"];
    // select database
    // select data table
    if ($countClick == "yes") {
    $total_hits = // query table row with number, in it; representing current number of tab clicks
    $current_hit = $total_hits + 1;
    // insert $current_hits into table row with number, in it; representing current number of tab clicks
    }
    ?>[/php]
    Thank you so much for providing this example. I tried to make it work with what I am doing, but I think I need the opposite.

    So, the tabs contain the name of the article, and the content area contains the article text. When a user clicks on the tab, there is a url string that looks like this: index.php?recid=42057 - this is the number I am trying to log to sql, that way I can pull a report to see how many times each article was accessed. So, in the .get I need to be able to pull in the recid. Here is how my script looks now:

    Code:
      // When the document loads do everything inside here ...
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
              // send request to sever side page
              $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=$recid");
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
    
         }); 	  
    
    });
    I have insert to sql code on my page.

    I am getting the information into my sql database, but the recid is not included...

    Thanks again for helping me with this, I am learning alot about Ajax and javascript in the process!
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Is $recid a PHP variable; in your jQuery or is it a jQuery variable, that you have not defined?

    If it's PHP; you need to echo/print out the $recid variable; like so:

    PHP Code:
    $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=<?php
    echo "$recid";
    ?>");
    And if your wanting to set this variable with jQuery (it depends on how your wanting to display/obtain that number); you need to get your number into a variable.

    Example

    Code:
     // When the document loads do everything inside here ...
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
               var $recid = 42057; // this is a static number, but you can also have the number some where in your page, in an element or in your url or in HTML5 Web Storage or etc.; you have plenty of options; to set this number.
    
              // send request to sever side page
              $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid="+$recid+"");
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
    
         }); 	  
    
    });
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    Again...


    I need to thank you for your patience. I have tried for hours to make this work, but I am missing something. I feel like I am really close to a solution.

    What is happening is that the php for recid is undefined in the Ajax script.

    My php page is a request to sql, and my tab variable are then wrapped in <li> tags - so all of the tabs are returned. When I mess with the script, I either get all tabs returned being entered to logged to my sql database (via an insert statement) - this is when I tried to put the javascript in the while statement (because then it picks up the variable. But I have learned that this isn't right.

    So, I have the javascript in the <head></head> of my page, but then it won't echo the php variable.

    I hope I am making sense! I about about 1/2 to brain dead looking at this
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Where is the $recid variable coming from? You have to define it; to be able to display it anywhere in your page.

    Something like:

    PHP Code:
    $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=<?php
    $recid 
    rand(1000,9999);
    echo 
    "$recid";
    ?>");
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    From SQL


    Originally Posted by web_loone08
    Where is the $recid variable coming from? You have to define it; to be able to display it anywhere in your page.

    Something like:

    PHP Code:
    $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=<?php
    $recid 
    rand(1000,9999);
    echo 
    "$recid";
    ?>");
    The record id is actually coming from the PHP page. So, here is the setup of how my page looks, I stripped all "extra" stuff away, here is my latest attempt:
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    // When the document loads do everything inside here ...
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
    
    
     // send request to sever side page
              $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid="+$recid+"");
    
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
    
         }); 	  
    
    });     
    
    </script>
    
    </head>
    
    <body>
    
    <?php
    
    $sqlquery = "SELECT title, body, teaser, source, recid
    FROM dbo.content
    WHERE
    ((
       publish = 'Public'
       AND content = 'article'
       AND language = '$language'
    ))
    
    $results= mssql_query($sqlquery);
    $num_of_rows = mssql_num_rows ($results);
    
    $i=0;
    
    echo "        <ul class=\"tabs\">";
    
    		while ($row=mssql_fetch_array($results)){
    
    		$recid=$row["recid"];
    		$body=$row["body"];
    
        echo "<script> // Before jQuery
            var recid = new recid('<?php echo($recid); ?>');
        </script>";
    
    $i++;
    
    $link="<a href=\"indextab.php?idDivision=25&amp;nameDivison=Homepage&amp;idModule=m9026&amp;nameModule=News&amp;recid=$recid\" name=\"content_".$i."\" class=\"".$tab."\">";
    
    echo	  "<li>".$link.$titleCustom."</a></li>";
    
    }
    echo "</ul>";
    echo "</body>";
    echo "</html>";
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    I think your missing what I am trying to tell you. Ok, this:

    PHP Code:
    $recid=$row["recid"]; 
    Needs to defined in PHP (with your database connect, data table select, database query, and while loop, etc.) above your jQuery; otherwise the PHP $recid variable is not defined until after your $.get() API, so that means you will keep getting a empty string; once it is sent to your PHP page.

    Plus you removed the echo, from the example; that I provided you. So your $recid PHP variable, in your jQuery, is just an undefined javascript variable. You need to leave the echo in there.

    PHP Code:
    $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=<?php 
    echo "$recid"
    ?>");
    Last edited by web_loone08; February 22nd, 2013 at 01:03 PM.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    In Order


    OK, I see what you are saying, the page is going to process in order, so the PHP needs to come before the script so that the PHP variable is available. I reworked the page (and replaced the echo) - now it is logging to my database with each click on the tab like it is supposed to. The problem is that it is only logging the last recid - how do I get it to log the active recid? If I can get that this will be successful! Here is a view page source from what I have right now.

    <div class="tabbed_area">

    <ul class="tabs">
    <li><a href="indextab.php?idDivision=25&amp;nameDivison=Homepage&amp;idModule=m9026&amp;nameModule=News&amp ;recid=49409" name="content_1" class="tab active">Flu</a></li>

    <li><a href="indextab.php?idDivision=25&amp;nameDivison=Homepage&amp;idModule=m9026&amp;nameModule=News&amp ;recid=49426" name="content_2" class="tab">February</a></li>
    </ul>

    <div id="content_1" class="content"><p>The flu has hit many areas of the country....</p>
    </div>

    <div id="content_2" class="content"><p>February has been established ...</p>
    </div>

    <script type="text/javascript">
    // When the document loads do everything inside here ...
    $(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {

    // send request to sever side page
    $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=49426") ;
    This value is the last tab, and that is always the one that is logged, how do I get the active tab here?

    // switch all tabs off
    $(".active").removeClass("active");

    // switch this tab on
    $(this).addClass("active");


    // slide all content up
    $(".content").slideUp();

    // slide this content up
    var content_show = $(this).attr("name");
    $("#"+content_show).slideDown();
    return false;
    });
    });
    </script>
    </div>


    Here is the actual text for my script:

    Code:
    <script type="text/javascript">
    
    // When the document loads do everything inside here ...
    $(document).ready(function(){
    
         // When a link is clicked
         $("a.tab").click(function () {
    
     // send request to sever side page
    $.get("indextab.php?idDivision=25&nameDivision=Homepage&idModule=m9050&nameModule=Home&recid=<?php echo "$recid"; ?>");  
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
         return false;
         }); 	  
    });     
    </script>
    Thank you so much for all of the help you are offering, it is really above and beyond!
  22. #12
  23. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Wow haha, ok scratch the idea, about putting the PHP above the jQuery and echoing out the $recid variable. I just realized what your trying to do and I think we were both over thinking it. Ok, try this and see what you get:

    Code:
    <script>
    
    // When the document loads do everything inside here...
    $(document).ready(function(){
    
     // When a link is clicked
     $("a.tab").click(function(event) {
    
      event.preventDefault();
      $.get(this.href);
    
              // switch all tabs off
              $(".active").removeClass("active");
    
              // switch this tab on
              $(this).addClass("active");
    
    
              // slide all content up
              $(".content").slideUp();
    
              // slide this content up
              var content_show = $(this).attr("name");
              $("#"+content_show).slideDown();
    
       });
    
    });
    </script>
    
    
    <ul class="tabs">
    <li><a href="indextab.php?idDivision=25&nameDivison=Homepage&idModule=m9026&nameModule=News&recid=49409" name="content_1" class="tab active">Flu</a></li>
    <li><a href="indextab.php?idDivision=25&nameDivison=Homepage&idModule=m9026&nameModule=News&recid=49426" name="content_2" class="tab">February</a></li>
    </ul>
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    15
    Rep Power
    0

    Success!!!!!!!!!!!!!


    I ended up just putting this line:

    $.get(this.href);

    Because this line:

    event.preventDefault(); made the script not work since it would not allow the "click" to the next tab.

    But you have been wonderful to help me through this - I was really stuck - and now I understand a lot more about this type of code (which is really cool) - thank you a million times over!

    Laura

IMN logo majestic logo threadwatch logo seochat tools logo