How to link back to specific jquery-ui tabs during the pagination - javascript

I'm new to PHP and jquery-ui,
I have a problems in my php projects, I'm doing pagination within a jquery-ui tabs, but when click on next page or page number the page refreshed and display the 1st tab, while the pagination table is in 2nd tab. The following is my pagination code.
<?php
$range = 3;
if ($currentpage > 1) {
echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=1'><<</a> ";
$prevpage = $currentpage - 1;
echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><</a> ";
}
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
if (($x > 0) && ($x <= $totalpages)) {
if ($x == $currentpage) {
echo " [<b>$x</b>] ";
} else {
echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$x'>$x</a> ";
}
}
}
if ($currentpage != $totalpages) {
$nextpage = $currentpage + 1;
echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage'>></a> ";
echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages'>>></a> ";
}
?>
I had tried to replace $_SERVER['PHP_SELF'] with #usersTab2 (the tab I wanted to go) but it wont work.
I'm using php $_GET method to get the current page data.The pagination works well, just I can't link back to the specific tab I want...
Hope to get replay and your help is much appreciate~ =)
ps: I'm sry for my english...

Add an id to all tabs;
And when load this page, create a rule to get value in hash from url and fire a click event in js.
Example:
url = test.com/#tab2
When page is ready, get the value in hash and fire event:
var div = get the value in hash url;
$("#"+div).click();

You will need to use JavaScript to target and load your pages. By using HTML links, the browser will refresh the page. I would suggest using the jQuery load() function.
Example:
<a href='javascript:void()' class='nextpage'>ยป</a>
Then in your script:
$('.nextpage').click(function() { $('#page').load('loader.php?page=number'); });

Related

JavaScript function stops working when page is fully loaded

I have a wordpress site, and one of the functions has started working.
On my agenda page here: http://staging.chinahiking.cn/agenda/
it used to be that when you clicked the tabs, the upcoming trip would change. I just realized now it has stopped working, and I'm not sure why. What's even weirder is sometimes when I do a hard refresh, and while the page is still loading and I click the tabs, its working again, but when the page is fully loaded it stops working. Here is the JS function:
<?php get_header();
$cur_month = date('n');
$month = array(1=>"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$agenda = get_agenda_by_month();
?>
var $=function(objectId){
if(document.getElementById&&document.getElementById(objectId)){
return document.getElementById(objectId)
}
else if(document.all&&document.all(objectId)){
return document.all(objectId)
}
else if(document.layers&&document.layers[objectId]){
return document.layers[objectId];
}
else{
return false;
}
};
function tabTurn(presObj, classon, showdiv){
var pObj = presObj.parentNode;
var items = pObj.getElementsByTagName('li');
for(var i=0; i<items.length; i++){
var n = i + 1;
var cntDiv = $('location_desc_' + n);
if(items[i] == presObj){
items[i].className=classon;
cntDiv.className = showdiv;
}
else{
items[i].className='off';
cntDiv.className = 'undis';
}
}
};
And here is the html:
<div class="monthes">
<div class="month_list">
<ul class="month">
<?php for($i=1; $i<=12; $i++){
if($i!=$cur_month)
echo "<li onclick=\"tabTurn(this, 'on', 'month_desc');\" class=\"off\">$month[$i]</li>";
else
echo "<li onclick=\"tabTurn(this, 'on', 'month_desc');\" class=\"on\">$month[$i]</li>";
}?>
</ul>
</div>
</div>
<?php
for($i=1; $i<=12; $i++):
if((isset($agenda[$i]))):
?>
<div id="location_desc_<?php echo $i;?>" class="month_desc <?php if($i!=$cur_month) echo "undis";?>">
Does anyone know why this would all of a sudden stop working? And only sometimes work while the page is still loading, but then stop once it's fully loaded?
I don't think you're using jquery properly. You should be using the addClass and removeClass functions.
Opening devtools on your site, I can make the page change by running:
$('#location_desc_6').addClass("undis")
$('#location_desc_8').removeClass("undis")
As a side note, the selectors need to start with # if you are wanting to select elements by id.
If you really wanted to use className = whatever then you would need to specify that you want to run on the first item returned by the selector, like:
$('#location_desc_6')[0].className = "undis"

Change of div in the same page without refresh

In one of my pages, I have an <a> tag. When I click it, I am passing the variable as a GET parameter and retrieving it in the same page and displaying the details.
The code to get the parameters:
if(isset($_GET['CatId']))
{
$CatId= $_GET['CatId'];
}
else $CatId=0;
if(isset($_GET['MainProductId']))
{
$MainProductId= $_GET['MainProductId'];
$FilterAllProductQuery ="WHERE Product.MainProductId = '$MainProductId'";
$FilterProductQuery = "AND Product.MainProductId = '$MainProductId'";
}
else
{
$MainProductId=0;
$FilterAllProductQuery="";
$FilterProductQuery="";
}
The <a> tag:
<a href='Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>' ><?php echo $row["MainProdName"] ?></a>
The details to be displayed:
if($CatId == 0)
{$sql = "SELECT *,Product.Id AS ProdId, Product.Name as ProdName FROM Product $FilterAllProductQuery ";}
else
{$sql = "SELECT * ,Product.Id AS ProdId, Product.Name as ProdName FROM Product INNER JOIN MainProduct ON MainProduct.Id = Product.MainProductId
INNER JOIN Category ON Category.Id = MainProduct.CategoryId WHERE Category.Id = '$CatId' $FilterProductQuery ";}
$result1 = $dbcon->query($sql);
if ($result1->num_rows > 0) {
while ($row = $result1->fetch_assoc()) {
$id = $row["ProdId"];
// $image=$row["ImagePath1"];
$qty = $row["Quantity"];
?>
<li class="col-lg-4">
<div class="product-box">
<span class="sale_tag"></span>
<div class="row">
<img src='themes/images/<?php echo $row["ImagePath1"]; ?>' height='200' width='250'> </a></div></div></li>
Now the code is working fine, but what's happening is that when I click the <a> tag, as I am passing the get parameters, the page is refreshing. As all the code are on the same page, I don't want the page to be refreshed. For that, I need to use Ajax request. How can I do that?
I would make an onclick() event on the a tag like so:
<?php echo '<a c_id="'.$CatId.'" MainProductId="'.$id.'" onclick="sendProduct()">'.$row["MainProdName"].'</a>';
Afterwards i would in a .js file write a simple function called sendProduct() and inside i would do an ajax request to a page named ex: insertproduct.php, get the information back and Insertproduct.php would process the data and you could use .html() or .append() to assign the data to the div showing the data with a normal id.
The c_id, MainProductId are custom attributes you could recieve in the .js file as $("#youraTag").attr("c_id");
There's a really good guide here on basic ajax: https://www.youtube.com/watch?v=_XBeGcczFJo&list=PLQj6bHfDUS-b5EXUbHVQ21N_2Vli39w0k&index=3&t=1023s
First you have to remove the href of the link and give it an id.
<a id='link'>
<?php echo $row["MainProdName"] ?>
</a>
Then you put this jQuery into your page. Note, you need to have a div in which you are going to put in all your obtained results. I reffered to this div in the code as #mydiv.
$("#link").click(function(){
$("#mydiv").load("Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>");
});

Stop reload of page when clicking a link leading to php script

I'm trying to implement some sort of news module on my website. The news is contained in a text file that I parse with php and display on the site. Some of these news have links "Details..." which should take me to a php script which will show the detailed text of that news item. I know how I could accomplish this with javascript, but I need to do it without using javascript. I want my page to not reload when taken to this script.
For example:
This is a news item:
echo '<article class="newsContainer">';
echo '<img src="' . $sadrzaj[3] . '" class="news_image" alt=" ">';
echo '<h1 class="news_header">' . ucfirst(strtolower($sadrzaj[2])) . '</h1>';
echo '<p class="news_item">' . $opis . '</p>';
if($imaDetaljnije) echo 'Detaljnije...';
echo '</article>';
This is the script I normally use to load a page using AJAX and to write it to the document:
function AjaxLoadJQuery(pageToLoad){
var requestObject = new XMLHttpRequest();
requestObject.onreadystatechange = function()
{
if (requestObject.readyState == 4 && requestObject.status == 200)
{
document.open();
document.write(requestObject.responseText);
document.close();
}
if (requestObject.readyState == 4 && requestObject.status == 404)
{
alert('belaj');
}
};
requestObject.open("GET", pageToLoad, true);
requestObject.send();
}
I pass it the url of the page and the content of my page changes.
Now I'd like to preserve this sort of Single page application model, but clicking this link would cause a page reload.
Is there any way I can do this, using javascript?
Try this
<a href="link_to_page.php" onClick="window.open(this.href); return false;" target="_blank">

javascript call inside php where loop not working and breaks query

I am attempting to call a javascript function inside a php where loop. I've succeeded in calling the variable, however the function only works on the first line, and then breaks a subsequent query.
The javascript is a simple show/hide of a div or span tag with a specific id. I'm trying to have this appear for every instance of a variable, but only open the span associated with that entry, so I used a php variable from the query.
The javascript code is contained in the header; it works fine without the php, and the php works fine without the javascript but I can't seem to make them work together.
Here's the code:
while($row = mysqli_fetch_array($qir)) {
$ingredient_id = $row['ingredient_id'];
echo '<input type="checkbox" value="' . $ingredient_id . '" name="markdelete[]">';
echo $row['amt'] . ' ' .$row['ingredient_name']; ?> <button onclick="showHide('<?php echo $row['ingredient_id']; ?>'); return false">Edit amount</button> <br />
<span id="<?php echo $row['ingredient_id']; ?>" class="hide">
<?php include_once('amt.php');
echo '</span> ';
// }
echo '<br />';
}
echo '<input type ="submit" name="remove" value="Remove">';
First of all, the showHide is only working on the first record
It is also making this query not respond at all.
if (isset($_POST['remove'])) {
iF (!empty($_POST['markdelete'])) {
foreach ($_POST['markdelete'] as $delete_id) {
// remove specific source from source_subject
$rem_ing = "DELETE from dish_ingredient
where ingredient_id = $delete_id
and dish_id = $dish_id ";
mysqli_query($dbc, $rem_ing)
or die ('Error removing ingredient: '.mysqli_error($dbc));
}
}
}
I tried removing the return false;, to no avail. Please let me know if I need to show more of the code (e.g. the javascript itself)
Edit:
I've tried working within the php string (this is actually what I had tried first) but it seems to break everything (no javascript, no php)
echo $row['amt'] . ' ' .$row['ingredient_name'] . '<button onclick="showHide(\''. $row['ingredient_id'] .'\') return false">Edit amount</button> <br />';
echo '<span id=" '. $row['ingredient_id'] .' " class="hide">';
include_once('amt.php');
echo '</span> ';
Edit: I am open to other solutions if this is not something that is possible. I'm feeling a bit stumped. Realistically I just want to have a list of items called from a mysql database, and have a field appear onclick to edit an associated variable if desired without having to send it to another page or reload the script for usability (hence the javascript piece).
Thanks again, anyone who can assist.
Note: this is the script that I am calling:
<script language="JavaScript" type="text/JavaScript">
menu_status = new Array();
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}
</script>
You don't need tag there as you are already in php block.Try it without and use
showHide(\''.$row['ingredient_id'].'\')
and change
<?php include_once(....);
to
include_once(........);
Hopefully that would work
===========
try this for you javascript
<script language="JavaScript" type="text/JavaScript">
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(!switch_id) {
switch_id.className = (switch_id.className.indexOf("show") > -1) ? "hide" : "show"
}
}
}
Okay after a long time on this, I finally figured out what was going on. Part of the issue was that I was trying to call a form inside a form, which I had forgotten is not permitted in HTML, so this required some redesign.
Other issues involved calling loops within inside loops, which caused problems where the first record would work, but not for the remaining records.
The javascript above did not need to be modified, only the way that it was called.
Here is what worked. The main key was using include() instead of include_once().
while($r = $qir->fetch_assoc()) {
$ingredient_id = $r['ingredient_id'];
$amt = $r['amt'];
$ingredient_name = $r['ingredient_name'];
echo $r['amt'] . ' ' .$r['ingredient_name'];
if ($row['user_id'] == $user_id) {
echo ' <span class="openlink"><button onclick="showHide(\''.$ingredient_id. '\')">edit amount</button></span><br/>';
echo '<div id="'.$ingredient_id.'" class="hide">';
include('amt1.php');
echo '</div>';
}
}

Display final results on the same page from a dynamic drop down menu

I have a multiple drop down that goes from Country/State/city/destination.
What I want this plugin to do next, is once the destination menu is selected, the page will automatically display some general information about that destination on the same page without reloading.
The general info is in the same table as my destination drop down menu is, but under different columns.
So how can I get this information to display its self possibly in a text box or something similar only when the final distention menu is selected.
Here are some parts of my code thus far, I don't believe posting everything is necessary and might be a little confusing. PS-I am a beginner.
This is an example of my javascript which calls from my ajax.php file for the array to populate the drop down menu...
jQuery(".wrap").on('change', '#city', function() {
var querystr2 = 'cityid=' +jQuery('#city :selected').val();
jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr2, function(data) {
if(data.errorcode ==0){
jQuery('#descbo').html(data.chtml)
}else{
jQuery('#descbo').html(data.chtml)
}
}, "json");
});
This is part of my ajax.php file that previous example of jQuery is pulling information from.
$city_id = isset($_POST['cityid']) ? $_POST['cityid'] : 0;
if ($city_id <> 0) {
$errorcodeD = 0;
$strmsg = "";
$sqlD="SELECT * from destination WHERE IDCity = ". $city_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
$contD=mysql_num_rows($resultD);
if(mysql_num_rows($resultD)){
$chtmlD = '<select name="destination" id="destination"><option value="0">--Select Destination--</option>';
while($row = mysql_fetch_array($resultD)){
$chtmlD .= '<option value="'.$row['IDDestination'].'">'.$row['name'].'</option>';
}
$chtmlD .= '</select>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
}else{
$errorcodeD = 1;
$strmsg = '<font style="color:#F00;">No Destination available</font>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$strmsg));
}
And MY html section that would display everything.
<h2>Destination</h2>
<div class="wrap" id="descbo">
</div>
So basically what ever destination the user chooses, the specific information for that destination will render its self on the screen in separate boxes or text areas.
Thank you!
So, if I understand correctly, you want your php script to return data from your destination table when a particular destination is selected. You said you don't want the page to reload, but I'll assume you're OK with issuing another AJAX request to the server. If that's the case, you can simply create another delegated jQuery handler for the destination <select>:
jQuery(".wrap").on('change', '#destination', function() {
var data = {destinationid: this.value};
jQuery.post("url/to/script.php", data)
.done(function(response) {
jQuery('#descbo').html(response.html);
});
Then, in your PHP, you could have something like this:
$destination_id = isset($_POST['destinationid']) ? $_POST['destinationid'] : 0;
...
$sqlD="SELECT * from destination WHERE ID = ". $destination_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
if(mysql_num_rows($resultD)){
$chtmlD = '<div class="destination">';
while($row = mysql_fetch_array($resultD)){
$chtmlD .= '<p>' . $row['whatever'] . '</p>';
}
$chtmlD .= '</div>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
} else {
...
}
That will replace your original destination <select> with a div containing the destination description (or whatever the content is). If you don't want to replace the select, you could simply have the JS update a different element on the page, e.g.
jQuery('#some_other_element').html(response.html);

Categories