Pass PHP variables without using href in Bootstrap

Question

I'm trying to send PHP variables using the <a> tag and the data attribute on the same PHP page using the Bootstrap tabs:

HTML (Bootstrap tab option):

<a style='padding:20px;' href='#tab_e' data-page='$page' class='passrss' data-rssid='$rssid' data-toggle='tab'>Test</a>

PHP (stored in #tab_e tab):

$rsspassedid = GET $rssid from the a tag (data-rssid)

I'd like to get the value stored in data-rssid on click and pass it to a variable further down in the same PHP file so that when the tab is opened using #tab_e, the mySQL statement will run based on the value provided in $rssid and display the results of the query. I'm not sure if any jQuery/AJAX would be required for this but is it possible to get data stored in the data attribute of the <a> tag in PHP?

UPDATE

I've tried storing the variables in the pagination links but still no luck, here's the XHR object I created:

<script>
$(document).ready(function () {

    $('.passrss').click(function () {
        $('span.pass-tabe').load('tabe.php?rssid=' + $(this).data('rssid') + '&page=' + $(this).data('page'));
    });

    }); 
</script>

Tabe passes the variables stored in the a tag to a seperate php file (tabe.php) which then loads into the browser using <span class="pass-tabe"></span>, as for pagination - the links are stored in the tabe.php file but they refer back to the main php file hence pagination fails to work e.g.

originalphpfile.php?page=$page&rssid=$rssidpassed&pageurl=$x#tab_e

NOTE: $rssidpassed is stored in tabe.php which it gets from the XHR object e.g.

$_GET['rssid']

UPDATE 2

I've added the code for pagination below where I'm having the issue at the moment which is stored in tabe.php:

$perpage = 10;
$pageurl = (isset($_GET['pageurl'])) ? (int)$_GET['pageurl'] : 1;
$start = ($pageurl - 1) * $perpage;

$pagequery = mysql_query("SELECT COUNT('topic_id') FROM topic WHERE cat_id='$page' AND topic.users_id = '$rssid'");
$pagination = ceil(mysql_result($pagequery, 0) / $perpage);

//query goes here

//pagination numbers
if($pagination >= 1){
    echo "<div style='text-align:center;'><ul class='pagination'>";
    for($x=1; $x<=$pagination; $x++){
    echo ($x == $pageurl) ? "<li class='active'><a href='originalphpfile.php?page=$page&pageurl=$x#tab_e'>$x</a></li>":"<li><a href='originalphpfile.php?page=$page&pageurl=$x#tab_e'>$x</a></li>"; 
    }
    echo "</ul></div>";
}

When I click on pagination links, it doesn't load the second, third, etc set of results as it returns to the originalphpfile.php

Is there any work around for this?

Answer 1

I'm going to go ahead and turn this into an answer because our comment blocks are getting long.

In your PHP template, to turn PHP into something useful you're going to need to do something like this:

// file1.php
// notice <?= ?> is quick echo, the same as <? echo $rssid; ?>
<a style='padding:20px;' href='#tab_e' data-rssid='<?= $rssid ?>' data-toggle='tab'>Test</a>

In your javascript, the reason you're getting $rssid is because you're not echoing the value, I think, according to the post.

// file2.php
$page = array_key_exists($_GET,'page') && is_numeric( $_GET['page'] ) ? $_GET['page'] : 1
// do query i.e select * from x offset $page * $per_page limit $per_page

// do stuff with your pagination in a loop defining an index $number
<a class="pagination" onclick="getPage(<?= $number ?>)"><?= $number; ?></a>

Then in jquery:

// Call this when they click the tab
var id;
function setId(id){
   id = id;
   getPage(1);
}

// call this when they click the pagination
function getPage(number){
   $('span.pass-tabe').load('tabe.php?rssid=' + $id + '&page=' +number )
}

Please massage the example code, it seems as if you're doing something complex and it's hard to necessarily grasp your exact use case precisely.

Answer 2

Issue resolved, I echoed out the AJAX into the tabe php file and changed the pagination HTML links:

tabe.php pagination link:

<a href='#tab_e' class='passrssurl' data-rssid='$rsspassedid' data-url='$x' data-page='$page' data-toggle='tab'>

tabe.php echo AJAX:

echo "<script>
$(document).ready(function () {
    $('.passrssurl').click(function () {
    $('span.pass-tabe').load('tabe.php?rssid=' + $(this).data('rssid') + '&page=' + $(this).data('page') + '&pageurl=' + $(this).data('url'));
    });

}); 
</script>";