I do have a ajax code will work on a click of button. but I need it should automatically load function in between every 10 seconds. how can I rewrite below code??
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("#generate").click(function(){
$("#quote p").load("script.php");
});
});
</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
<input type="submit" id="generate" value="Generate!">
</div>
</body>
</html>
$(document).ready(function(){
setInterval(function(){
$("#quote p").load("script.php");
}, 10000);
});
This will call $("#quote p").load("script.php") (or more accurately, the anonymous function that contains this call) every 10 seconds (the second argument to setInterval is specified in milliseconds).
You should be able to do this:
setInterval(function () {
$("#quote p").load("script.php");
}, 10000);
Which will load script.php every 10 seconds into $('#quote p').
Related
I have this php page that rungs its script.
From the index page the user clicks a button and this page, after 10 seconds or so, shows the final result.
I would like to show a progress bar while the user waits.
This is the actual page:
<!DOCTYPE html>
<html>
<head>
<title>METAR LIRN</title>
<style>
h1 {
text-align: center;
}
.table {
display: table;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #808080;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="table">
<div>
<h1>METAR LIRN<h1>
</div>
<div>
<?php
$output = shell_exec('sh /var/www/html/weather.sh');
echo "<pre>$output</pre>";
?>
</div>
</body>
</html>
I had a look to other similar posts with no luck...
Thanks in advance!
Sure, here's a quick example:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Just some styles for the bar */
.loading-bar {
background: blue;
width: 300px;
height: 20px;
display: none;
}
.loading-bar.active {
display: block;
}
</style>
</head>
<body>
<button class="myBtn">Execute code!</button>
<div class="response"></div>
<div class="loading-bar"></div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
// Handle button click
$('.myBtn').on('click', function(){
$('input').val( "" );
// Inmediatly show your bar
var $loadingBar = $('.loading-bar');
$loadingBar.addClass('active');
// Then execute Ajax
$.ajax({
url: "test.php",
method: 'GET'
})
.done(function(data) {
// Display response data
$('div.response').html(data);
})
.fail(function(error) {
// Display error if fails
$('div.response').html(error);
})
.always(function() {
// Always hide loading bar when finish
$loadingBar.removeClass('active');
});
});
</script>
</body>
</html>
test.php:
<?php
sleep(2);
echo 'OK';
I want to add id to cloned img tag as I want to store the data of cloned object to database. can anyone help please..I also want to store the x and y positions provide by the user using javascript..I just want to know how to assign different id's to the cloned img tag.
Here is my code.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="include/jquery-ui.css">
<script src="include/jquery-1.10.2.js"></script>
<script src="include/jquery-ui.js"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height :500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id ="droppable">
</div>
</div>
</body>
</html>
here is dragndrop.js file.
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
i used jquery fancy box for previewing data from mysql .
I used the http://www.picssel.com/playground/jquery/postPreview_15jan13.html example .
I want to pass the "id=1" to the grid.php
When i pass outside the ,im able to see the preview ,since preview is inside the
form the value 1 is not able to pass to grid.php page.
How can i be able to achieve this?
Below is the code :
!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz / picssel.com" />
<title>POST preview</title>
<link rel="stylesheet" type="text/css" href="fancybox2.1.4/jquery.fancybox.css" />
<style type="text/css">
a {outline: 0 none; text-decoration: none;}
a img {border: 0 none;}
#wrap { width: 800px; margin: 20px auto; font-family: arial, sans-serif; font-size: 14px;}
.preview2 {width: 80px; padding: 5px; background: #ededed; display: block; line-height: 16px; text-decoration: none; text-align: center; border: solid 1px #ccc;}
label {display: block}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="fancybox2.1.4/jquery.fancybox.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function () {
$('.preview2').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: this.href, // preview.php
data: $("#postp").serializeArray(),
success: function (data) {
// on success, post (preview) returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: false,
width: 905,
height: 505,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); // ready
/* ]]> */
</script>
</head>
<form id="postp" method="post" action="">
<p>
<label for="login_name">data:
</label>
<input type="text" id="login_name" name="login_name" size="30" /><a class="preview2" href="grid.php" id="preview2">Preview</a>
</p>
<p>
<input type="submit" value="submit" />
</p>
</form>
The form id was missing .Got the value
I am trying to implement JQueryUI resizable. It's not working below is my tentative demo which I will implement later in actual code. Please help me to solve it. It's not working.
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
//var a = $("#resizable").html();
//alert(a);
$("#resizable").resizable();
});
</script>
</head>
<body>
<div id="demo-frame">
<meta charset="utf-8">
<div class="demo">
<div class="ui-widget-content ui-resizable" id="resizable">
<h3 class="ui-widget-header">Resizable</h3>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
</div>
</div>
</div>
</body>
It's the divs you have inside of your div that seem to be causing an issue. I commented them on on this jsFiddle http://jsfiddle.net/ta9N4/ and it appears to be working fine.
The method resizable() comes from jQuery UI API.
And you didn't include jQueryUI in your html page.
Go here to download it (or grab a link to this file), and include it like you did for jQuery (<script> tag).
I have this script
say index.html
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#quote p").load("script.php");
}, 10000);
});</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
</div>
</body>
</html>
script.php
<?php
echo "Hello how are you";?>
when loading index.html it is blank for 10 seconds and then it start functioning..how do I get rid of blank and how it can show instantly when browser loads??
Your setInterval() call works as designed: It says "in 10 seconds and then every seconds, do this...."
Add a separate "load" call to do the initial filling:
$(document).ready(function(){
$("#quote p").load("script.php"); // <--- Add this
setInterval(function(){
....