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
}
});
Related
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
}
});
I am trying to cascade update a SELECT tag using jQuery AJAX.
The criterium is passed as POST/JSON to a PHP script which, in turn, pulls the data from a MySql database using PDO. The response is then displayed using JSON.
My problem is that with 2 specific records, the response will be empty.
The form (selectBB.php):
<?php
include_once '../core/classes/bbClasses.php';
$db=new workingDB();
?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="../Core/css/css.css" rel="stylesheet" type="text/css"/>
<script src="../Core/jquery/jquery-1.11.1.js" type="text/javascript"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
<title>Liste des départements</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="logoZone"></div>
<nav>
<li>Clients</li>
<li>Positions</li>
<li>Clients</li>
<li>Maintenance</li>
<li>Rapports</li>
</nav>
</header>
<aside>
<ul>
<li>Reservation</li>
<li>Location</li>
<li>Renouvellement</li>
</ul>
</aside>
<div id="content">
<form method="$POST" name="frmSlctBB">
<label for="slctDPT">Departement</label>
<select id= "Dpt" name="slctDPT">
<?php
$listDPT=$db->loadDPT();
if(count($listDPT)){
foreach ($listDPT as $DPT) {
echo ("<option value=".$DPT['IDDepartment'].">".$DPT['DepartmentName']."</option>");
}
}
?>
</select>
<label for ="slctVille">Ville</label>
<select id="slctVille" name="slctVille">
</select>
<label for ="slctFormat">Format</label>
<select id="slctFormat" name="slctFormat"></select>
<label for ="slctStatut">Statut</label>
<select id="slctStatut" name="Statut"></select>
</form>
<!--Error log-->
<div class="errorlog"></div>
<!-- End of error log-->
</div> <!-- end of content-->
<footer>
<ul>
<li> <address><strong>Dauphin s.a.</strong>bldg #8, complexe Acra <br>route de Delmas,<br>Delmas, HT6120<br>Haiti</address></li>
</ul>
</footer>
</div> <!-- end of wrapper-->
<script src="../Core/js/searchCritFunctions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Dpt").change(function(){
fetchCities();
});
});
</script>
AJAX request
function fetchCities(){
// Uses Ajax to return a list of cities based on selected department
var selDpt= $("#Dpt").val();
$(".errorlog").empty();
$.ajax({
url :'listCities.php',
data:{d:selDpt},
type: 'POST',
dataType: 'JSON'
})
.done( function(result){
// Clear Select from previous entries
$('#slctVille').empty();
//load new entries
for(var i=0;i<result.length;i++){
$('#slctVille').append('<option value='+ result[i].IDCity +'>'+result[i].CityName+'</option>');
};
console.log(result);
})
.fail(function (){
$(document).ajaxError(function(jqXHR,textStatus,thrownError){
$(".errorlog").append("<h3>An error has occured</h3><p>"+textStatus+"</p>");
console.log(thrownError);
})
;
});
};
PDO Statement
<?php
require_once '../core/config/config.php';
class workingDB extends db {
public function loadDPT(){
$sql="SELECT * FROM tblDepartments ORDER BY DepartmentName";
$q = $this->conn->prepare($sql);
$q->execute();
return $row=$q -> fetchAll();
}
public function loadCities($dpt){
$sql="SELECT IDCity, IDDepartement, CityName FROM tblCities WHERE IDDepartement=".$dpt;
$q = $this->conn->prepare($sql);
$q->execute();
$row=$q -> fetchAll();
return $row;
}
}
As a tentative to debug the code, I have outputted the response to the console. If, for example, the data sent thru AJAX is "5", the html response would be :
[{"IDCity":"22","0":"22","IDDepartement":"5","1":"5","CityName":"Hinche","2":"Hinche"},{"IDCity":"23","0":"23","IDDepartement":"5","1":"5","CityName":"Mirebalais","2":"Mirebalais"}]
On the opposite, if Ajax data is "1" or "9", the response would be empty.
Thanks in advance for your help.
P.S.: I have verified the database and these specific rows aren't empty.
P.S.: #Sean, thanks for noting I had forget to add listCities.php
<?php
//Output list of cities based on departments selected
include_once '../core/classes/bbClasses.php';
$d=$_POST['d']; //array of departments selected
$base= new workingDB();
$villes=$base ->loadCities($d);
echo json_encode($villes);
$base="";
?>
I have a an ajax function that is not displaying properly on my html page. I have included a screenshot of the error here:
What is happening: The ajax function is POSTed to my PHP file where an SQL Query is ran. The stagename of the musician is searched in my database and the real name of the artist is ultimately returned from the ajax function and sent my HTML page in a div with id="#namers". When I click on an artists name, that name is stored in a variable, sent into the ajax function and sql query and the returned name value is displayed.
The Problem:
The page comes up, shows the artists name (duplicated) but then 2-3 seconds later, the element disappears entirely. In the GIF I am clicking only once and the artists name. Each click event triggers the ajax function and subsequently, an SQL query.
What I would like:
I would like the name of the artist to appear only once and I would like the name to be statically displayed on the page. I want to stop the div from disappearing. When I click on an artists name, I want the element with their real name to be displayed until another artist is clicked on. Each name only needs to be loaded to the site once per visit.
jQuery:
$(document).ready(function () {
$('#namers').hide();
$('#prf').hide();
$('.artists').click(function () {
$('.mainpage').hide();
$('#prf').show();
}); //when .artists is clicked
$('li').click(function () {
var name = $(this).text();
$('#prf').attr("class",name);
$('#pic').attr("class",name);
$('#info').attr("class",name);
$.post("ajax-name.php", {name: name}, function( html ) {
$('#namers').html(html);
}) //POST function
$('#namers').show();
}); //when 'li' clicked
}); //document.ready
PHP:
<?php
//PDO
$rname = $_POST['name'];
try {
$db = new PDO('mysql:dbname=dbname;host=myhost;charset=utf8', 'user', 'pass');
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query="SELECT realname FROM artistmaster WHERE stagename = :name";
$stmt = $db->prepare($query);
$stmt->execute(array("name"=>$rname));
$result=$stmt->fetchAll();
foreach($result[0] as $child) {
echo $child . "<br />"; }
}
catch(PDOExeception $e){echo $e->getMessage();}
?>
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title></title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript" ></script>
</head>
<body>
<div class="header"><h1></h1></div>
<div class="mainpage">
<h1>Get Curious. Click an artists to get started. Have fun! :)</h1>
</div>
<div id="prf" class="profile">
<div id ="info" class="basicinfo">
<div id="pic" class="artistphoto">Artist photo here</div>
<div class="artistname">Name(s):<div id="namers"></div></div>
<div id="hometown" class="hometown">Hometown:</div>
</div>
</div>
<div class="leftpanel">
<ul class="artists" >
<li>Aly and Fila</li>
<li>Andrew Rayel</li>
<li>Arnej</li>
<li>Avicii</li>
<li>Basenectar</li>
<li>Borgeous</li>
<li>Bryan Kearney</li>
<li>Caked Up</li>
<li>Cash Cash</li>
<li>Coone</li>
<li>David Guetta</li>
<li>Dimitri Vegas and Like Mike</li>
<li>Diplo</li>
<li>Dirtcaps</li>
<li>DVBBS</li>
<li>DYRO</li>
<li>ETC! ETC!</li>
<li>Ferry Corsten</li>
<li>Henry Fong</li>
<li>John Digweed</li>
<li>Jordan Suckley</li>
<li>Kaskade</li>
<li>Le Castle Vania</li>
<li>Martin Garrix</li>
<li>M4sonic</li>
<li>Makj</li>
<li>Mat Zo</li>
<li>Morgan Page</li>
<li>Myon and Shane 54</li>
<li>New World Sound</li>
<li>Nicky Romero</li>
<li>Orjan Nilsen</li>
<li>Paris Blohm</li>
<li>Pete Tong</li>
<li>Richie Hawtin</li>
<li>Romeo Blanco</li>
<li>Skrillex</li>
<li>Simon Patterson</li>
<li>Steve Aoki</li>
<li>Swanky Tunes</li>
<li>Tiesto</li>
<li>TJR</li>
<li>Woflpack</li>
<li>Yves V</li>
<li>Zedd</li>
</ul>
</div>
<div class="footer">
<h1>footer</h1>
</div>
</body>
</html>
(Just a heads up, its a Lengthy question but im sure its very basic question for a ajax-php coder)
Im trying to 'update db on some drag n drop event on one page' and 'reflect that change in other page without reload'. I have already written pretty much all the code, need your help in figuring out what is wrong. Here is the Html that I have written,
First_html_file:
<head>
<title>Coconuts into Gunnybags</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="coconuts" style="float:left">
<div class="coconut1" ondragover="allowDrop(event)" ondrop="drop(event)">
<img id="drag1" ondragstart="drag(event)" draggable="true" src="coconut.png">
</div>
<div class="coconut2" ondragover="allowDrop(event)" ondrop="drop(event)">
<img id="drag2" ondragstart="drag(event)" draggable="true" src="coconut.png">
</div>
</div>
<div class="gunnybag" style="float:right">
<div id="place1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="place2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</div>
</body>
so there are 2 drag-able coconuts and there are 2 placeholders(place1 & place2). What I want to do is when the coconuts are dragged and placed on one of the placeholders, database's values should be updated. (say when a coconut is placed in 1st placeholder, place_id 1 - true, place_id 2 - false)
For this, I'm making ajax call to a php file from JS's drop function like this..
JS_file:
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("coconut");
ev.target.appendChild(document.getElementById(data));
var state = true;
var id = ev.target.id;
$.ajax({
url: "db_update.php", //calling db update file.
type: "POST",
data: { id: id, state: state }, //2 variables place_id and its state(True/False)
cache: false,
success: function (response) { //I dont know what to do on success. Can this be left blank like, success: ?
$('#text').html(response);
}
});
}
This is my db_update,
db_update:
<?php
$state = $_POST['state']; //getting my variables state 'n ID
$id = $_POST['id'];
function begin()
{
mysql_query("BEGIN");
}
function commit()
{
mysql_query("COMMIT");
}
$con=mysql_connect("sqlservername","myuname", "mypass") or die(mysql_error());
mysql_select_db("my_db", $con) or die(mysql_error());
$query = "UPDATE gunnybag SET state = '{$state}' where id='{$id}'"; //will this work? or am I doing something wrong here??
begin();
$result = mysql_query($query);
if($result)
{
commit();
echo "successful";
}
?>
On the receiving side I want to update the coconuts in the gunnybag without reloading the page, so I have written this ajax which uses db_fetch.php
ajx.js file:
window.onLoad = doAjax;
function doAjax(){
$.ajax({
url: "db_fetch.php",
dataType: "json",
success: function(json){
var dataArray = JSON.decode(json);
dataArray.each(function(entry){
var i=1;
if(entry.valueName==true){
$q('place'+i).css( "display","block" );
}
else{
$q('place'+i).css( "display","none" );
}
i=i++;
})
}
}).complete(function(){
setTimeout(function(){doAjax();}, 10000);
});
}
here is the db_fetch.php:
<?php
try{
$con=mysql_connect("sqlservername","myuname", "mypass") or die(mysql_error());
}
catch(Exception $e){
echo $e;
}
mysql_select_db("my_db", $con) or die(mysql_error());
$q = mysql_query("SELECT 'state' FROM 'gunnybag' "); //fetching all STATE from db
$query = mysql_query($q, $con);
$results = mysql_fetch_assoc($query);
echo json_encode($results); //making it JSON obj
?>
Finally my other page where this ajax is being called from.
Second_html_file:
<head>
<title>Coconuts into Gunnybags</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="ajx.js"></script>
//if i simply include the ajax script here will it be called
//automatically? i want this script to keep up with the changes in db.
</head>
<body>
<div class="gunnybag" style="float:right">
<div id="place1" style="display: ;"><img id="drag1" draggable="true" src="coconut.png"></div>
<div id="place2" style="display: ;"><img id="drag2" draggable="true" src="coconut.png"></div>
</div>
</body>
MAP:
First_html_file->JS_file->db_update :: Second_html_file->ajx.js->db_fetch.
Please point out what is wrong in this code, also respond to the //comments which are put along code.
Your response is much appreciated. Thanks! #help me get this right#
For ref I have hosted the files here, http://www.nagendra.0fees.net/admin.html & http://www.nagendra.0fees.net/cng.html
First thing I see is:
You say:
var id = event.target.id;
but you decalare ev in drop(ev)
so change that:
var id = event.target.id;
to:
var id = ev.target.id;
for starters.
Then you should use mysqli since mysql is deprecated:
Your code is also open for SQL-injections, so change:
$state = $_POST['state']; //getting my variables state 'n ID
$id = $_POST['id'];
to:
$state = ($_POST['state']) ? true : false;
$id = intval($_POST['id']); //make sure an integer
i am new to ajax . i want to submit a data with the help of ajax and then get the new data replacing the old one in the same div as of which the old data was .
here is the jquery for sliding tab
$(document).ready(function() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
});
ajax
function addhubs()
{
var group =$('#customhubs').val();
var user=$('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val='+group+'&& loguser='+user,
success: function(html){
}
});
}
the div i want to replace data
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php $sql=mysql_query("select * from groups");
while($ab=mysql_fetch_array($sql))
{
$gpID[]=$ab['group_id'];
$gp=$ab['group_id'];
$gpName=$ab['group_name'];
?>
<li><?php echo $gpName;?></li>
<?php
}
?> </ul>
</div> <!-- /.st_slide_container -->
</div> <!-- /.st_tabs_container -->
and the mfrnds.php of the ajax call file contains query to update the new data.
$user=$_GET['loguser'];
$group=$_GET['val'];
$sql=mysql_query("insert into groups (group_name) values ('$group')");
how can i update the div in the above . plz help me .m stuck badly luking for solution from 4 days. thanks
Note that in your addhubs function you should only add one & in your url and concatenate everything without spaces in between such as below.
When the ajax call has finished it returns the contents of the page you requested (mfrnds.php) in the html variable. So you can simply select the div you want and enter the html as you can see below. So here we go...:
Your Page
<html>
<body>
<script>
$(document).ready(function() {
setupTabs();
});
function setupTabs() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
}
function addhubs() {
var group = $('#customhubs').val();
var user = $('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val=' + group + '&loguser=' + user,
success: function(html) {
//Get div and display the data in there
$('div.st_slide_container).html(html);
//As your slide effect is gone after you updated this HTML, redo your slide effect:
setupTabs();
}
});
}
</script>
<!-- Vertical div -->
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
</div> <!-- /st_slide_container -->
</div> <!-- /st_tabs_container -->
</div> <!-- /st_vertical -->
</body>
</html>
So in your mfrnds.php you should have a PHP script that uses the val and loguser GET variables and updates the database. After the database has been updated you should return the updated HTML like the following:
*mfrnds.php
<?php
$user = $_GET['loguser'];
$group = $_GET['val'];
$sql = mysql_query("insert into groups (group_name) values ('$group')"); ?>
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
Note though that this code is basically meant as an example, I don't know what you want to do exactly in mfrnds.php etc, but I hope this gives you a good idea!
It looks like you are almost there.
In your mfrnds.php file add a line to grab the updated rows
use:
PSEUDOCODE
"SELECT * FROM groups"
for each row in groups
echo "<div> groups.name groups.category </div"
and then in your callback function
success: function(html){
$('.st_tabs').html(html); //replace the html of the sttabs div with the html echoed out from mfrnds.php
}