I want to know if I can post a data in a form to a specific div on other page. Let say example,
form.php
I have this code in jQuery:
$("#hod").change(function(){
var hod = $('#hod').val();
$.post('calc.php #content',
{
hod : hod
}, function(data){
$('#designation').html(data)
});
});
calc.php
<?php
if(isset($_POST['budget'])){
$budget=$_POST['budget'];
$paid=$_POST['paid'];
$ammount=$_POST['ammount'];
$gst=$_POST['gst'];
}
$total=$budget+$paid+$ammount+$gst;
echo $total;
?>
<div id="content">
<?php
if(isset($_POST['hod'])){
$hod=$_POST['hod'];
}
require '../db_connection/connection-intra.php';
$sql="SELECT s.nama,s.staff_id,gp.jawatan,j.nama_jabatan from staff s INNER JOIN gred_pekerja gp ON s.gred_id=gp.gred_id INNER JOIN jabatan j ON j.j_id=s.j_id WHERE s.staff_id='$hod'";
$result=mysqli_query($conn, $sql);
if(!$result) {
die(mysqli_error($conn));
}
if(mysqli_num_rows($result) > 0){
while($row=mysqli_fetch_assoc($result)){
$jawatan=$row['jawatan'];
$jabatan=$row['nama_jabatan'];
}
}
mysqli_free_result($result);
mysqli_close($conn);
echo $jawatan." ".$jabatan;
?>
</div>
If I send the post value to page calc.php, it will also take the value outside of the <div id="content"></div>. Is there a way to only send the content on the <div>
Related
I fetched some div elements from database with this code :
<?php
$getTickets = mysqli_query($db, "SELECT * FROM usersTicket");
while ($row = mysqli_fetch_array($getTickets)) {
?>
<div class="tickets">
<div class="ticket"><?php echo $row['ticketText'] ?></div>
</div>
<?php
}
?>
How can I get the number of these div elements that fetched from database ?
Use this if you want to get the number of divs returned from the database.
$number_of_divs = mysqli_num_rows($getTickets);
You could use jQuery for that:
$(document).ready(function() {
var ticketclassnr = $(".tickets").length;
});
In my code below I am trying to create a load more button using AJAX. I have main.php which includes PHP code for calling blogs from database initially, some jQuery code and a load more button. Then I have ajax_more.php which calls more data from database when load more is clicked. Load more buttons are displayed perfectly and when clicked they change to loading and then disappear. Nothing else happens and main.php still shows those two initial blogs which we call first. Please look into code and help where this code has gone wrong.
main.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.show_more', function () {
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type: 'POST',
url: 'ajax_more.php',
data: 'id=' + ID,
success: function (html) {
$('#show_more_main' + ID).remove();
$('.columns').append(html);
}
});
});
});
</script>
<?php
$query = "
SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category
FROM blogs
INNER JOIN categories
ON categories.category_id=blogs.category_id
WHERE category='cat1' OR category='catt2' OR category='cat3' OR category='cat4'
ORDER BY blogs_id desc
LIMIT 2
";
$result = mysqli_query($con,$query);
$rowCount = mysqli_num_rows($result);
if($rowCount > 0){
while ($row = mysqli_fetch_assoc($result)) {
$blogs_id = $row['blogs_id'];
$title = $row['title'];
$body = $row['body'];
$posted_by = $row['posted_by'];
$full_name = $row['full_name'];
$bio = $row['bio'];
$posted = $row['posted'];
echo "
<div class='db'>
<h2>$title</h2>
<p>$body</p>
<p>$bio</p>
</div>
";
?>
<div class="show_more_main" id="show_more_main<?php echo $blogs_id; ?>">
<span id="<?php echo $blogs_id; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
ajax_more.php
<?php
if(isset($_POST["blogs_id"]) && !empty($_POST["blogs_id"])) {
$query = "
SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category
FROM blogs
INNER JOIN categories ON categories.category_id=blogs.category_id
WHERE category='Entertainment' OR category='Politics' OR category='Sports' OR category='Travel'
AND blogs_id < ".$_POST['blogs_id']."
ORDER BY blogs_id DESC
LIMIT 2
";
$result = mysqli_query($con,$query);
$rowCount = mysqli_num_rows($result);
if($rowCount > 0){
while ($row = mysqli_fetch_assoc($result)) {
$blogs_id = $row['blogs_id'];
$title = $row['title'];
$body = $row['body'];
$posted_by = $row['posted_by'];
$full_name = $row['full_name'];
$bio = $row['bio'];
$posted = $row['posted'];
echo "
<div class='db'>
<h2>$title</h2>
<p>$body</p>
<p>$bio</p>
</div>
";
?>
You should change your query to this
$query = "SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category FROM
blogs INNER JOIN categories ON categories.category_id=blogs.category_id WHERE
(category='Entertainment' OR category='Politics' OR category='Sports' OR category='Travel')
AND blogs_id < " . $_POST['blogs_id'] . " ORDER BY blogs_id DESC LIMIT 2";
All the OR's must be enclosed in the brackets....
You can follow below technique to load more data with just replacing morebox html.
blog.php
<div class="tutorial_list">
<!-- LOAD YOUR PHP BLOG DATA -->
<div class="loading"><img src="fb-load.gif"/></div>
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
</div>
<script>
$(document).on('click', '.show_more', function() {
{
var ID = $(this).attr("id");
if (ID) {
$('.morebox').hide();
$('.loding').show();
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastpost=" + ID,
cache: false,
success: function(html) {
$('.loading').hide();
$('.tutorial_list').append(html);
$("#show_more" + ID).remove(); // removing old more button
}
});
} else {
$(".morebox").html('The End'); // no results
}
return false;
});
</script>
ajax_more.php
<!-- LOAD YOUR PHP BLOG DATA WITH lastpost ID and remember to add below code for load more -->
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
I have orders table in my database that has id,name and status columns.Then i have html table representing my orders table and inside i have
buttons that i want to update the status column using ajax to make it asynchronous displaying the changes in the html table rigth away.How can i
achieve this?I have tried running ajax functions onclick of a button passing order id as an argument and then using get method to fetch the result but
something is wrong with the document.getElementsByClassName method it is not populating my status field in the html table nor the database is being changed.
orders.php
$query=mysqli_query($conn,"SELECT*FROM orders");
echo "<table border='1'>";
echo "<th>Id</th><th>Name</th><th>Status</th><th>Considering</th><th>Accepted</th>";
while($row=mysqli_fetch_array($query)){
$id=$row['id'];
$name=$row['name'];
$status=$row['status'];
echo "<tr>
<td>$id</td><td>$name</td><td><div class='status'>$status</div></td><td><buttton onclick=\"considering('$id')\">Considering</button></td>
<td><buttton onclick=\"accepted('$id')\">Accepted</button></td>
</tr>";
}
admin.php
<?php
include "include/connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<script>
function considering(one){
var a=new XMLHttpRequest();
a.open("GET","considering_parser.php?one="+one,true);
a.onreadystatechange=function(){
if(a.readyState==4 && a.status==200){
var returndata=a.responseText;
var x=document.getElementsByClassName("status");
for(var i=0;i<x.length;i++){
x[i].innerHTML=returndata;
}
}
}
a.send(null);
}
function accepted(two){
var b=new XMLHttpRequest();
b.open("GET","accepted_parser.php?two="+two,true);
b.onreadystatechange=function(){
if(b.readyState==4 && b.status==200){
var returndata=b.responseText;
var x=document.getElementsByClassName("status");
for(var i=0;i<x.length;i++){
x[i].innerHTML=returndata;
}
}
}
b.send(null);
}
</script>
</head>
<body>
<div id="content">
<?php
include "orders.php";
?>
</div>
</body>
</html>
considering_parser.php
<?php
include "include/connect.php";
$id=$_GET['one'];
$query=mysqli_query($conn,"UPDATE orders SET status=1 WHERE id='$id'");
$query=mysqli_query($conn,"SELECT * FROM orders WHERE id='$id'");
while($row=mysqli_fetch_array($query)){
$one=$row['status'];
echo $one;
}
?>
accepted_parser.php
<?php
include "include/connect.php";
$id=$_GET['two'];
$query=mysqli_query($conn,"UPDATE orders SET status=2 WHERE id='$id'");
$query=mysqli_query($conn,"SELECT * FROM orders WHERE id='$id'");
while($row=mysqli_fetch_array($query)){
$two=$row['status'];
echo $two;
}
?>
Help would be appreciated
Ok i solved it thanks to Fred-ii's suggestion to use multi_query()
orders.php
$query=mysqli_query($conn,"SELECT*FROM orders");
echo "<table border='1'>";
echo "<th>Id</th><th>Name</th><th>Status</th><th>Considering</th><th>Accepted</th>";
while($row=mysqli_fetch_array($query)){
$id=$row['id'];
$name=$row['name'];
$status=$row['status'];
echo "<tr>
<td>$id</td><td>$name</td><td><div class='status$id'>$status</div></td><td><buttton onclick=\"considering('$id')\">Considering</button></td>
<td><buttton onclick=\"accepted('$id')\">Accepted</button></td>
</tr>";
}
admin.php
<html>
<head>
<script>
function considering(one){
var a=new XMLHttpRequest();
a.open("GET","considering_parser.php?one="+one,true);
a.onreadystatechange=function(){
if(a.readyState==4 && a.status==200){
var returndata=a.responseText;
var x=document.getElementsByClassName("status"+one);
for(var i=0;i<x.length;i++){
x[i].innerHTML=returndata;
}
}
}
a.send(null);
}
function accepted(two){
var b=new XMLHttpRequest();
b.open("GET","accepted_parser.php?two="+two,true);
b.onreadystatechange=function(){
if(b.readyState==4 && b.status==200){
var returndata=b.responseText;
var x=document.getElementsByClassName("status"+two);
for(var i=0;i<x.length;i++){
x[i].innerHTML=returndata;
}
}
}
b.send(null);
}
</script>
</head>
<body>
<div id="content">
<?php
include "orders.php";
?>
</div>
</body>
</html>
considering_parser.php
<?php
include "include/connect.php";
$id=$_GET['jedan'];
$query="UPDATE orders SET status=1 WHERE id='$id';
SELECT * FROM orders WHERE id='$id';";
if (mysqli_multi_query($conn,$query))
{
do
{
// Store first result set
if ($result=mysqli_store_result($conn))
{
while ($row=mysqli_fetch_array($result))
{
$one=$row['status'];
echo $one;
}
}
}
while (mysqli_more_results($conn) && mysqli_next_result($conn));
}
mysqli_close($conn);
?>
Similar code for the accepted_parser.php.Thank you Fred-ii
I am trying to display a vertical menu(navigation menu) which has a set of categories and subcategories.
I am able to fetch data from database, But failing to place the subcategories under it's parent exactly.
I am able to display category and its sub-categories. But i need the subcategories to be displayed only when mouse hover or clicked on Category.
Here is the snapshot what i wanted to do
Electronics --> when clicked on Electronics it must show the list under Electronics category
Automobiles has no sub categories *Not all categories have subcategories.
Here is my code:
Model:
function getCategories()
{
$this->db->select();
$query=$this->db->get('ci_tbl_categories');
if ($query->num_rows() > 0)
{
$result =$query->result_array();
for($i=0;$i<count($result);$i++)
{
$query1=$this->db->query("select * from ci_tbl_subcategory where cat_id='".$result[$i]['cat_id']."'");
if($query1->num_rows() > 0)
{
$result[$i]['sub']=$query1->result_array();
}
else
{
$result[$i]['sub']=array();
}
}
//print_r($result);
return $result;
}
else
{
return $query->result_array();
}
}
Controller:
function categories()
{
$this->load->model('categories');
$result['res'] = $this->categories->getCategories();
//print_r($result['res']);
$this->load->view('category',$result);
}
View:
<script type="text/javascript">
$(document).ready(function(){
$("#main").click(function(){
$("#sub").slideToggle("slow");
// alert("clicked");
});
});
</script>
<body>
<div id="category" style="border-radius:5px; width:200px;background-color:#d2dbde; ">
<?php //echo count($res)."<br/>";?>
<div id="nav_head">Categories</div>
<?php for($a=0;$a<count($res);$a++)
{
//echo $row['cat_name']['subcat_name']."<br/>";
?><div id="main"><?php echo $res[$a]['cat_name'];?></div>
<?php
if(count($res[$a]['sub']) > 0)
{
?><div id="sub">
<?php for($b=0;$b<count($res[$a]['sub']);$b++) {?>
<div id="subcat"><?php echo $res[$a]['sub'][$b]['subcat_name'];?></div>
<?php }?>
</div>
<?php }} ?>
</div>
</body>
Many thanks
First of all, creating div's in a loop with a static id's won't work as you'll end up with multiple div's with the same id. Try using class names.
<div class="main">
<div class="sub">
Then you should be able to detect the click/mouseover and show/hide the sub
$(document).ready(function(){
$(".main").click(function(){
$(this).next('.sub').slideToggle("slow");
});
$(".main").mouseover(function(){
$(this).next(".sub").slideToggle("slow");
}).mouseout(function(){
$(this).next(".sub").slideToggle("slow");
});
});
I think 2 changes are require in your code.
In model replace '$i' with '$result[$i]['cat_id']'
<?php
for($i=0;$i<count($result);$i++){
$query1=$this->db->query("select * from ci_tbl_subcategory
where cat_id='".$result[$i]['cat_id']."'");
if($query1->num_rows() > 0)
{
$result[$result[$result[$i]['cat_id']]]['sub']=$query1->result_array();
}
else
{
$result[$result[$result[$i]['cat_id']]]['sub']=array();
}
}
?>
In view file [$b] is not required you can get output directly using following code :
<?php echo $res[$a]['sub']['subcat_name'];?>
Hope this will help you... :)
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
}