I have a javascript function as below.
$("#update").click(function (){
this.disabled = true;
$("#kwBody > tr").each(function() {
var $cells = $(this).children("td");
var found=false,count=0,currentCell;
for (var i=0;i<masterData.length;i++) {
currentCell=$cells.eq(i+1);
found = parseInt(currentCell.text(),10) >=masterData[i];
currentCell.toggleClass("found",found); //add or remove class to highlight
count+=found;
}
window.console && console.log(masterData,count);
$(this).toggle(count==masterData.length); // show if all cells >
});
});
});
$("slider:changed")
Once I click on the button for updating the values, I am trying to disable the button. However, since I am using pagination, if I navigate to the second page, my button re-enables again. Is there any way to keep it disabled across all the pages?
This is the link to my work so far.
Use localStorage, or a cookie, to store the "true/false" value of the button. Check that value on every page load and assign its value back to the button's disabled property.
In your click handler, after "this.disabled = true", add:
localStorage.setItem("updateDisabled", true);
Then check for the value again on page load:
$(function () {
var disabled = localStorage.getItem("updateDisabled");
if (disabled) $('#update').attr('disabled', disabled);
});
You need to do one of two things: (1) pass the variable back to your server in some way, or (2) pass it through to the next page. You can do (1) with AJAX or a cookie, and you can do (2) with a URL parameter or a cookie. The web is "stateless," meaning (among other things) that each page doesn't know anything about what just happened on another page, unless you pass that information along somehow.
Related
In ASP.NET MVC C#, I used Context.Request.Headers["Referer"] to get the referrer information from which page it is navigated to. But when I refresh the page, it still shows the old referrer url.
Is there any way that I can differentiate the page refresh and page load by navigation?
JS:
$(document).ready(function () {
debugger;
var referrer = '#Context.Request.Headers["Referer"]';
}
You could use window.onbeforeload to set a cookie/sessionStorage value, the event is triggered before page refreshes or a new page is to be loaded.
// Vanilla JavaScript
window.addEventListener('onbeforeload', function() {
// your code to set value here
});
// jQuery
$(window).on('beforeunload', function() {
// your code to set value here
});
After the page is loaded (window.onload), you can check for the value. If it matches you know the page is refreshed. You must also delete it at this point.
// Vanilla JavaScript
window.onload = function() {
// your code to check value here
// remember to delete the value too
});
// jQuery
$(window).on('load', function() {
// your code to check value here
// remember to delete the value too
});
The load event fires at the end of the document loading process - all of the objects in the document are in the DOM at this point. If you want to perform the check as soon as possible you can use an IIFE:
(function refreshCheck() {
// your check here
// remember to delete the value too
})();
I have a Load button and I am calling onclick event on that button which would refresh the page using window.location.reload() . But ,what I want is that the reload should only be called when the button is clicked for the first time . From the second click and till the HTML page is active the reload should not be called .
How can this be achieved with javascript ?Any examples would be helpful.
You could use local storage or session storage to do that. This is a modern approach that makes use of Web Storage API.
In this case, you may set a property in the storage to hold the button click and only do the refresh if it is not yet clicked.
It is possible to do it like the following snippet:
$('button').on('click', function() {
// will return null at the first call
var buttonClicked = sessionStorage.getItem('isButtonClicked');
// will only enter if the value is null (what is the case in the first call)
if (!buttonClicked) {
// set value to prevent further reloads
sessionStorage.setItem('isButtonClicked', true);
// reload the page
window.location.reload();
}
});
A more detailed example on the web storage API can be found here, if you want to know more details about it.
One way to handle this would be changing the action that onClick performs. Try taking a look here: Change onclick action with a Javascript function
You can try sending a parameter on the first reload and using that parameter change the action of the button.
Something like:
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
var secondReload= getQueryVariable("secondReload");
if(!secondReload){
//if button clicked
window.location.reload();
}else{
//deactivate button
}
</script>
you need to add a disabled attribute on the button tag within the click event.
Reloading the page only once on a button click
if you're using jQuery, something like this.
$('button').on('click',function()({
... your code here
$(this).attr('disabled');
});
I inherited VScript code that will create a web service redirect button based on logged in user; if the user is not found the button is not created and error text is displayed, I was asked to set up onload javascript function to automatically click the button-that i did.I need to check if the button exists first before i click it.What is the best way to do check if the button exist onload in javascript?
Thnaks
This should work fine:
var button = document.getElementById("the button's id");
window.onload = function() {
if (button != null) {
// your code
}
}
I'm trying to get the value inputted/selected to the search bar to stay displaying underneath it, within "Displaying 5 of 14 palettes for..."
Here's the link to the live prototype I've use.
The get set function I've used below, which allows me to do this, however this seems to appear just before the API kicks in, and disappear once the results load, any ideas why?
$(document).ready(function() {
$("#button").click(function(event) {
var un = $('#nobg').val();
greeting = un;
$("#displayUserName").text(greeting);
});
});
When you send the search query the page is reloaded - the value that was entered into the input field is gone. You'll need to have the search function return that value in some way - and either grab it with JavaScript and put it back into the div, or output it in the proper place via php.
I think the problem is that your JS code gets executed correctly, but then your form gets submitted and causes the page to reload.
Try sticking a event.preventDefault() in there, like so:
$(document).ready(function() {
$("#button").click(function(event) {
event.preventDefault();
var un = $('#nobg').val();
greeting = un;
$("#displayUserName").text(greeting);
});
});
I have a application where i have disabled the back button of IE8 by using the following code.
window.history.forward();
function noBack() {
window.history.forward();
}
I know this code takes the page back and again moves the page forward. i have called a function onload of the page which makes a textbox read only. i have used the following code to make it read only.
$("#IDofTheTextBox").attr('readonly',true);
but if i select the textbox and try to edit by pressing "BackSpace" button, IE back button is getting invoked and the textbox which was readonly is not readonly anymore. Can anyone help me how to solve this issue?
The answer is simply "NO"
If you're trying to prevent the user from losing their work, try something like:
window.onbeforeunload = function() { return "Are you sure want to leave this page?."; };
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
You add the above javascript functions in the js file and onload call the function changeHashOnLoad().
its working fine in IE8. i just tested it.
I dont know what your page is trying to do... but this is what we do:
We have an assessment where we do not want the browser buttons enabled... because we run ajax/logic when the user hits next/back etc (to determine what to display next based on their inputs). Back and forward buttons can muddy that process up.
So..... we have users open our assessments in A NEW WINDOW so the back button is already disabled...(there is no prior history in a new window). Then, Our next/back buttons use window.location.replace(url); This will prevent a history item from being created. Therefore, the back/forward buttons are never enabled and they must use the next/prev buttons to navigate our tool.
I would not try to muck with the buttons outside of something like the example I provided.