i have a problem similar to my previous question but now its different
jquery : progress bar show in html
var auto_refresh = setInterval(
function ()
{
$('#battery').load('https=://localhost/userinfo/battery_level/');
}, 10000);
i dont want to load the div ... i want to get the result and want to display in my progress bar here
$('.demo-progress').progress(data);
i am geting a value here "10"
want to do something like this
var auto_refresh = setInterval(
function ()
{
var data = $('#battery').load('https=://localhost/userinfo/battery_level/');
}, 10000);
$('.demo-progress').progress(data);
Try this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$("#progressbar").progressbar({ max: 100, value: 10 });
$("#twenty").click(function () { loadFile("20"); });
$("#fifty").click(function () { loadFile("55"); });
$("#eighty").click(function () { loadFile("80"); });
});
function loadFile(file) {
$.get(file + ".txt", function (data) {
var value = parseInt(data, 10);
$('#progressbar').progressbar("option", "value", value);
});
}
</script>
</head>
<body>
<div id="progressbar">
</div>
<input type="button" id="twenty" value="Load to 20%" />
<input type="button" id="fifty" value="Load to 50%" />
<input type="button" id="eighty" value="Load to 80%" />
</body>
</html>
From the jquery page:
This method (.load) is the simplest way to fetch data from the server.
It is roughly equivalent to $.get(url, data, success) except that it
is a method rather than global function and it has an implicit
callback function.
The reason why I am using .get is because of the last part, the implicit callback function, which let's me know when the function has ended, and I can then update the progressbar.
Related
I just need to display names of the array using ajax. Following code is working but the result ( Nilantha Ruwan Nimal Shamitha Alex) is just display and disappears.
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top:50px";>
<form >
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Enter Name....">
</div>
<div class="form-group">
<button class="btn btn-success" id="btn">Enter</button>
</div>
</form>
<div class="msg"></div>
</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
var name = $("#name").val();
$.post("ajax.php",{ajax_name:name},function(response){
$(".msg").html(response);
})
.fail(function(error){
alert(error.statusText);
})
})
})
</script>
</body>
</html>
ajax.php
<?php
if(isset($_POST['ajax_name'])){
$store = array("Nilantha","Ruwan","Nimal","Shamitha","Alex");
foreach($store as $names) {
echo $names,"<br>";
}
}
?>
Try the following code.
<script type="text/javascript">
function submit() {
jQuery("form").submit(function(e) {
e.preventDefault();
var name = jQuery("#name").val();
jQuery.ajax({
type: 'POST',
url: 'ajax.php',
data: {ajax_name:name},
success: function(response) {
jQuery(".msg").html(response);
jQuery('#name').val('');
},
error: function() {
console.log("Something wrong");
}
});});
}
jQuery(document).ready(function() {
submit();
});
</script>
I would suggest looking at the network tab of Chrome Devtools and ensuring that the AJAX call isn't running twice. I would think that if the query ran twice but the second one did not have any name attached then it would return blank once the first one had received its response.
Simply the question is that, how to off all events with one call, for example if I have another events like 'mouseleave, mouseenter, keyup, keydown ...'.
What I'm doing here is that each time the dialog is showed I turn off (off) the events, this 'off' works well with click, but I want a code to turn off all events with one call, I tryed: $('.dialog').off('**'); but it doesn't works. If I don't use off I get multiple calls to click (multiple hello worlds).
I have a code like this:
myform.php
<script type="text/javascript">
$(document).ready( function () {
$('.dialog').off('click');
$('.dialog').on('click', '.mybutton', function() {
alert('hello world');
});
});
</script>
<input type="button" class="mybutton" value="click me!"/>
html:
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
function openDialog()
{
$.post( '/myform.php', null, function (data) {
$('.dialog').html( data );
$('.dialog').show();
});
}
function closeDialog()
{
$('.dialog').hide();
$('.dialog').html('');
}
});
</script>
</head>
<body>
<div class="dialog" style="display:none">
</div>
<input type="button" onclick="openDialog();" value="show dialog!" />
<input type="button" onclick="closeDialog();" value="close dialog!" />
</body>
</html>
You can pass no arguments and it unbinds all of them.
$("element").off();
jsFiddle.
I think that the unbind() method would work here.
http://api.jquery.com/unbind/
"removes all previously attached event handlers
I have a dialog ($('.dialog').show()), that writes a form ($.post('/form/xyz', null, function (data) { $('.dialog').html( data );} )). That form has an script (javascript/jquery) like this:
<script type="text/javascript" src="myform/script.js">
<form>
<input type="text" value="click me!" id="clickme" />
</form>
The script has the following code:
$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});
The problem is: each time the dialog is showed I need to re-execute the script but when I click #clickme I get the alert showed the times that the script was executed.
I never noted this problem (I don't know why) but now that is happening. I'm working with jQuery 1.9.2, and I'm thinking to use the function (preventPropagation), but I think this isn't reliable because I should need to do this at each 'on' event. In addition, I believed that doing an 'script loading history' will solve the problem to control that, but I have the problem that when I need to execute functions when the form is loaded I will cannot re-execute automatically as well as I'm doing now.
What's the solution?
Full example:
HTML
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
$('#open-dialog').on('click', function () {
$.post( '/server-form.php', null, function (data) {
$('.dialog').html( data );
});
});
});
</script>
</head>
<body>
<div class="dialog">
</div>
<input type="button" value="Open dialog" id="open-dialog"/>
</body>
</html>
PHP (server-form.php)
<script type="text/javascript" src="dynamic-script/30a2f63d6276a21db19782b2d8c93363.js">
<form>
<input type="text" value="click me!" id="clickme" />
</form>
*DYNAMIC-SCRIPT dynamic-script/30a2f63d6276a21db19782b2d8c93363.js *
$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});
That's all!!!
You should try this:
$(document).ready(){
$("#clickme").click(function(){
alert("you've clicked me!");
})
}
I found this script from (http://w3lessons.info/2012/01/03/facebook-like-fetch-url-data-using-php-curl-jquery-and-ajax/) Problem is that i want to do in loop with multiple urls.
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.livequery.js"></script>
<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// delete event
$('#attach').livequery("click", function(){
if(!isValidURL($('#url').val()))
{
alert('Please enter a valid url.');
return false;
}
else
{
$('#load').show();
$.post("curl_fetch.php?url="+$('#url').val(), {
}, function(response){
$('#loader').html($(response).fadeIn('slow'));
$('.images img').hide();
$('#load').hide();
$('img#1').fadeIn();
$('#cur_image').val(1);
});
}
});
// next image
$('#next').livequery("click", function(){
var firstimage = $('#cur_image').val();
$('#cur_image').val(1);
$('img#'+firstimage).hide();
if(firstimage <= $('#total_images').val())
{
firstimage = parseInt(firstimage)+parseInt(1);
$('#cur_image').val(firstimage);
$('img#'+firstimage).show();
}
});
// prev image
$('#prev').livequery("click", function(){
var firstimage = $('#cur_image').val();
$('img#'+firstimage).hide();
if(firstimage>0)
{
firstimage = parseInt(firstimage)-parseInt(1);
$('#cur_image').val(firstimage);
$('img#'+firstimage).show();
}
});
// watermark input fields
jQuery(function($){
$("#url").Watermark("http://");
});
jQuery(function($){
$("#url").Watermark("watermark","#369");
});
function UseData(){
$.Watermark.HideAll();
$.Watermark.ShowAll();
}
});
function isValidURL(url){
var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
if(RegExp.test(url)){
return true;
}else{
return false;
}
}
</script>
<input type="hidden" name="cur_image" id="cur_image" />
<div class="wrap" align="center">
<div class="box" align="left">
<input type="text" name="url" size="64" id="url" />
<input type="button" name="attach" value="Attach" id="attach" />
<div id="loader">
<div align="center" id="load" style="display:none"><img src="load.gif" /></div>
</div>
</div></div>
Is there any i can do loop and load the different different url same time? Please help me!
In JavaScript who can't create thread.
So you can't fetch all those "different url at same time".
But you can "almost" achive the same thing using the event loop to request them quickly one by one without waiting for the HTTP response. Who end up being very quick !
Let's say for exemple you want to featch 3 url:
www.mysite.com/myurl1
www.mysite.com/myurl2
www.mysite.com/myurl3
You can write something like that using jQuery:
$.get('http://www.mysite.com/myurl1', function(data) {
alert('html for site 1:' +data);
});
$.get('http://www.mysite.com/myurl2', function(data) {
alert('html for site 2:' +data);
});
$.get('http://www.mysite.com/myurl3', function(data) {
alert('html for site 3:' +data);
});
It will request the 3 page "almost" in the same time.
The first HTTP request will call the "alert('html for site x:...');"
but you don't know witch one will arrived first.
Anyway you probably need something more flexible.
Let's say you want to request 50,000 pages requesting them in "almost" the same time using 200 simultaneous request.
You can write something like that in JavaScript:
function getNextUrl(){
urlIndex ++;
if(urlIndex >= stopAtIndex){
//nothing to do anymore in the event loop
return;
}
$.get('http://www.mysite.com/myurl'+urlIndex, function(data) {
// html receivend here
getNextUrl();
});
}
/* program start here */
int urlIndex = 0;
int stopAtIndex = 50000;
int simultaneousRequest = 200;
for( var i = 0; i < simultaneousRequest; i++ ) {
getNextUrl();
}
Just to give some context I'm a self taught programmer with no formal education or experience so apologise for my code in advance...
Code below attempts to turn a site designed for an iphone into a single page site (i.e. using ajax). I'm having an issue with multiple form submissions... looks like this is occurring when clicking the submit button on form #id2.
I've done some research and was thinking of implementing the below jquery solution for preventing multiple form submissions:
How to prevent form from submitting multiple times from client side?
and this php solution for preventing multiple form submissionson the server side:
http://www.ideologics.co.uk/programming/how-to-prevent-multiple-form-submissions-in-php
Also some sites suggest that the ajax post code should set async to false and cache to false but I'm not entirely sure of the reason and whether this is applicable in my case.
The reason I had to use the delegate function is because clicking submit on form #id1 loads a form with id#2... I tried using the on function which jquery site says supersedes the delegate function but this didn't seem to work. I'm loading version 1.8.2 using google CDN.
var startUrl = 'menu.php';
$(document).ready(function(){
loadPage(startUrl);
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
if (url == startUrl) {
var element = ' #header ul';
} else {
var element = ' #content';
}
$('#container').load(url + element, function(){
var title = $('h2').html() || 'Menu';
$('h1').html(title);
$('h2').remove();
$('.leftButton').remove();
if (url != startUrl) {
$('#header').append('<div class="leftButton">Menu</div>');
$('#header .leftButton').click(function(e){
$(e.target).addClass('clicked');
loadPage(startUrl);
});
}
$("#container").delegate("a", "click", function(e){
var url = e.target.href;
if (url.match(/example.com/)) {
e.preventDefault();
loadPage(url);
}
});
$("#container").delegate("form", "submit", function(event){
event.preventDefault();
});
$('#id1').submit(function(){
var formData = $(this).serialize();
$.post('processform1.php',formData,processResults);
function processResults(data) {
$('#id1').remove();
$('#container').html(data);
}
});
$("#container").delegate("#id2", "submit", function(event){
var formData = $(this).serialize();
$.post('processform3.php',formData,processResults);
function processResults(data) {
$('#id2').remove();
$('#container').html(data);
}
event.preventDefault();
});
$('#progress').remove();
});
}
Below is the index page:
<html>
<head>
<title>Title</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
<link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
<link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="iphone.js"></script>
</head>
<body>
<div id="header">
<h1>Menu</h1>
</div>
<div id="container"></div>
</body>
</html>
Just place this in your JS for the page the submit button is on
<script type="text/javascript">
$(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
$("input[type='submit']").attr("disabled", true).val("Please wait...");
return true;
})
})
</script>
You may need to use an on() event handler or do other tinkering depending on if the form is generated on page load.