auto submit and refresh once - javascript

Pls help me to modify this one I want it to submit and refresh only once not every 10sec
<script type="text/javascript">
window.onload=function(){
var auto = setTimeout(function(){ autoRefresh(); }, 100);
function submitform(){
document.forms["myForm"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
}
}
</script>

window.onload = function() {
if (window.location.hash !== '#done') {
document.forms['myForm'].submit()
window.location.hash = 'done'
window.location.reload()
}
}
This will submit the form and reload the page only once. The hash will check the URL if it's already been submitted.

You can use local storage to check if the page is being loaded for the very first time.
$(function() {
var canSubmit = localStorage.getItem("can_submit");
if(!canSubmit) {
// first time loaded!
document.forms['myForm'].submit();
localStorage.setItem("can_submit","1");
window.location.reload();
}else{
//You can remove it if needed
localStorage.removeItem("can_submit");
}
});

Related

Refresh div only with server time rather than JS

I'm not sure if this is possible or not, but I am able to somehow have my div refresh in server seconds rather a jquery timer?
Or possibly to not have the timer start until all images have loaded?
This method works however it goes out of sync quite often, possibly because of some images still trying to load.
This code was sourced online
Markup:
refreshing in <div id="countDown"></div>
Refresh div after 10 seconds:
$(document).ready( function(){
$(' #avatars').load(' #avatars');
refresh();
});
function refresh()
{
setTimeout( function() {
$(' #avatars').load(' #avatars');
refresh();
}, 10000);
}
Jquery 15sec timer, resets back to 15 after 0
window.onload = function() {
startCountDown(10, 1000, myFunction);
}
function startCountDown(i, p, f) {
var pause = p;
var fn = f;
var countDownObj = document.getElementById("countDown");
countDownObj.count = function(i) {
// write out count
countDownObj.innerHTML = i;
if (i == 0) {
// execute function
fn();
startCountDown(10, 1000, myFunction);
// stop
return;
}
setTimeout(function() {
// repeat
countDownObj.count(i - 1);
}, pause);
}
// set it going
countDownObj.count(i);
}
function myFunction(){};
If you just want to delay the timer until your image loads couldn't you use the callback function on $('#avatars').load('#avatars'); to start the timer?
function refresh(){
$('#avatars').load('#avatars', function(){
setTimeout(function(){
refresh();
}, 10000);
startCountDown(10, 1000, myFunction);
});
}
I believe that this wouldn't start the count down until the images finish loading.
Call refresh function when load status is success.See for more in here http://api.jquery.com/load/
$("#avatars").load(url, function(responseTxt, statusTxt, xhr) {
// debugger;
if (statusTxt == "success")
{
refresh();
}
if (statusTxt == "error")
{
console.log("Error: " + xhr.status + ": " + xhr.statusText);
}
});

How to execute jquery function one after other

In below, When i click on button call the jquery click event,It will first shows the alerts upto this it works properly, In this i have call two functions(i.e. reload() and popup()) when i click on button it gives alerts and after that it execute popup() function and reload() function at a time.
My query is i want to execute first reload function(it reload only once) then execute popup function means when i click on button first reload the page only once and then show me my popup.
<script>
$(document).ready(function()
{
$('.button').click(function()
{
var href = $(this).val();
alert(href);
$.session.set("linkurl",href);
alert($.session.get('linkurl'));
//window.location.reload();
function reload()
{
if(document.URL.indexOf("#")==-1)
{
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
return true;
}
}
function popup()
{
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
$.when( reload() ).done(function() {
popup();
});
});
});
</script>
<button class="button" value="<?php echo $value['3']; ?>" style="background-color:#ff8c21;">Buy Now</button>
try something like this:
function reload() {
if (document.URL.indexOf("#") == -1) {
// Set the URL to whatever it was plus "#".
url = document.URL + "#";
location = "#";
//Reload the page
location.reload(true);
return true;
}
function popup() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
if($.session.set("reload") == true ) {
popup();
$.session.set("reload", false);
}
$('.button').click(function() {
$.session.set("reload", true);
reload();
});
The simple answer - it will not work. You cannot reload a page and execute any JavaScript after it. After unloading a page, JavaScript will stop executing.
You need to pass any sort of flag to your target page in order to tell it to show a popup. You can use GET parameters, for example.
There is a good Stackoverflow article on this topic:
Global Variable usage on page reload
$(document).ready(function() {
$('.button').click(function() {
var href = $(this).val();
alert(href);
$.session.set("linkurl", href);
alert($.session.get('linkurl'));
//window.location.reload();
reload(function () {
popup();
});
});
});
function reload(callback) {
if (document.URL.indexOf("#") == -1) {
// Set the URL to whatever it was plus "#".
url = document.URL + "#";
location = "#";
//Reload the page
location.reload(true);
return true;
}
}
function popup() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}

Disable the function of a submit button in a html form with jquery, but still have it visible

As you can see in the code below, I am making an automated chat.
The user inputs text and the code responds with a message.
It's working alright so far but right now I want to prevent the user sending another message before my message appears.
So lets say the user sends a message, after that the submit button becomes disabled, preventing the user from sending more messages. When the code responds, the button comes availible again.
I don't want to hide the button, but I want to disable it's function.
That way it'd still be visible, just not functional while the function runAI is running.
If someone can help, that'd be great.
Code:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#typing").hide();
var n = "You:<br>";
var o = $('#outputWindow');
var i = $('#inputWindow');
var s = $('#sendButton');
var t = $('#typing');
var r = -1;
//arrays
var msg = ['msg1', 'msg2', 'msg3'];
//fire send events
$(s).click(function() {
runAI();
});
$(i).keydown(function(e) {
if (e.keyCode == 13) {
runAI();
}
});
function runAI() {
if (i.val().length > 0) {
r = r + 1;
o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );
setTimeout(function(){ $("#typing").show(); }, 3000);
setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
setTimeout(function(){ $("#typing").hide(); }, 8000);
if (r+1 >= msg.length)
{
setTimeout(function(){$('#inputWindow').hide(); }, 8000);
setTimeout(function(){$('#sendButton').hide(); }, 8000);
return true; // end the function here;
}
else
{
i.val('');
i.focus();
}
}
}
});
});//]]>
</script>
As per the latest jQuery Docs which was last updated January 26, 2015.
// Disable
$( "#sendButton" ).prop( "disabled", true );
// Enable
$( "#sendButton" ).prop( "disabled", false );
To disable the button :
$("#buttonId").prop("disabled",true);
And to enable the button :
$("#buttonId").prop("disabled",false);
I would integrate in your code like this ;
$(s).click(function() {
$("#buttonId").prop("disabled",true);
runAI();
});
$(i).keydown(function(e) {
if (e.keyCode == 13) {
$("#buttonId").prop("disabled",true);
runAI();
}
});
And then when runAI() is done :
function runAI() {
if (i.val().length > 0) {
r = r + 1;
o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );
setTimeout(function(){ $("#typing").show(); }, 3000);
setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
setTimeout(function(){ $("#typing").hide(); }, 8000);
if (r+1 >= msg.length)
{
setTimeout(function(){$('#inputWindow').hide(); }, 8000);
setTimeout(function(){$('#sendButton').hide(); }, 8000);
return true; // end the function here;
}
else
{
i.val('');
i.focus();
}
$("#buttonId").prop("disabled",false);
}
}
document.getElementById("Submit").disabled = true;
Use:
$("#buttonId").prop("disabled",true);
To disable the button
$('input[type="submit"], input[type="button"], button').disable(true);
To enable the button again
$('input[type="submit"], input[type="button"], button').disable(false);
Of course the selector should be matching your submit button. my example would disable all buttons on your page

Refresh content with jquery

I want to refresh the content of a div with jquery. I have this code but it always says the data and data_check doesn't match while they do when I alert them...
$(document).ready(function(){
pageLoad();
});
function reloadPage()
{
setTimeout(function(){
pageLoad();
},5000);
}
function pageLoad()
{
var data_check = $("div.portlet-body").html().replace(/\s+/g, '');
$.post("paginas/overzicht_sub.php",
function(data){
var data_output = data.replace(/\s+/g, '')
if(data_output==data_check)
{
return false;
}
else
{
$("div.portlet-body").html(data);
}
});
reloadPage();
}
Can someone help? I don't see the problem...
Ok I found the problem! There was a A-tag that always ended when there was no A-tag started. In the HTML (data_check) was that tag deleted and in the data not. Many thanks for the responses, I try to do it the next time with versions!
Remove the replace statement in pageLoad()
function pageLoad(){
var data_check = $("div.portlet-body").html();
$.post("aginas/overzicht_sub.php", function(data){
if(data_output==data){
return false;
}else{
$("div.portlet-body").html(data);
}
});
reloadPage();
}

execute javascript after focused on an element

I need to run execFunc(); not only when the user moves onto the next field, but also runs when the user remains focused on the same field for 5 seconds.
$('input[name="email"]').bind('blur', function () {
execFunc();
});
var timer = null;
$('input[name="email"]').blur(function(e){
if (timer) clearTimeout(timer);
execFunc();
}).focus(function(e){
timer = setTimeout(execFunc, 5000);
});
If you're doing form validation, there are better ways of doing this.
How about...
$('input[name="email"]').bind('blur', execFunc).bind('focus', function() {
setTimeout(execFunc, 5000);
});
If the function isn't idempotent and you must execute it only once, you can do:
var execFuncHasExecuted = false;
function execFunc() {
if (execFuncHasExecuted)
return false;
execFuncHasExecuted = true;
// ... remainder of implementation
}
This should suffice
var g_timeout = null;
$('input[name="email"]')
.blur(function () {
execFunc();
})
.focus(function(){
if (g_timeout) clearTimeout(g_timeout);
g_timeout= setTimeout(execFunc, 5000);
});

Categories