EDIT WITH NEW JAVASCRIPT
I am trying to make a "I like this" kinda function but I have a small problem.
I am using this small javascript
function coolIt(designid) {
$.post('cool.php', {designid:designid}, function(data) {
//alert(data);
$('#cool_'+designid).text(data);
});
}
And this HTML where the "Like" button is
<span class="like"><span id="cool_'.$row["id"].'">('. $row["cools"] .')</span></span>
The cool.php runs through this:
function UpdateCool($design_id) {
$fields_up = array("cools" => 'cools + 1');
$fields_down = array("cools" => 'cools - 1');
$sql = SQLHandling::updateSQL('tdic_designs', 'id = '. $design_id .'', $fields_up);
SQLHandling::SQLquery($sql);
}
and that works perfectly. It updates the cools field with one increasing value.
When I run alert(data) on the javascript it returns nothing and the #cool_1 span element disappears.
Any idea what I might do wrong?
HTML OUTPUT:
<script type="text/javascript">
function coolIt(designid) {
$.post('cool.php', {designid:designid}, function(data) {
alert(data);
$('#cool_'+designid).text(data);
});
}
</script>
</head>
<body>
<div id="allContainer">
<div id="topArea">
<div id="topNaviArea">
<ul id="navi">
<li class="home">Home</li>
<li class="categories">Categories</li>
<li class="about">About</li>
<li class="faq">FAQ</li>
<li class="submit">Submit</li>
<li class="contact">Contact</li>
</ul>
</div>
</div>
<div id="contentBox">
<div id="login">Login // Register</div> <div id="mainContent">
<h1>// Home // Categories // HTML / CSS</h1>
<div id="catMenu">
<ul>
<li>3D</li><li>Graphic</li><li>HTML / CSS</li><li>Paintings</li><li>Photography</li><li>Portals</li><li>Webshops</li>
</ul>
<h2>1 designs<br />in this category</h2>
</div>
<div id="rightContentBox">
<ul id="displays">
<li class="displayWindow"><div class="dpwImage"><figure><img src="/testen/designs/thatdesigniscool.jpg" width="280" height="175" alt="That Design Is Cool" target="_blank"></figure></div><div class="dpwBox"><div class="dpwLeft"><span class="title">That Design Is Cool</span><span class="comments">Comments (1)</span></div><div class="dpwRight"><span class="like"><span id="cool_1">(29)</span></span></div></div> </li>
</ul>
</div>
</div>
</div>
</div>
I guess you are replacing the whole contents of div with just the server response. Why don't you append?
$('.likeIt').livequery("click",function(e){
var designid = $(this).attr('id').replace('design_id-','');
$.post('cool.php?design_id='+designid, {}, function(response){
$('#cool_'+designid).html($('#cool_'+designid).html() + response); // See if this works!
});
});
See if this helps! :)
I got it solved by editing cool.php to the following:
<?php
session_start();
ini_set("display_errors", 1);
define("INCLUDE_DIR", "includes/classes");
/* Autoload classes when used */
function __autoload($class_name) { include(INCLUDE_DIR.'/class.'. strtolower($class_name) . '.php'); }
SQLHandling::SQLconnect();
if($_POST["designid"] != '') {
$alreadyExist = mysql_num_rows(mysql_query('SELECT id FROM tdic_voted WHERE designid="'.(int)$_POST['designid'].'" AND ip="'.$_SERVER['REMOTE_ADDR'].'"'));
if($alreadyExist == 0) {
mysql_query(' UPDATE tdic_designs SET cools = cools+1 WHERE id="'.(int)$_POST['designid'].'"');
$num = mysql_fetch_row(mysql_query(' SELECT cools FROM tdic_designs WHERE id="'.(int)$_POST['designid'].'" LIMIT 1'));
echo $num[0];
mysql_query(' INSERT INTO tdic_voted (designid, ip) VALUES ("'.(int)$_POST['designid'].'","'.$_SERVER['REMOTE_ADDR'].'")');
} else{
echo 'You already think this is a cool design!';
}
}
?>
Related
Here I have an example of me creating a string using JQuery UI sortable event I wanted to take multiple string like this
$string: item[]=4&item[]=1&item[]=2
And call back a select one to present on a page. I am planning on storing these $string 's in a MySQL table.
Basically how would I receive said $string and and use it to display something in a particular order
Here's a JSfiddle to show you what stage I'm at.
https://jsfiddle.net/mjfncugx/
HTML:
<ul id="sortable">
<li id="item_1">test1</li>
<li id="item_2">test2</li>
<li id="item_3">test3</li>
<li id="item_4">test4</li>
<li id="item_5">test5</li>
</ul>
Query String: <span></span>
JQuery UI
$(document).ready(function() {
$('ul').sortable({
axis: 'y',
stop: function(event, ui) {
var data = $(this).sortable('serialize');
$('span').text(data);
/*$.ajax({
data: oData,
type: 'POST',
url: '/your/url/here'
});*/
}
});
});
When you are saving in Db just use this
str_replace('[]=', '_', 'item[]=2&item[]=1&item[]=3&item[]=4&item[]=5');
AFter inserting..
I am assuming that $data = item_2&item_1&item_3&item_4&item_5; which is coming from DB.
<?php
$data = !empty($data) ? explode('&', $data) : '';
?>
<ul id="sortable">
<?php
if(!is_array($data))
{
?>
<li id="item_1">test1</li>
<li id="item_2">test2</li>
<li id="item_3">test3</li>
<li id="item_4">test4</li>
<li id="item_5">test5</li>
<?php
} else {
?>
foreach($data as $data_row)
{
?>
<li id="<?= $data_row ?>"><?= str_replace('_', '', $data_row); ?></li>
<?php
}
<?php
}
?>
</ul>
There might be some syntax error if so please correct it.
I'm trying to develop a notification system using jQuery and PHP. So I've created a new table in the database where I'm going to store all the new notifications. Using jQuery I've been able to show an alert (bubble icon) showing the number of new lines added to the database, but I'm now stuck because I don't really know how to update the database (fire update.php file) when I click the icon (.icon-bell) which does activate a drop-down menu.
This is the jQuery script I've added to the index page
<script type="text/javascript">
$(document).ready(function(){
$("#datacount").load("select.php");
setInterval(function(){
$("#datacount").load('select.php')
}, 20000);
});
</script>
This is the HTML code in the index page
<li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-bell">
</i>
<span class="badge badge-success"><div id="datacount">
</div>
</span>
</a>
<ul class="dropdown-menu" >
<li class="external">
<h3>
<span class="bold">12 pending</span>
notifications
</h3>
view all
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
<li>
<a href="javascript:;">
<span class="time">just now</span>
<span class="details">
<span class="label label-sm label-icon label-success">
<i class="fa fa-plus">
</i>
</span> New user registered. </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
This is the select.php file
<?php
$sql = "SELECT * from tbl_noti where status = 'unread'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>
This is the update.php file
<?php
$sql = "update tbl_noti set status = 'read'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>
You can use PHP + Ajax to accomplish this task. I have created a simple notification system and you can easily clone it from GitHub(https://github.com/shahroznawaz/php-notifications).
let's create an index.php file and put the following code. it will create a form. all the data will get by ajax call and updated in the view.
<!DOCTYPE html>
<html>
<head>
<title>Notification using PHP Ajax Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PHP Notification Tutorial</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span>
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
</nav>
<br />
<form method="post" id="comment_form">
<div class="form-group">
<label>Enter Subject</label>
<input type="text" name="subject" id="subject" class="form-control">
</div>
<div class="form-group">
<label>Enter Comment</label>
<textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
</div>
<div class="form-group">
<input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
</div>
</form>
</div>
</body>
</html>
Now create ajax calls like this:
<script>
$(document).ready(function(){
// updating the view with notifications using ajax
function load_unseen_notification(view = '')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{view:view},
dataType:"json",
success:function(data)
{
$('.dropdown-menu').html(data.notification);
if(data.unseen_notification > 0)
{
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification();
// submit form and get new records
$('#comment_form').on('submit', function(event){
event.preventDefault();
if($('#subject').val() != '' && $('#comment').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#comment_form')[0].reset();
load_unseen_notification();
}
});
}
else
{
alert("Both Fields are Required");
}
});
// load new notifications
$(document).on('click', '.dropdown-toggle', function(){
$('.count').html('');
load_unseen_notification('yes');
});
setInterval(function(){
load_unseen_notification();;
}, 5000);
});
</script>
You also need to fetch all the records from database and update the status for the notification viewd. create fetch.php file and add the following code:
<?php
include('connect.php');
if(isset($_POST['view'])){
// $con = mysqli_connect("localhost", "root", "", "notif");
if($_POST["view"] != '')
{
$update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
mysqli_query($con, $update_query);
}
$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
$result = mysqli_query($con, $query);
$output = '';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<li>
<a href="#">
<strong>'.$row["comment_subject"].'</strong><br />
<small><em>'.$row["comment_text"].'</em></small>
</a>
</li>
';
}
}
else{
$output .= '<li>No Noti Found</li>';
}
$status_query = "SELECT * FROM comments WHERE comment_status=0";
$result_query = mysqli_query($con, $status_query);
$count = mysqli_num_rows($result_query);
$data = array(
'notification' => $output,
'unseen_notification' => $count
);
echo json_encode($data);
}
?>
Now you will be able to see the notification in navigation bar like this:
when you click the dropdown the status of views notification will update and count will disappear.
To execute PHP asynchronously, you need to use AJAX. jQuery has a few functions for this purpose.
$.ajax: Fully customizable asynchronous request, including error handling, headers, etc.
$.post: AJAX restricted to POST.
$.get: AJAX restricted to GET.
Both $.post and $.get can be accomplished with $.ajax, however they are, in most situations, easier to work with. You most likely will only need $.get in this case, since no additional data is being passed in the request.
Example code:
$.get(
"update.php",
function(result) {
console.log(result)
}
);
Here, result is the data outputted from update.php.
Use ajax to execute the PHP queries so they can execute in real time without page reload.
i am creating a comment system using the php and mysql to store data and ajax with jquery all the system work well but when it comes to the delete action nothing it happen like this button do not have any action or relation with the system can anyone help me ???
comment_box.php
<li class="comment-holder" id="_<?php echo $comment->comment_id; ?>">
<div class="user-img">
<img src="<?php echo $user->profile_img; ?>" class="user-img-pic" />
</div>
<div class="comment-body">
<h3 class="username-field">
<?php echo $user->userName; ?>
</h3>
<div class="comment-text">
<?php echo $comment->comment; ?>
</div>
</div>
<div class="comment-buttons-holder">
<ul>
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
</ul>
</div>
</li>
comment_delete.js(i am testing the delete button with firebug)
$(document).ready(function() {
$('.delete-btn').each(function() {
var btn = this;
$(btn).click(function(){
console.log("the id " + btn.id);
})
});
});
Try this
$(document).ready(function() {
$('.delete-btn').each(function(i,el) {
$(el).click(function(){
console.log("the id " + $(this).attr('id'));
})
});
});
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
Since you are missing whitespace here between the id value and the class attribute, I think the browser just does not assign that class to the element.
Edit (for people who don’t know what “missing” means):
Your PHP code will generate HTML output of the form
<li id="123"class="delete-btn">X</li>
whereas it should of course be
<li id="123" class="delete-btn">X</li>
Please always validate your HTML code before asking questions.
Try
$(document).ready(function() {
$('.delete-btn').click(function() {
var comment_id = $(this).attr('id');
alert(comment_id);
});
});
I have a navigation which load dynamically content via ajax. But if I refresh the page or visit another url and go back the current content is away and I see the old content under the first menu tab.
Now I have to solve this problem.
The index.php include the elements header_registrated.inc.php, navigation.inc.php and main_container.inc.php
index.php:
<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>
header_registrated.inc.php:
<?php
include ("inc/scripts/mysql_connect.inc.php");
session_start();
$user = $_SESSION["userLogin"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/framework/jquery.js"></script>
<script language="JavaScript" src="js/dropdown/window.js"></script>
<script language="JavaScript" src="js/navigation/navigation.js"></script>
</head>
<body>
</body>
navigation.inc.php:
<div class="navigation">
<ul>
<li id="1">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
main_container.inc.php:
<div class="mainContainer">
<div class="containerHeader">
<div class="contentHeader">
</div>
</div>
<div class="contentContainer">
<div class="content">
</div>
<div class="advertisement">
</div>
</div>
</div>
Now the divs content, cnotentHeader and advertisement (in file main_content.inc.php) is filled via ajax. Also the navigation has some jquery effects which also have to be the same after page refresh.
navigation.js:
$(document).ready(function() {
$.get('inc/incfiles/content_container/header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('inc/incfiles/content_container/content/1.php', function(data) {
$('.content').html(data);
});
$.get('inc/incfiles/content_container/advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current = '1.php';
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === quelle) {
return;
}
current = quelle;
// content
$(".content").fadeOut(function() {
$(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal');
})
});
$(".navigation li").click(function() {
$(".menuImage").removeClass("menuImageActive1");
$(".menuImage").removeClass("menuImageActive2");
$(".menuImage").removeClass("menuImageActive3");
$(".menuImage").removeClass("menuImageActive4");
$(".menuImage").removeClass("menuImageActive5");
$(".menuImage").removeClass("menuImageActive6");
});
$("#1").mousedown(function() {
$("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
});
$("#1").mouseup(function() {
$("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release
});
$("#1").click(function() {
$("#menuImage1").addClass("menuImageActive1");
});
$("#2").mousedown(function() {
$("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
});
$("#2").mouseup(function() {
$("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release
});
$("#2").click(function() {
$("#menuImage2").addClass("menuImageActive2");
});
$("#3").mousedown(function() {
$("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
});
$("#3").mouseup(function() {
$("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release
});
$("#3").click(function() {
$("#menuImage3").addClass("menuImageActive3");
});
$("#4").mousedown(function() {
$("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
});
$("#4").mouseup(function() {
$("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release
});
$("#4").click(function() {
$("#menuImage4").addClass("menuImageActive4");
});
$("#5").mousedown(function() {
$("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
});
$("#5").mouseup(function() {
$("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release
});
$("#5").click(function() {
$("#menuImage5").addClass("menuImageActive5");
});
$("#6").mousedown(function() {
$("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
});
$("#6").mouseup(function() {
$("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release
});
$("#6").click(function() {
$("#menuImage6").addClass("menuImageActive6");
});
$("#1").click(function(){
$(".navigationDart").animate({
top: "16px"
}, 500 );
});
$("#2").click(function(){
$(".navigationDart").animate({
top: "88px"
}, 500 );
});
$("#3").click(function(){
$(".navigationDart").animate({
top: "160px"
}, 500 );
});
$("#4").click(function(){
$(".navigationDart").animate({
top: "232px"
}, 500 );
});
$("#5").click(function(){
$(".navigationDart").animate({
top: "304px"
}, 500 );
});
$("#6").click(function(){
$(".navigationDart").animate({
top: "376px"
}, 500 );
});
});
My idea was it to work with if(isset($_SESSION['ajaxresponse'])) but I don't no how to do this.
Please help me. I have the feeling that I've searched the whole web to find an answer.
I recomend using a library that ties PHP to jQuery through AJAX and can ease your problems a lot. the library is phery http://phery-php-ajax.net
just some optimization for your navigation.js file:
You'll need to centralize (or not) the AJAX in one file, to make it easier.
It can go on the top of your index.php
function load($data){
$r = new PheryResponse;
if (!isset($_SESSION["userLogin"])) {
return $r->redirect('http://localhost/project');
}
$path = 'inc/incfiles/content_container/';
if (isset($data['id'])){
$id = $data['id']. '.php';
} else {
if (!empty($_SESSION['id'])){
$id = $_SESSION['id'];
} else {
$id = '1.php';
}
}
$_SESSION['id'] = $id; // save the current ID and will load next time the person refreshes the page
ob_start();
include $path.'content/'.$id;
$content = ob_get_clean();
ob_start();
include $path.'advertisement/'.$id;
$ads = ob_get_clean();
ob_start();
include $path.'header/'.$id;
$header = ob_get_clean();
$r
->jquery('.advertisement')->html($ads)
->jquery('.contentHeader')->html($header)
->jquery('.content')->html($content)
;
// etc
return $r->this()->find('.menuImage')->addClass('menuImageActive'); // set the current menuImage of the LI element to menuImageActive
}
session_start();
Phery::instance()->set(array(
'load' => 'load'
))->process();
Since your JS it non-performant right now, I've redone it:
$(function() {
phery.remote('load');
var menu_image = $(".menuImage");
$(document)
.on('click', '.navigation li', function(event){
menu_image.removeClass("menuImageActive");
var top;
switch (event.currentTarget.id){
case '1':
top = "16px";
break;
case '2':
top = "88px";
break;
case '3':
top = "160px";
break;
case '4':
top = "232px";
break;
case '5':
top = "304px";
break;
case '6':
top = "376px";
break;
}
$(event.currentTarget)
.find(".navigationDart").animate({ top: top }, 500);
})
.on('mousedown', '.navigation li', function(event){
$(event.currentTarget).addClass('menuImageClick');
})
.on('mouseup', '.navigation li', function(event){
$(event.currentTarget).removeClass('menuImageClick');
});
});
and your navigation.inc.php will have to be:
<div class="navigation">
<ul>
<li id="1" data-remote="load" data-args="{'id':1}">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2" data-remote="load" data-args="{'id':2}">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3" data-remote="load" data-args="{'id':3}">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4" data-remote="load" data-args="{'id':4}">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5" data-remote="load" data-args="{'id':5}">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6" data-remote="load" data-args="{'id':6}">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
it seems your CSS is convoluted for the simplicity of your HTML. And you shouldn't be using a number for an ID, IDs needs to be You should be reusing css classes in this case, like
.menuImageActive {
/* common styles */
}
.menuImageClick {
/* common styles */
}
/* apply per ID */
#menuImage1.menuImageActive {
}
#menuImage1.menuImageClick {
}
#menuImage2.menuImageActive {
}
#menuImage2.menuImageClick {
}
#menuImage3.menuImageActive {
}
#menuImage3.menuImageClick {
}
#menuImage4.menuImageActive {
}
#menuImage4.menuImageClick {
}
#menuImage5.menuImageActive {
}
#menuImage5.menuImageClick {
}
#menuImage6.menuImageActive {
}
#menuImage6.menuImageClick {
}
Try out jQuery UI tabs if you need dynamically loaded tabs, it has built in AJAX support.
If you want back/forward support for AJAX events try out the jQuery address plugin.
There is a good answer on how to use jQuery UI tabs with back/forward history here:
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
}