jquery function passsing variables - php

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.

Related

How to make only two div clickable among multiple divs and send their content to php file

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.

difficulty with Javascript show/hide

I have a foreach loop in php that searches through a directory, finds any other directories, and then using hide/show in javascript, the subdirectories names are made into links that drop down to reveal the files inside of that specific subdirectory. I hope that makes sense. The problem I have is that because I am using a loop to find any present subdirectories, I can’t give each of the subdirectories a different id. As a result, all of the links have the id of the first link and when any of them are clicked, the first link always drops down. Do I need to use JQuery for this?
<!--Code for the javascript part:-->
<?php
<script language="javascript">
function showOrHide(){
var div = document.getElementById("showOrHideDiv");
if (div.style.display == "block"){
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
?>
<!-- A subdirectory has been found and is called $subDir -->
<!-- Below is the show/hide part of my html/php code -->
<?php echo $subDir;?>
<div id="showOrHideDiv" style="display: none">
<!-- The rest of the code that prints the files from the subdirectory -->
</div>
One approach would be to use a counter and use that to vary the IDs:
<?php echo $subDir;?>
<div id="showOrHideDiv_<?php echo $counter;?>" style="display: none">
Then your javascript changes:
<script language="javascript">
function showOrHide(num){
var div = document.getElementById("showOrHideDiv_" + num);
if (div.style.display == "block"){
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>

Jquery - Open a new window with content from the current page

I'm trying to create a 'print' button to open a new window and display a PHP Variable in it.
The code below is looped through the PHP script as many times as there are tickets, however I can't seem to get the correct number to display when the window opens (the number that displays in the print link is correct - but when the new window is opened it's incorrect).
<script type='text/javascript'>
jQuery(function($) {
$('a.new-window').click(function(){
var recipe = window.open('','PrintWindow','width=600,height=600');
var html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + $('<div />').append($('#ticket').clone()).html() + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
Print <?php echo $EM_Booking->get_spaces() ?>
<div style="display:none;">
<div id="ticket"><?php echo $EM_Booking->get_spaces() ?>
</div>
</div>
why not try something like this:
<a href="#" class="new-window">Print <?php echo $EM_Booking->get_spaces() ?>
<div class="ticket" style="display:none">
<?php echo $EM_Booking->get_spaces() ?>
</div>
</a>
<script>
jQuery(function ($) {
$('a.new-window').click(function () {
var btn = $(this),
ticket = btn.find('.ticket').html(),
recipe = window.open('','PrintWindow','width=600,height=600'),
html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + ticket + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
But much better solution would be to give a button a unique ID, and onclick open an existing (php-generated) page from the server passing that ID, e.g. /getBooking.php?id=123 and that page would output whatever's needed.

jquery drag and drop with database

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

change the content of div after submitting data to mysql

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
}

Categories