hello here i have i script but this dont work i caant update chat every second can you help me to update chat every second from database (pleasee no uppate div only text)
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
read.php
<?php
include("config.php");
$Data = "SELECT * FROM chat ORDER BY Time ASC";
$Result = mysqli_query($Connection, $Data);
while($row = mysqli_fetch_array($Result,MYSQLI_ASSOC))
{
echo '</br>' .$row['name'];
}
mysqli_free_result($Result);
mysqli_close($Connection);
?>
this is my code but my code when insert data in database my code not update data in html
Option 1:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat()
{
$.get("read.php")
.done(function(data)
{
//You can do futher checks here....
$("#Show_Data").html(data);
setTimeout(function() {updateChat();},1000);
})
.fail(function()
{
//error 404 or 500
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
Int the code above, when something wrong with the call it stops and it does not continues the executions.
Option2:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setInterval(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
The code aboce executed every 1000 miliseconds the ajax call regardless if it is sucessfull the call or not
You need to use setInterval instead of setTimeout (it runs only once).
If that doesn't help, please post any PHP/JavaScript errors that you are getting.
To make sure PHP errors are set to display, add error_reporting(E_ALL) to the top of your script.
To see JavaScript errors, open the Developer Tools (F12) in your browser and go to Console.
Related
I have two jquery events on click of button.but i want to perform only one event.So how can i do that.
my code is as follow.
<!DOCTYPE html>
<html>
<head>
<title>Demo #1</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<button id="mybtn">Some Button</button>
</div>
<script>
$("#mybtn").click(function(){
$("#mybtn").fadeOut();
});
</script>
<?php include('demo2.php'); ?>
</body>
</html>
Here is code for demo2.php
<script>
$("#mybtn").click(function(){
alert("i am in included in demo2");
});
</script>
now When i click on button Both Event is performed.so is there any way to perform one event that is store in current page not perform jquery that is included.
Create a variable to connect the selector to the event in page one do this
<script>
var selectFunction1=True;
$("#mybtn").click(function(){
if(selectFunction1===True){
$("#mybtn").fadeOut();
}
else{return false;}
});
</script>
And in demo2.php do this
<script>
var selectFunction2=True;
$("#mybtn").click(function(){
if(selectFunction2===True){
alert("i am in included in demo2");
}
else{return false;}
});
</script>
I am trying to load my sidebar (sidebar.php) based on window size. The original code loaded the sidebar regardless of the window size. It works fine, but I need to change it so that it only loads the sidebar if the window is greater than a specific width. This was the original:
<?php include("sidebar.php"); ?>
I'm trying to use jQuery to accomplish loading ONLY if the window is big enough to show it. The #sidebarcontainer is the main div where all of the sidebar content goes. Here is what I have tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($(window).width() > 665){
$("#sidebarcontainer").load("sidebar.php");
}
});
</script>
This isn't working. The sidebar does not show at all on any size window.
And I think I need an else statement in there as well that says do not load if if it isn't greater than 665?
Just try this code 100% working and tested:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Load demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Response:</b>
<div id="sidebarcontainer"></div>
<script>
$(window).load(function(){
if($(window).width() > 665){
$( "#sidebarcontainer" ).load( "register.php", function( response, status, xhr ) {
if ( status == "success" ) {
$('#sidebarcontainer').show();
}
if ( status == "error" ) {
//var msg = "Sorry but there was an error: ";
//$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
$('#sidebarcontainer').hide();
}
});
}
else{
$('#sidebarcontainer').remove();
}
});
</script>
</body>
</html>
I want to send id to php script.I think my code is ok, but when i click on tag i get this error:
Notice: Undefined index: id in C:\xampp\htdocs\domaci\cao.php on line 4
here is my html + ajax code :
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
and this is cao.php:
<html>
<body>
<?php
$id = $_POST['id'];
echo $id;
?>
</body>
</html>
i really need this to get to work, please help me :)
Your $.post ajax is fine. The issue is when the anchor is clicked, you don't preventDefault or return false, to stop the browser redirecting to cao.php. When it redirects to cao.php, it is a GET request, and so triggers the undefined index notice because there is no post data.
Add return false or preventDefault:
$('a').click(function(e){
e.preventDefault();
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
Look at your browser's console (F12) on the Network tab, to see the response of the ajax.
Try it now.
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('data-url'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="#" data-url="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="#" data-url="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
Your link redirects you, so simpe do this:
e.preventDefault();
Also its better to have variables (for future), here is EXAMPLE
Try this one will work for you:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post('cao.php', { id : $(this).attr('id') },function(data){
alert(data);
});
});
});
</script>
</head>
<body>
<a href="#" id="Barselona" >Barselona</a>
</br>
<a href="#" id="Beograd" >Beograd</a>
</body>
</html>
AT cao.php page
<?php
$id = $_POST['id'];
echo $id;die;
?>
just try print_r($_POST) in cao.php & check the values are posting
$id=$_POST["id"];
i want to refresh a page in php(which is executing the sql statements) to p refreshed every 10 seconds. I load the page in a div like:
<div id="test"> <?php echo showPage() ?></div>
So how can i just refresh this duv that will make the data fetch by the sql refresh..
thank you
You can include a <meta http-equiv="refresh" content="10"/> tag in the head tag, or, if you do not have access to the head tag, you can insert a script tag anywhere in the page like this one:
<script type="text/javascript">
setTimeout(function() {
location.reload();
}, 10000);
</script>
<script type="text/javascript"><!--
$(document).ready(function() {
setTimeout('$(\'#test\').load(\'abc.php #test >* \' )', 10000)
});
//--></script>
Write your script in the below way
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#test').load('test.php');
}, 10000); // refresh every 10000 milliseconds
</script>
<body>
<div id="test"> </div>
</body>
I'm trying to keep true to the DRY principle by moving my jquery auto complete code to a scripts.js file but i'm having trouble getting the auto complete functionality to work when i move it.
Here's how its setup at the moment.
add form
<head>
<?php
require_once ('includes/connect-db.php');
require_once ('includes/functions.php');
?>
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#datepickerID').datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'yy-mm-dd'
})
<?php $productArray = autoComplete();?>
$(function() {
var js_products_array = <?php echo json_encode($productArray); ?>;
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
});
});
</script>
</head>
I'm uncertain as to how to get this to work between the addForm.php and scripts.js when there is embeded php code in the javascript, if that makes sense.
You will have to keep js_products_array outside of the .js file as it contains data from PHP scripts and initilize the autocomplete() on document ready.
so you can keep only
<?php $productArray = autoComplete();?>
<script type="text/javascript">
var js_products_array = <?php echo json_encode($productArray); ?>;
</script>
and in your file.js you can add
$('document').ready(function() {
$('#datepickerID').datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'yy-mm-dd'
})
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
});