I have a script that gets throught parameter the new page andthe redirects to this page.
my function:
function openPage(page) {
alert("Pressed the button!"); //working
window.location.href = "http://localhost:8080/Edas/" + page; //not working
}
and my button:
<button id="btnViewMonthlyPurchaseReport" onclick="openPage('monthlyPurchaseReport.html')">View Monthly Purchase Report</button>
I think my problem is in my base URL ("localhost:8080/Edas/"), but really don't know how to fix it.
Thanks!!
Out of the comment the problem was that the button was inside of a form element.
The problem is that a button without a type attribute will submit the form, which would (not sure if in every browser) result into the described problem, that the window.location.href = ... has no effect and that the page would be redirected to the url defined in action. If action is not defined in the form then it is the the current url.
You have different options to solve this:
You could move the button out of the form (if it would not affect usability)
Change the type of the button to button (<button type="button">View Monthly Purchase</button>) - the default behavior without a type is submit
You could place a return false; at the end of your openPage function to prevent the default behavior (this is similar to 2. but with the difference that the button would still be marked as a submit button which could be important for usability in some situations).
Do this:
JS
var url = window.location.href;
var dirnames = url.split('/');
function openPage(page) {
alert("Pressed the button!"); //working
window.location.href = "http://"+ dirnames[2] +"/Edas/" + page;
}
I imagine you're correct in saying that your issue is in the URL.
Where is your monthlyPurchaseReport.html? If it is in the same directory as where the html with your button is, simple use:
function openPage(page) {
alert("Pressed the button!");
window.location.href = page;
}
My problem was: my button was wrongly inside a form, which #t.niese clearly explained why.
Thank you all for the help!
Related
I build a page to modify a product. So I have a form with product data.
I added a button that, when we click on it, does some stuff in Ajax. At the end of the treatment, I just want to refresh my page (because I display a flash message of confirmation). In short, I just want to show my page (not submit it).
This treatment is completely something else than modifying product data.
I tried these different solution :
window.location.href = window.location.href
// or
window.location.reload(true);
// or
window.location = window.location.href;
// or
window.location.href = window.location.protocol +'//'+ window.location.host + window.location.pathname;
// or
location.reload();
Everytime, it submits my form and my product is updated !!
But I don't send any post data. I just want to do the same action than if I push F5 on my keyboard = show my form (not submit it).
Any idea ?
EDIT
Don't forget to add <button type="button" ... or it's a submit button by default.
Rookie mistake...
Another solution is to display the confirmation message with jQuery without refreshing the page.
Don't forget to add <button type="button" ... or it's a submit button by default.
Rookie mistake...
Another solution is to display the confirmation message with jQuery without refreshing the page.
Your form may be submitting because the default type for a button is submit. Try changing it to button.
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');
});
So I have a button that I want to control a process. The process can be run/pause/stop.
<div>
<button class="buttonAction" id="run" onclick = "sendData()" >Run</button>
<button class="buttonAction" id="pause" onclick = "sendData1()" >Pause</button>
</div>
So the buttons are in the same position and what I want is when the the run button is clicked the pause button appears and visa versa.
function sendData(){
//some values
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db + '&fsvalue=' + fs;
document.getElementById("run").style.visibility="hidden";
document.getElementById("pause").style.visibility="visible";
}
Whats happens is it appears for a second but then reverts back to run because of the page reload window.location.href which I am using to send values back to my controller.
Dos anyone know a way to fix this or a better way of implementing it.
Thanks in advance
Reloading the page is like erasing a whiteboard and starting over again. The next page is not going to remember the state of the JavaScript you run after it. Setting of the buttons needs to take place on the next page load. Ideally your serverside code should be setting the state of the buttons.
Try below code:
function sendData(){
//your implementation
$("#run").css("visibility","hidden");
$("#pause").css("visibility","visible");
}
function sendData1(){
//your implementation
$("#pause").css("visibility","hidden");
$("#run").css("visibility","visible");
}
You will need to use cookies or sessions to keep the changes after a page reload.
By clicking on run, sendData function will be called in that run will be displayed and pause will not displayed, as I kept style.display="none" in the same way if we click on pause, run button will not display as we are using style.display="none"
function sendData(){
document.getElementById("run").style.display="block";
document.getElementById("pause").style.display="none";
}
function sendData1(){
document.getElementById("run").style.display="none";
document.getElementById("pause").style.display="block";
}
So i solved the problem. A few of the answers didnt take into account that the page reloaded.
When the user clicked run I send this back to the controller
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db+ '&buttonValue=' + "hideRun"
Then in the controller I took the hideRun and send it back to the page
String button = params.buttonValue
render view:'run.gsp', model:[button:button]
Then I had a a function that gets called on each page load
window.onload = function()
Which checked the value of
"${button}"
Then if it ssaid "hideRun" it would hide the urn button which would display the pause button.
And visa versa...
In my html document I have this:
<button onclick="doFunction()" type="submit" ...>Button</button>
The function looks like this:
doFunction() {
var goToThisUrl = "www.spring_controller_method.com?redirectUrl=this_page";
window.location.href = goToThisUrl;
}
The the url in the doFunction() is the url of a Java Spring controller method. In that method it manipulates the database and returns a string to redirect to the page it came from: return "redirect:" + redirectUrl.
The problem is that the button doesn't work. When I click the button, the page refreshes but the data in the database isn't manipulated. The reason I know this isn't a problem with the spring controller method is because of two reasons:
I have a breakpoint in the controller method and it isn't being hit.
When I take the same doFunction() code and run it on the Chrome developer console, the controller method breakpoint is hit, and the data in the database is changed.
Is there any idea as to why this would be happening?
Remove type submit from button like
<button onclick="doFunction()" type="button" ...>Button</button>
type="submit" is used for form submission that's why onclick not working.
Add return false; to prevent the default form submission.
doFunction() {
var goToThisUrl = "www.spring_controller_method.com?redirectUrl=this_page";
window.location.href = goToThisUrl;
return false;
}
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.