How do you retain current tab after refresh,submit and jumpmenu using jquery. if its too troublesome, I don't mind using PHP and sessionstorage. but please don't use cookies. BTW, im not good in jquery. Below is example and extract. I also don't know why the jquery is greyed out below. I don't mind using PHP if jquery is causing too much trouble. tq. Please help.
(useracc-test.php)
<html>
<head>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "Tab 1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>
<div id="apDiv3">
<p> </p>
<p> </p>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" id="nav">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p>
</p>
</p>
</div>
<div class="TabbedPanelsContent">
<form name="form2"
action="useracc-test.php" method="post" >
<p> </p>
<table width="500" border="0">
<tr>
<td>category</td>
<td><select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="useracc-test.php">Category</option>
<option value="useracc-test.php">Type1</option>
<option value="useracc-test.php">Color</option>
<option value="useracc-test2-jumpmenu.php">Type2</option>
<option value="useracc-test2-jumpmenu.php">Hobby</option>
</select></td>
here below, i update another example from the internet. How do i change this and apply to my tab?
$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and its associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
try this
function showTab(hash) {
localStorage.setItem("hash", hash);//save hash value in localstorage
$("div.tab").hide();
$("#tab-" + hash).show();
}
$(document).ready(function () {
if (localStorage.getItem("hash")) {//check if value exist
showTab(localStorage.getItem("hash").toString());//set the saved tab
}
});
Related
Here is my html for my populated listview. I have the link grabbed from the php script aswell. Where would i put the page slide function on click event. It wont allow me to but html in the script
<div data-role="content">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index1", function() {
$(function(){
var items="";
$.getJSON("check-events.php",function(data){
$.each(data,function(index,item)
{
items+="<li><a href="+item.col1+"?eventid="+item.id+">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
});
$("#contacts").append(items);
$("#contacts").listview("refresh");
});
});
});
</script>
<div data-role="fieldcontain">
<ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
List view
</li>
</ul>
</div>
Where would i add this piece this code. It keeps producing an error when i add it like this
items+="<li><a href="+item.col1+"?eventid="+item.id+" data-transition="slide">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
Any ideas
Working solution
php
$data = array();
while($rowa = mysql_fetch_array($a, MYSQL_ASSOC))
{
$row_array['id'] = $rowa['eventid'];
$row_array['col1'] = "index.html";
$row_array['col2'] = $rowa['eventname'];
$row_array['col3'] = date("D jS F Y",strtotime($rowa[enddate]));
$row_array['col4'] = "slide";
array_push($data,$row_array);
}
echo json_encode($data);
}
changed html
items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""+item.col4+"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";});
You need to escape your quotes when putting in the variables (\")
items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""slide"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
But, on a side note, you should be letting JQuery create your elements for you. See: https://stackoverflow.com/a/4158203/1178781
I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.
I'm new to the whole coding thing and have been learning a lot with yer help lately so I hope it may continue with the next problem I am having!
I have a Jquery list which is rendering perfectly and what it does is display some dummy info I've inputted that comes from a local MYSQL database. What I've done so far is that when the user clicks on one of the listed links it will bring them to the next page and say "You have selected link #" and the # tag in this instance represents the dealid number of the users selected list link.
What I'm trying to find out what to do is this:
With the information I've gained from the users selection (i.e. the selected dealid number) how can I then pass this back onto the database so I can find and retrieve the particular entry with that dealid number.
My HTML code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$("#list").empty();
var url="http://localhost/test/json3.php";
$.getJSON(url,function(json){
//loop through deals
$.each(json.deals,function(i,dat){
$("#list").append("<li><a id='"+dat.dealid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
$(document).on('click', '#'+dat.dealid, function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
listObject.itemID = $(this).attr('id');
$.mobile.changePage( "#index2", { transition: "slide"} );
event.handled = true;
}
});
});
$("#list").listview('refresh');
});
});
$(document).on('pagebeforeshow', '#index2', function(){
$('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
// var url="http://localhost/test/json9.php";
// $.getJSON(url, function(json){
});
var listObject = {
itemID : null
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Current Deals</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>My Deals</li>
</ul>
</div>
</div>
</div>
<!--New Page -->
<div data-role="page" id="index2">
<div data-role="header">
<h1> Find A Deal </h1>
</div>
<div data-role="content">
<a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a>
</div>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>My Deals</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
The PHP/Json file that is being referenced to create the original list (Json3.php) is as follows:
<?php
$link = mysql_pconnect("localhost", "root", "") or die ("Could not Connect to DB");
mysql_select_db("findadeal") or die("Could not select database");
$arr = array();
$rs = mysql_query("SELECT r.restaurantid, r.name, r.image, d.dealid, d.dname, d.restaurantid
FROM restaurant r, deal d
WHERE r.restaurantid = d.restaurantid;");
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo '{"deals":'.json_encode($arr).'}';
?>
I'm running at a loss here as I've been looking for information on this for a while and cant seem to find what I'm looking for. I appreciate anyones help, I really mean it! Thanks in advance!! :)
you can simplify your javascript like this:
$(document).on('click', '#'+dat.dealid, function(event){
listObject.itemID = $(this).attr('id');
$.mobile.changePage( "#index2", { transition: "slide"} );
event.stopPropagation();
});
If you want to load the data of your item without reloading the page then you need to do an ajax request. If you don't mind reloading the page, redirect to http://domain.com/uri/whatever?id=<the_selected_id> then in your PHP script you can get the item using the get parameter $_GET['id'] and perform a query to get the data for this id.
UPDATE
You need a PHP script to retrieve the data from the database. This script is called like this: http://www.domain.com/foo/bar/my_script.php?id=<the_id_from_the_selection>
And your script should looks like this:
<?php
// Default value to return
$data = array('error' => 'No deal found');
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
// Using PDO for the database connection, it's much better and avoid SQL injection
// Make sure the PDO extension is enable in your php.ini
$pdo = new \PDO('mysql:host=localhost;dbname=<SOMEDB>', '<USERNAME>', 'PASSWORD');
$sql = "SELECT * FROM deal WHERE id = :id";
$statement = $pdo->prepare($sql);
$statement->execute(array('id' => $_GET['id']));
$data = $statement->fetch(\PDO:FETCH_ASSOC);
}
echo json_encode($data);
// You don't need the closing PHP tag. Actually it's easier to debug if you don't use it.
Your ajax request (called when user select something, this is javascript) should look like this:
var dealId; // the selected deal id
$.ajax({
url : 'foo/bar/my_script.php',
data: {id: dealId},
type: "GET",
async: true,
onSuccess: function(response){
console.log(response); // look into the console to check the object structure
// Display your data here using dom selector and jquery
}
});
I want to create button to add tabs with body tabs
Please take look at the code where it says
$('#tabs1').tabs('add', 'lorem.txt', xxxxx' .....
as you can see 'lorem.txt' is from where the information is retrieved to show in the body tabs,
I want to put php code and forms inside tabs body and not use 'lorem.txt'
The problem is that it will not work if I put php code inside jquery.
My question is, is there any other way it can done to show forms using php code when person click button to add tabs?
I'm using div tag. Here is my code.
<script>
(function() {
$(function() {
var tab_counter = 0;
$('#tabs1').tabs({
closable: true,
cache:true,
add: function(e, ui){
$('#tabs1').tabs('select', '#' + ui.panel.id);
}
});
$('#tab_creator').click(function(){
tab_counter += 1;
$('#tabs1').tabs('add', 'lorem.txt', 'Tab ' + tab_counter);
return false;
});
$('#tabs2').tabs();
});
})(jQuery);
</script>
</head>
<body>
<h2 class="ui-widget ui-widget-header">closable Tabs</h2>
<input id="tab_creator" type="button" value="Add New Tab">
<div id="tabs1">
<ul>
<li>tabs one</li>
<li>tabs two</li>
<li>tabs three</li>
</ul>
<div id="tabs1-1">
<p> tabs one body</p>
</div>
<div id="tabs1-2">
<p>tabs two body</p>
</div>
<div id="tabs1-3">
<p>tabs three body</p>
</div>
</div>
<br>
<br>
If the JS code is placed directly at <head> (as your example):
$('#tabs1').tabs('add', '<?php echo $filename; ?>', 'Tab ' + tab_counter);
Otherwise, you need something like this:
$('#tabs1').tabs('add', $( '#tabs1' ).attr( 'data-filename' ), 'Tab ' + tab_counter);
... where you put the PHP code inside the data-filename attribute in #tabs1:
<div id="tabs1" data-filename="<?php echo $filename; ?>">
About data attribute: Google
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )