I am using php and mysql database for my website.
In my website I have four different menu. In that each menu have single div which has to refresh after clicking to it.
Here refresh mean it call php file which has functionality like insert,delete and display the specific contain from database.
My code is refreshing whole page instate of div refresh.
Here is my sample code:
My mainpage.php
<div>
<ul id="headerMenu" class="menu">
<li rel="menu1"><a href="" >About</a></li>
<li rel="menu2">Display</li>
<li rel="menu3">Settings</li>
</ul>
</div>
<div id="menu1" class="menu_content">
<div class="right-pane">
<div class="details">
<?php include('about.php'); ?>
</div>
<div id="menu2" class="menu_content">
<div class="right-pane">
<div class="details">
<?php include('display.php'); ?>
</div>
<div id="menu3" class="menu_content">
<div class="right-pane">
<div class="details">
<?php include('Settings.php'); ?>
</div>
My display.php
<?php
/* fetched latest data from database is done */
/* if i use header it going to main page about div */
?>
Now I want to display data in my display div.
Can any one please tell me how to achieve this?
Thank you.
Now Try this code.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "button[class='disp']" ).click(function() {
$(".details").load('profile.php');
});
});
</script>
</head>
<body>
<div>
<ul id="headerMenu" class="menu">
<li rel="menu1"><button>About</button></li>
<li rel="menu2"><button class="disp">Display</button></li>
<li rel="menu3"><button>Settings</button></li>
</ul>
</div>
<div id="menu1" class="menu_content">
<div class="right-pane">
<div class="about">
<?php //include('about.php'); ?>
</div>
</div>
<div id="menu2" class="menu_content">
<div class="right-pane">
<div class="details">
<?php include('profile.php'); ?>
</div>
</div>
</div>
<div id="menu3" class="menu_content">
<div class="right-pane">
<div class="Settings">
<?php //include('Settings.php'); ?>
</div>
</div>
</div>
</div>
</body>
</html>
Just add profile.php like that.
<?php echo rand(1, 9999); ?>
Do not forget to add JQuery. http://jquery.com/download/
Hope it will help you.
Thanks
You can do that easily with ajax.
Example for one DIV:
<html>
<body>
<script type="text/javascript">
function Ajax(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();// For Firefox, Opera 8.0+, Safari and Chrome
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // For Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("No AJAX!!!");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
setTimeout('Ajax()',10000);
}
}
xmlHttp.open("GET","http://www.examplepage.com/the_page_that_contains_the_div_content",true);
xmlHttp.send(null);
}
window.onload=function(){
setTimeout('Ajax()',10000);
}
</script>
<div id="ReloadThis">Default text</div>
</body>
</html>
try
$('.menu_content').on('click',function(e){
e.stopPropagation();
var $menu_to_load=$(this).children('.right-pane .details')
$menu_to_load.load( $menu_to_load.attr('id'));
});
/*make sure your div with class "detail" have id of the page you want to call for them */
Put all your functionality in php together print it in json format json_encode(outputdatafromphp); get that value from your ajax function in javascript and make your menu div tag as clickable inside the success function
`
$.ajax({
url:url,
type:'post',
dataType:'json',
success:function(out){
$('#menu1').click(out,function(){
$.each(out,function(ie,value){
alert(value.data);
}
}
$('#menu2').click(out,function(){
}
});
What lbu said.
Use $.ajax to do a call to a php program that will return the data you want. for this example, hold it in var ajax_data
On .success event of ajax call, stuff the contents into the correct div like this:
<!-- html definition of display div -->
<div id="displaystuff"></div>
...
// script:
$('#displaystuf').html(ajax_data)
PHP is on the server side, so it can only generates "pages",.. If you want to modify the content of a "page" without refresh the page itself, you have to use javascript to make ajax request. So you can insert a php response in the HTMLElement you want.
It's easyer with jQuery.
http://api.jquery.com/jquery.ajax/
Related
Loading comments others automatically like facebook
**php code updated **
<section class="panel-body">
<div class="container">
<div class="comment">
<div class="commenter" name="comments">
<img width="80px" height="80px" src="uploads/<?php echo $row['photo']; ?>">
</div>
<div class="comment-text-area">
<textarea class="textinput"id="comment" name="comments" placeholder="Comment Here......"></textarea>
<button type="submit" class="butn"name="compost">post comment</button>
</div>
</div>
</div>
</div>
</fotm>
<div id="comments">
<?php include'cajax.php'; ?>
</div>
</section>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#comments').load('cajax.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#comments').load('cajax.php');
refresh();
}, 1000);
}
</script>
how to load comments automatically without page refreshing I know its
possible with ajax but how to implement code please help us
first create another php file named comments.php or whatever you want and cut and paste the code that fetch the comment from DB in that file
And in your main file where you want to show comments create a div , id="comments" or whatever you want .. and inside that div include the new php file like this
<div id="comments">
<?php include'comments.php'; ?>
</div>
now above that code paste the following javascript code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#div_name').load('filename.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#div_name').load('filename.php');
refresh();
}, 1000);
}
</script>
Replace the div_name with the name of your div and filename.php .. with your file name
I have three div tags, on click of a link I want to reload the second div tag only instead of loading the complete page, I want to keep the first and third div tag as static and second div tag should be dynamic?
<div class="first">
<?php echo $data->hospital_name;?>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
First of all you should make the difference between your divs by making their IDs unique as Billy said in the comment. Classes are used to make a common selector for all elements. Create your HTML like below:
<div id="first">
<?php echo $data->hospital_name;?>
</div>
<div id="second">
//content//
<div>
<div id="third">
//content//
<div>
Now to load data in only a particular div, you can use Ajax request in three ways using jQuery.
$('#second').load("load.php");
OR
$.post('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.get('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.ajax({
url:"load.php";
data: yourDataObject,
success: function(data){
$('#second').html(data);
}
});
Hope all above will help a little
You can try load
$(".second").load("yourhtml.html");
Give id to second div and then try following
#secondDivId::after {
content:"";
}
it will refresh the second div.
Try this it's working :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
$(".second").load("abc.html");
});
});
</script>
</head>
<body>
<div class="first">
<a id="link" href="patientLogin/patientVisit_details/<?php echo $data->patient_visit_id;?>"><?php echo $data->hospital_name;?></a>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
</body>
</html>
Here, abc.html is the file where your content exist that you want to display in <div class="second">...</div> on click the link.
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
I'm trying to slide one div closed, and another open at the same time using a button. here is my div code:
<div class='toggle_parent'>
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='toggled_content' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
And then the jQuery is as follows:
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none')
$('.toggled_conent').slideDown().css('display', '')
});
});
I've tried so much that my brain doesn't function anymore and I know the answer will be "so easy I should have figured it out", but I'm stuck. I want the toggled content to appear and the toggleHolder to go away when you press the toggler.
Thanks in advance!
Hide your hidden content via javascript instead of the style, and get rid of the .css calls:
$(document).ready(function(){
$('.toggled_content').hide();
$('.toggler').click(function() {
$('.toggleHolder').slideUp();
$('.toggled_content').slideDown();
});
});
Also you had a typo in your .toggled_content selector.
Here's a working JSFiddle.
Have you tried this?
$('.toggler').click(function() {
$('.toggleHolder').slideUp().hide();
$('.toggled_conent').slideDown().show();
});
Please change class name = "toggled_content" to something else in div and jquery so this looks like
jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none');
$('.haveOther').slideDown();
});
});
</script>
HTML
<div class='toggle_parent' style="background-color:#999;">
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='haveOther' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
This will work for you.
<div data-role="page" id="one" data-theme="a" >
<div data-role="content" id="content">
<script type="text/javascript" >
$(document).ready(function() {
$('#content').bind('scroll', function () {
alert(0);
});
});
In this i have set a alert on scroll, but its not working but its working after manual refresh of page.
Dont know whats the reason? Any help.
PS: the div's CSS property of position is "absolute" - Does this anything to do with the above problem?
Your problem is somewhere else, the following jsfiddle works without problems http://jsfiddle.net/mendesjuan/jBeE6/
<div data-role="page" id="one" data-theme="a" >
<div data-role="content" id="content">
<script type="text/javascript" >
$(document).ready(function() {
$('#content').bind('scroll', function () {
console.log("Here it is");
});
});
</script>
Here is a lot of content... a lot more goes here
</div>
</div>