I have a button which when i click it i would like it to click a hidden action link.
The click on the action link is not doing anything. but if i click the action link my self it works, just not when i make jquery click it?
function myClickFunction() {
$('#CloseLink').click();
//$(document).on("CloseLink", "click", function())
}
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()"/>
<div style="visibility:hidden">
#Html.ActionLink("Close", "APClientIndex", "Home", null, new { id="CloseLink", #class = "btn btn-primary niceButton" })
</div>
Plain html:
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()">
<div style="visibility:hidden">
<a class="btn btn-primary niceButton" href="/Home/APClientIndex" id="CloseLink">Close</a>
</div>
If what you want is to simulate the user clicking an anchor tag, I don't think that is possible with javascript
What you can do is read the anchor tag's href attribute and change the window location manually:
function myClickFunction() {
var href = $('#CloseLink').attr("href");
window.location.href = href;
}
If I understand what you are trying to do is to fire the click action by javascript?
With $('#CloseLink').click(); you are not firing the click event, you are binding an action to the click, but you don't have any function inside like $('#CloseLink').click(function(){...});
So if you want to fire the click event you need to do $('#CloseLink').trigger('click');
$('#CloseLink')[0].click()
Is what i used as suggested by tewathia in the comments section.
The jQuery click method fires the onclick event of that element. In order to simulate a click on an anchor a tag, you need to run the click method of the DOM element itself.
Related
In my Project, I have a <button id="first" class="first" and I have a button with the same name and id on next page.
I want to trigger it when button on first page is clicked. Any thoughts how to do that?
I tried storing the button class on windows.LocalStorage and get the data on next page to be clicked but it's not working when opened in new tab.
thanks in Advance! hope you can help me.
You can't have two buttons with the same id or any two DOM elements in the same documents with the same id. So the solution to your issue, is to have different ids for each button. And do something as follows:
<button id="button1" #click="clickButton2()">Button 1</button>
<button id="button2" #click="doSomething()">Button 2</button>
While I would still recommend both #click to call doSomething, if for some reason you want to delegate clicking to the second button, your code for clickButton2() would be:
function clickButton2() {
document.getElementById('button2').click();
}
First of all I have checked many similar questions on here and other resources, but I'm still unable to find the solution I require.
I have a button that links to a specific page within my application and I also have a confirm() box that asks if the user wants to continue, if they click ok then the next page should be loaded, if they click cancel the new page should not load, as if the button was never clicked at all.
Below is my HTML for the button:
<a href="http://localhost:9000/index">
<button onclick="myFunction()" type="button" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>
And now my JS for the confirm box:
<script>
function myFunction() {
if (confirm("Are you sure you wish to cancel this configuration?")) {
return true;
} else {
return false;
}
}
</script>
The issue right now is that your button is triggering the function, however your link is the one that's redirecting.
That in mind, wrapping a <button> with an <a> is invalid:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
Some alternatives:
Use a <form> instead of an <a>
<form action="https://stackoverflow.com">
<button type="submit" onclick="return confirm('Are you sure?')" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>
Remove the <a> entirely
function btnCancel() {
if (!confirm("Are you sure?")) return false;
location.href = "https://stackoverflow.com";
}
<button type="button" onclick="btnCancel()" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
Remove the <button> entirely
Cancel
Html:
<button class="btn btn-primary" data-toggle="modal" data-target="#modal-preview" onclick="return functionPrev();">Prev</button>
js file:
function functionPrev() {
alert("Alert!");
return false;
}
Alert opens and bootstrap modal opens too, but I only want the alert to show and block modal window.
data-toggle="modal" causes Bootstrap to bind a click event listener to this button. Bootstrap's event handler opens the modal. Removing that data attribute should stop this behavior. data-target="#modal-preview" will then be unnecessary.
Is there any way to create a button inside html form that wouldn't call an action specified in "Html.BeginForm"? I want to use it only for adding some elements to form by javascript. I have a different button that should call an action.
#using (Html.BeginForm...
{
...
<button id="addRow" class="btn margin-top-10 margin-bottom-10">addRowt</button>
...
}
The "addRow" button I'd like not to call any action.
Yes. You can listen to the click event of this button and prevent the default behavior. Assuming you ave jQuery library loaded in this page, you may use jquery preventDefault method to do this.
$(function(){
$("#addRow").click(function(e){
e.preventDefault();
// do other things as needed (ex : add a row to ui)
});
});
You can use an anchor tag that looks like a button if you are using bootstrap Then you put your JavaScript inside the tag like below:
<a href="#" class="btn btn-default" onclick="YourMethod()" >New Button</a>
<p>VERIFY</p>
I am using the above code which is a jQM button with the onClick() set. The onclick is called and doSomething() is executed but after that, jQM shows the "error loading page" message.
How can I supress the error? In this case I want the jQM button but don't want it to change page.
Thanks
Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault(); and e.stopImmediatePropagation(); should stop jQuery mobile from performing the default action on the <a/>.
$("#verify").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
//Do important stuff....
});
Update
The better way to use your existing markup would be to simply add rel="external" to your <a/> And your onclick should behave correctly.
<p>
VERIFY
</p>
This will work since jQuery Mobile will treat the link as a normal <a/> tag and return false will simply stop the default action.
I think your problem is that you have multiple actions on your button and are using a anchor tag. When clicking the button you're invoking the page to transition to index.html and a onClick event.
<a
href="index.html" <-- go to index.html
data-role="button"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
onclick="doSomething(); return false"> <-- Click event
VERIFY
</a>
Might try (might need to remove/add some other attributes)
<input
type="button"
name="verify"
id="verify"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
value="VERIFY" />
and now add a click event
$('#verify').click(function() {
alert('Button has been clicked');
});
Live Example: http://jsfiddle.net/vRr82/2/
I think you should be append data-ajax="false" inside anchor tag..
because in jQuery mobile the page transition is done by AJAX, and for page transition
it must be false..
Use Jquery live Function. That is prety much useful for me