How to execute jquery function one after other - javascript

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';
}

Related

JQuery cookie set in other Function

I had a javascript Function showHide(shID) , which is a function to hide div or show content after clicked "read more" . Here is my Fiddle : http://jsfiddle.net/Garfrey/5xf72j4m/8/
As you see when user click on it and show more content , but I just need to hide once , means when the user come back to visit my page and the hidden content is still showing. So that I need to add JQuery cookie , but what I wrote was wrong and it's not working .I'am new in Javascript . Do anyone know how to fix it ? thanks in advance , I really need help .
here my code for function :
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
if($.cookie("example")=='1') {
function showHide(shID) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
} else {
$.cookie("example", "1");
}
});
</script>
You can't define a function inside jQuery's ready function without doing something like this
var showHide;
$(function() { // Document ready
showHide = function(sh) {
//Insert function code here
};
});
I think in your case you might be better off defining the function outside of the ready function then binding it to the button's onclick handler dynamically.
I also added a data-showhide attribute to the button to pass the variable into the showhide function onclick.
function showHide() {
var shID = $(this).data("showhide"); // Use lower case only in data
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
$(function() {
$("#example-show").on("click", showHide);
});
<a href="#" id="example-show" class="showLink" data-showhide="example">
The cookies can be set to specific values in the showHide function. The ready handler can then query the cookie and determine whether or not to show or hide the div.
This fiddle shows this in action http://jsfiddle.net/e52hxosb/19/

How to get current object you working with

I need to process an AJAX request twice, first, when the site has been opened first time, and second, when a button is clicked. I dont want to write 2 similar functions. So I created an ajaxPost function. I wonder how to detect what event has called the ajaxPost function? opening the browser or clicking a button?
function ajaxPost() {
url = "post.php";
if (this!=Window) {
button = $(this).attr("class");
} else {
button = "";
}
var posting = $.post(url,{"button": button});
posting.done(function(data) {
$(".word").html(data);
});
}
$(document).ready(function() {
ajaxPost();
$("input[type=button]").click(ajaxPost);
});
Check for the jQuery event that you're passing with a click.
function ajaxPost(event) {
url = "post.php";
if (event == undefined || event == null) { //Was not generated by a user click
button = $(this).attr("class");
} else {
button = "";
}
var posting = $.post(url,{"button": button});
posting.done(function(data) {
$(".word").html(data);
});
}
$(document).ready(function() {
ajaxPost();
$("input[type=button]").click(ajaxPost);
});
A simple solution would be to include an additional parameter when calling the function:
function ajaxPost( caller ) {
switch( caller ){
case "initial_load":
// called on page load
break;
case "button_click":
// called on button click
break;
}
...
}
Now you would need to pass this parameter from the two different types of calls:
$(document).ready(function() {
ajaxPost( "initial_load" );
$("input[type=button]").on( "click", function(){
ajaxPost( "button_click" );
});
});

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();
}

Page Reload for Opera

I'm trying to get this page reload function to work in the new Opera v12. The function allows you to click away from a page & then come back and at that point the page is reloaded with a clean cache, ie fresh. What do I need to change to get it to work for Opera?
window.onload = function() {
var rel = document.getElementById('forme').toBeReloaded.value; //get the current var value
if (rel==1) { // retrieved from the server (reloaded)
if ($.browser.webkit || $.browser.msie) {
window.location.reload(); //loaded from the cache
}
if ($.browser.mozilla) {
buttonPlace();
console.log('Firefox Reload: ');
}
if ($.browser.opera) {
window.location.reload(true);
console.log('Opera Reload: ');
}
}
else {
document.getElementById('forme').toBeReloaded.value = 1;
}
}
Thanks, Bill
Figured it out using document ready and:
$(function() {
var rel = $('[name=toBeReloaded]');
if(rel.val() == 1) {
rel.val(0);
if ($.browser.opera) {
location.href = location.href; // reload
}
else {
location.href = location.href; // reload
}
}
else {
rel.val(1);
}
});
Bill

Javascript onbeforeunload to open window.open() popup

I am trying to write a onbeforeunload event that triggers a window.open(url) etc. I want it to be triggered if the user trys to leave the page or if they close their browser, but not when they click any of the buttons on the page. The buttons on the page post data to the same page via a javascript.
javascript:
window.onbeforeunload = doSync;
function doSync(){
if(doSync == true){
//do sync via popup
window.open("http://mydomain.com/page.php?var=<?php=sync_var?>", "Synchronizing cluster....", "location=0,menubar=0,statusbar=1,width=10,height=10");
}
else {
//somehow do nothing and allow user to leave
}
}
-->
</script>
The buttons calls a javascript function that creates a form and submits it. In that javascript function I set the global variable of doSync = false. I'll include the basic code of this function just to illustrate it.
function buttonPush(){
var form = document.createElement('form');
form.setAttribute('method' bla bla
//before submit set dosync to false
doSync = false;
form.submit();
}
right now I am getting a Not Implemented error on the window.onbeforeunload = doSync; statement.
Any help would be appreciated.
Thanks,
Jim
Is there something wrong with my window.open? if i do a window.open('','','height=100,width=100');
it opens fine but this below does not.
window.open('https://mydomain.com/support/sync_cluster.php?sync_cluster=mycluster','Synchronizing...', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,resizable=0,width=100,height=100');
doSync is a function, not a boolean; just create a variable and set it appropriately:
var sync = true;
window.onbeforeunload = doSync;
function doSync() {
if (sync == true) {
//do sync via popup
window.open("http://mydomain.com/page.php?var=<?php=sync_var?>", "Synchronizing cluster....", "location=0,menubar=0,statusbar=1,width=10,height=10");
}
else {
//somehow do nothing and allow user to leave
return;
}
}
function buttonPush(){
var form = document.createElement('form');
// form.setAttribute('method' bla bla
//before submit set dosync to false
sync = false;
form.submit();
}
Try this:
var vals = 0;
function displayMsg() {
window.onbeforeunload = null;
window.location = "https://www.google.com";
}
window.onbeforeunload = function evens(evt) {
var message = 'Please Stay on this page and we will show you a secret text.';
if (typeof evt == 'undefined') {
evt = window.event;
}
timedCount();
vals++;
if (evt) {
evt.returnValue = message;
return message;
}
trace(evt);
}
function timedCount() {
t = setTimeout("timedCount()", 500);
if (vals > 0) {
displayMsg();
clearTimeout(t);
}
}
$(document).ready(function() {
$('a,input,button').attr('onClick', 'window.onbeforeunload = null;')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Leave

Categories