I'm writing application who has few forms. In main view I have for example:
<h2>Index</h2>
<button id="bt1">Click from main view</button>
<div id="partial">
</div>
and then i call btn1 from script:
$("#bt1").click(function () {
alert("btn1click");
});
and also render the partial view:
$("#partial").load("/Home/Home");
and then call the second button:
Partial view:
<h4>Partial view</h4>
<button id="btn2">Click from partial view</button>
Script:
$("#btn2").click(function () {
alert("btn2click");
});
but this action do nothing. I have no idea why. Can you help me?
How can I call the button from script?
I'm using ASP.NET MVC but for some reasons I can't use RenderPartial method.
Use event delegation like
$(document).on('click', '#btn2', function () {
alert("btn2click");
});
Basically, regardless of when #btn2 is loaded, this event should fire because it was delegated from the document. This is saying for all current and future #btn2 elements, execute this click handler
Related
I need your help. I'm currently writing some code to handle a modal behavior like clicking on buttons. For catching multiple events once, I already posted this question:
JavaScript event handling code get's called multiple times
There it said to use the jQuery .one() function to only catch one click when opening the popup and clicking one button multiple times. This works great for one button but when I use two buttons, I came up with another error.
First I've changed my event handling to accept multiple events:
jQuery(document).ready(function($) {
$('button').click(function() {
openConfirmationRemodal().one({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
});
});
When I click on a button, my popup opens with two buttons:
When I click now the Nein button, the popup closes and the console logs Cancellation. When I open the popup again now and click the Ja button, Confirmation get's logged but twice. I really don't understand this and how to fix this..
If I do this the opposite way, the error is the same but just in a different order:
Here you have a working example. Somehow the action in die example get's triggered twice (initially). This is different to the normal progress in my browser but I think this depends on the snippet functionality:
jQuery(document).ready(function($) {
$('button').click(function() {
openConfirmationRemodal().one({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
});
});
function openConfirmationRemodal() {
let remodal = $(`[data-remodal-id=test]`);
remodal.remodal().open();
return remodal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/src/remodal.js"></script>
<button>Open Pop-Up</button>
<div class="remodal" data-remodal-id="test">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
The issue is because you re-bind the events every time you click the 'Open' button. To fix this define the modal and events just once, when the page loads, and then call open() on the modal when the button is clicked. Try this:
let $remodal = $(`[data-remodal-id=test]`);
let modal = $remodal.remodal();
$remodal.on({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
jQuery($ => {
$('button').click(function() {
modal.open();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/src/remodal.js"></script>
<button>Open Pop-Up</button>
<div class="remodal" data-remodal-id="test">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
When using onclick in the markup without using a partial HTML element, the onclick function works, but when using the exact same markup in a partial, it does not execute the onclick function
Question: Is there a way to get the onclick function to work using a partial HTML element, or do you have to write the markup normally?
This is my partial Submit button:
<input type="submit" value="Submit" class="button1" />
This is where is my JavaScript Confirm function:
function Confirm(message, okayMessage, cancelMessage) {
var result = confirm(message);
if (result == true) {
alert(okayMessage);
} else {
alert(cancelMessage);
}
}
This is where I call the onclick function where I use the partial button and Confirm script:
<partial name="_SubmitButton" onclick="Confirm('Are you sure you want to delete this skill?', 'Skill has been deleted', 'Skill was NOT deleted')" />
This is the link at the bottom of my markup to the stylesheet (It definitely works):
#section Scripts{
<script type="text/javascript" src="~/js/Popups.js"></script>
}
Partial tag helper is for server side code execution, so it does not recognize Confirm function from frontend.
Hi its all because of our old friend DOM.
Say when you have a partial page like this it will be loaded with the main page and will be binded with the DOM only after that your partial view would be loaded.
This all happens because your partial button is not binded with DOM.
Just do one thing open your console in browser and try to getElementByName('_SubmitButton');
You will get undefined the best option would be place your js inside partial page itself then i guess it should work
and also if you put it inside
#section Scripts{
<script type="text/javascript" src="~/js/Popups.js"></script>
}
On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?
Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})
It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}
Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.
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>
I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.
I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html
The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();