I a using jquery mobile to create a mobile web page. I defined a button and an onclick event. After the onclick function is carried out my page is automatically refreshed. Does anyone know why this is happening or how i can stop it?
my button declaration:
<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed();">Rate</button>
function:
function BtnRatePressed() {
var rateBtn = document.getElementById('rateButton');
rateBtn.style.visibility = 'hidden';
alert("yeh");
}
I receive the alert and then the page refreshes.
We need code for this to find out. Any way you can supply us with a live demo?
You might have forgotten to return false at the end of the onclick event. Neglecting the return of false will make the browser to execute the href of the link anyway, which might appear as a page reload.
As I stated, seeing the live example, add return false to either
your BtnRatePressed function
function BtnRatePressed()
{
var rateBtn = document.getElementById('rateButton');
rateBtn.style.visibility = 'hidden';
alert("yeh");
return false;
}
or within the onclick statement.
<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed(); return false;">Rate</button>
Add return false; to the end of BtnRatePressed() so that the click even isn't propagated and doesn't cause the form to submit.
Edit: Also, change your attribute to onclick="return BtnRatePressed();"
The problem is that you're using an actual button and that is causing the form to action, you can accomplish the same thing by using a hyperlink button like this and avoid the problem...
Rate
Related
Hey there is a link in my program as shown and onclick it calls the function clearform as shown:
Html Code:
<a class="button" href="Cancel" style="left: 55%;" onclick="clearForm()">Cancel</a>
JavaScript Code:
function clearForm(){
document.getElementById("subjectName").value = "";
return false;
}
return false is not working in this code. actually the first line of the function executed successfully but the return false was failed. I mean page is redirected to url "Cancel".
Change your code as
<a class="button" href="Cancel" onclick="return clearForm()">Cancel</a>
Your problem is you need to return the Boolean.
But, drop all that...
Attach your event unobtrusively...
element.onclick = clearForm;
Use preventDefault(). It is the modern way of acheiving that.
function clearForm(event) {
event.preventDefault();
}
<a class="button" href="Cancel" style="left: 55%;" onclick="clearForm();return false;">Cancel</a>
should work
Please note that if there is a bug or error in clearForm() then "return false" will NOT stop the anchor action and your browser will try to link to the href "Cancel". Here is the logic:
User clicks on anchor
onClick fires clearForm()
There is an error in clearForm() so Javascript crashes and stops all code execution.
return false is never fired because Javascript has already stopped.
If you are relying on a third party JavaScript API (I was using code supplied by Recyclebank to spawn a popup), and the third party API makes an update that breaks the JavaScript, then you'll have problems.
The following will stop the link under normal conditions and error conditions.
<a class="button" href="javascript:;" style="left: 55%;" onclick="clearForm();return false;">Cancel</a>
The return false; somehow needs to be right at the front.
(In ALL situations I've dealt with over the past months - may or may not be a bug).
Like this: onclick="return false; clearForm();"
Besides that, as mentioned by others as well, you need to return it from the onclick, not just from the function.
In your case: onclick="return clearForm()".
Keep in mind that some browser extensions may interfere with proper operation of links. For example, I ran into a situation where someone had both AdBlock Plus and Ghostery enabled. Clicking a simple 'a' tag with an 'onclick="return SomeFunction();"' attribute (the function returned false) caused the browser to treat the click as a page transition and went to a blank page and the loading indicator just kept spinning. Disabling those browser extensions cleared up the problem.
Including this as an answer because this was the first page I landed on from Google.
i am working on asp.net site that contains say three pages
page1.aspx
page2.aspx and page3.aspx
I want if user redirects from page1, alert box asking for confirmation should come. For this i have written following code
window.onbeforeunload = function () {
return 'Are you sure you want to leave?';
};
But this code run on every postback to server including pressing F5.
I want this code to run only when user redirects to any of remaining two pages
how can do this ??
try this code in javascript onload event in the pages only
if(confirm("Are you sure you want to leave?"))
{
//redirect to next page
return false
}
Handling in window.onbeforeunload may not be the straight forward way to do it since the alert message will be shown each and every time you load the page.
What you could do instead is call the confirmation js function in the from the DOM object that could possibly take the user to the different page.
For instance, let us suppose the below anchor tag takes the user to page two:
<a id="pageTwoAnchorTag" runat="server" href="~/Page2.aspx">Page 2</a>
you could add the below onclick event to get your confirmation when the user wants to go the page 2:
<a id="pageTwoAnchorTag" runat="server" onclick="return confirm('Are you sure you want to leave?')" href="~/Page2.aspx">Leave Records</a>
Only asking for confirmation in a couple of places might not be fully satisfying, since it will not trigger in all desired cases. For example, when you close the browser tab or window, your data will be lost.
I suggest to do the opposite: Register for the onbeforeunload as you already do, but include a "guard" which you disable on any action that should not trigger the confirmation (i.e. in postbacks):
window.shouldconfirm = true;
window.onbeforeunload = function () {
if (shouldconfirm) {
return 'Are you sure you want to leave?';
}
};
Register for the events that occur before a postback is executed (e.g. button click events, etc.) In those places, disable the confirmation:
window.shouldconfirm = false;
I am slightly surprised that the postbacks trigger the onbeforeunload event. I though to remember that on form posting the event is not triggered, and that a ASP.NET postback is implemented as a form post action.
I am trying to open a pop-up window by clicking a button inside a form. MY code is as follows
HTML
<form>
<div class="form" align="center">
<button class="form_sub_btn" onclick="popitup()">Next</button>
</div>
</form>
JavaScript:
function popitup(url) {
newwindow=window.open(url,"","height=400,width=350");
if(!newindow){
alert('We have detected that you are using popup blocking software.');}
if (window.focus) {newwindow.focus();}
}
function popitup(){
window.open("","","height=300, width=300");
}
The latter function I put cause the former one wasn't getting executed with the url given.
Any help is appreciated. Thanks!
Delete the second popitup function. You need only the first one. Pass the URL to open in the argument. E.g., popitup('/popup.html');.
Since this button is inside a form, the button will cause the form to be submitted, which will navigate away from the current page before the popup can be opened. To prevent this, you need to return false from the onclick handler:
<button class="form_sub_btn" onclick="popitup('/popup.html'); return false;">Next</button>
Also, to make this work, it will be necessary to fix the typo in popitup: if(!newindow){ should be if(!newwindow){, because any error in that function will prevent the return false; from executing.
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.
Is there someone who know if its posible to use 2 onclick in 1 button?
I hope to get reload page when i push the button.
Here is the orginal button:
<a href="javascript:;" onclick="javascript:articleToCart('<z:esc mode="js" value=$z:value[article.number]>', document.getElementById('amount$z:iteration[article.current]').value)">
Best Regards
Frank
EDIT:
My version works, but i cant find the way to get the return false to work. This works in IE and Firefox.
<center><input type="button" class="flowbutton" value="Kjøp" onclick="document.location.reload(true);javascript:articleToCart('<z:esc mode="js" value=$z:value[article.number]>',document.getElementById('amount$z:iteration[article.current]').value)"> </center>
If you call a function, which you already do, you can do as much in the javascript as you want.
<script type="text/javascript">
function articleToCartMain() {
articleToCart('<z:esc mode="js" value=$z:value[article.number]>', document.getElementById('amount$z:iteration[article.current]').value);
//Put other function calls in here as well
return false; //Prevents the page from reloading or scrolling to top
}
</script>
Do something
If you want this type of inline JS event handlers (in the HTML source file), just use a comma between the two statements you want to put on the click event.
If you add a handler with JS, don't do onclick = function() { //code of your second function }; because it'll overwrite previous handlers. in this case, addEventListener/attachEvent is the "clean" way to go.
Btw, about pseudoURLs (javascript:) :
in href properties of your links it's usually considered bad practice. If this is a button, for god's sake, use a <button>... all A tags should have a real URL in href property.
in the onclick ??? useless, erase it without fear.