Tab Container and Insert to SQL

Dev Shed Forums Sponsor:

February 21st, 2013, 11:56 AM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation 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>

February 21st, 2013, 12:15 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

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.

February 21st, 2013, 12:32 PM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation Power: 0

Thank you

Quote:

Originally Posted by web_loone08

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...

February 21st, 2013, 01:46 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

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 Code:

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

}

?>

February 21st, 2013, 06:10 PM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation Power: 0

Thank you Again

Quote:

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 Code:

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

}

?>

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!

February 21st, 2013, 07:17 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

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;

     }); 	  

});

February 22nd, 2013, 11:07 AM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation 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

February 22nd, 2013, 12:15 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

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";

?>");

February 22nd, 2013, 12:39 PM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation Power: 0

From SQL

Quote:

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&nameDivison=Homepage&idModule=m9026&nameModule=News&recid=$recid\" name=\"content_".$i."\" class=\"".$tab."\">";

echo	  "<li>".$link.$titleCustom."</a></li>";

}
echo "</ul>";
echo "</body>";
echo "</html>";

#10

February 22nd, 2013, 12:58 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

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.

#11

February 22nd, 2013, 01:41 PM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation 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&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>

<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!

#12

February 22nd, 2013, 09:47 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

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>

#13

February 23rd, 2013, 06:55 AM

laural4705

Registered User

Join Date: Apr 2012

Posts: 15

Time spent in forums: 4 h 44 sec
Reputation 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

Tab Container and Insert to SQL

Developer Shed Advertisers and Affiliates