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
}
Related
I have this php file which is fetch data from my database and place it into divs. this div created by while loop I want tow div only to be select then send the content to php file using Ajax.
The code execute with no problem but there is no result!!
Any help advance and I completely lost of mind !!!
while($row=mysqli_fetch_array($result)){
$so=$row[0];
$s=$row[1];
$m=$row[2];
$a=$row[3];
$b=$row[5];
$c=$row[8];
?>
<body>
<div id="all"> //start all
<div class="r"> //start r
<div id="e"><?php echo"{$s}"; ?></div>
<div id="b"><?php echo"{$m}"; ?></div>
<div id="a"><?php echo"{$a}"; ?></div>
<div id="b"><?php echo"{$b}"; ?></div>
</div> //end r
</div> //end all
<?php
} //end while
?>
<div id="show"></div>
script code
$(document).ready(function(){
$(".r").click(function(){
$data = $(this).text();
alert($data); //it work well
$.ajax({
url: "view.php",
type: "post",
data: {
you: $data
},
success:function(response){
$('#show').html(response);
}
});
});
});
view.php
<?php
if(isset($_post['you'])){
printf("ok"); //just to check
}
?>
First of all
IDs on a page should be unique
Now coming to your code, maintain a global variable to have select count and call the below function to allow selection of maximum 2 divs
var selectCount = 0;
$('.r div').click(function() {
if(!$(this).hasClass('active') && selectCount < 2) {
$(this).addClass('active');
selectCount++;
}
else if($(this).hasClass('active')) {
$(this).removeClass('active');
selectCount--;
}
else {
alert("ony 2 allowed");
}
});
To send the data to your call you can
$('button').click(function() {
var result = [];
$('.active').each(function(val){
result.push(val);
});
});
You may change the data format accordingly.
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'm working on drag and drop and store id number in database, i just finished that and is works great in all browser but the problem is that is NOT WORKING IN IE 8 or 9.
The problem is that in IE is not allow me to drag or move around that the problem that i can't figure out how to solve this, and rest of browser are works fine.
here is jquery code
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
and the body code is
<div id="response"> </div>
<ul>
<?php
include("connect.php");
$query = "SELECT id, text FROM dragdrop ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$text = stripslashes($row['text']);
?>
<li id="arrayorder_<?php echo $id ?>"><?php echo $id?> <?php echo $text; ?>
<div class="clear"></div>
</li>
<?php } ?>
</ul>
</div>
</div>
can any one help me how to solve to make works drag and drop for IE, if is there is other sample that might support all browser!
AM
According to #jheilgeist here, adding a position:relative on the div, will sort it out, even if it acts a little weird.
It looks like a jQuery UI bug in those browsers.
Check more info here: http://bugs.jqueryui.com/ticket/7546
I have spent the last several hours trying to simply post the data (text/html) that was entered in the ckeditor (textarea) to the PHP file.
Their API claims that the data automatically posts the data on form submissions, but it does not, it returns nothing.
EDIT: here is the real code:
<?php
require("fns.php");
// grab tab content from database
$tab = array();
$query ="SELECT * FROM tabs";
$db_conn = db_connect();
$results = mysql_query($query,$db_conn);
while($row = mysql_fetch_array($results))
{
$tab[]= $row;
}
// form validation
if($_POST['btnSave'])
{
// grab selected tab ID
$tabId = $_POST['tabId'];
$title = $_POST['txtTitle'];
$content = $_POST['ckeditor'];
// all fields required
if(isset($tabId) && isset($title) && isset($content))
{
// update recorde where id = tabId
$query = "UPDATE tabs SET title = '$title', content = '$content' WHERE id = $tabId";
if($content !== "")
{
if(mysql_query($query,$db_conn))
{
$message = "<h3 style='color:#003300;'>Changes Saved!</h3><br /><p>".$content."</p>";
header("Location:testtabs.php");
}
}
else
{
$message ="<h3 style='color: #950000;'>Content cannot be blank!</h3>";
}
}
}
?>
<!-- in head section -->
<script type="text/javascript">
$(document).ready(function() {
// inflate ckeditor
$('#ckeditor').ckeditor();
//track selected tab
var currentId = -1;
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
$("#ckeditor").val(content);
}
});
});
<body>
<?php echo $message; ?>
<div id="tabs">
<ul>
<li><?php echo $tab[0]['title'];?></li>
<li><?php echo $tab[1]['title'];?></li>
<li><?php echo $tab[2]['title'];?></li>
</ul>
<div id="tabs-1">
<div class="content">
<?php echo $tab[0]['content']; ?>
</div>
</div>
<div id="tabs-2">
<div class="content">
<?php echo $tab[1]['content']; ?>
</div>
</div>
<div id="tabs-3">
<div class="content">
<?php echo $tab[2]['content']; ?>
</div>
</div>
</div>
<?php
if (isset($_SESSION['valid_user']) && ($_SESSION['account_type'] == 'ADMIN'))
{
// display editor with tab 1 content
?>
<table id="tab-editor">
<form action = 'testtabs.php' method ='post'>
<input type="hidden" id="tabId" name ="tabId" value="-1"/>
<tr><td>Title: <input type='text' name='txtTitle' id='title' value='<?php echo $tab[0]['title'];?>'/></td></tr>
<tr><td>Tab Content:</td></tr><tr><td> <textarea name='ckeditor' id='ckeditor' class='tab-editor'><?php //echo $tab[0]['content'];?></textarea></td></tr>
<tr><td><input type='submit' name='btnSave' value='Save Changes' /></td>
</form>
</table>
<?php
}
?>
CKEditor create an istance of CKEditor from a textarea (maybe even from other elements, I don't know that) using the content of the textarea to populate the editor.
Anyway when you use jQuery:
$('#ckeditor').val("Initial text (test)");
you're putting text inside the textarea tag.
After you create a CKEditor instance you'll need to use CKEditor methods to get the data:
http://docs.cksource.com/ckeditor_api/
Specifically I think you'll need:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
PS: sorry for my bad english
EDIT: hadn't seen the edit, sorry
Reverted back to the traditional ckeditor javascript, works fine now...
CKEDITOR.replace( 'ckeditor' );
// Tab initialization
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
CKEDITOR.instances['ckeditor'].setData(content);
}
});
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.