In my main view of ASP.NET MVC project, I am rendering a partial view once and then on click of add button I want to append the partial view to the form. But when I click add, only the child element ... is added to the MainView. How can I append the root element of my partial view (_roll.cshtml)?
MainView.cshtml
<div id="rolls">
#Html.Partial("_roll")
</div>
<br />
<div class="row">
<button id="addRoll" class="btn"></button>
</div>
_roll.cshtml
<div class="roll">
<div class="row">
...
</div>
</div>
.js
$(function () {
$('#addRoll').click(function (e) {
e.preventDefault();
$('#rolls').append($('.roll').html());
});
});
Try to just use the element itself and not its innerHTML (.html()):
$(function () {
var $rolls = $('#rolls'), $role = $('.roll:first');
$('#addRoll').click(function (e) {
e.preventDefault();
//$rolls.append($('.roll')); // wont work since you want to append the same element to the same parent
$rolls.append($role.clone());
});
});
Or you can simply use the OuterHTML of the element if you want.
Related
i've made a sortable list with html5sortable library, where user have a category, where can add products inside, and can add other categories where to add products too.
The first one category is already displayed, and work fine when adding products, but if I add another category I can't add product on this category.
I've tried with "on" method instead of "click", as it should work on element created dinamically, but I think I'm using it in the wrong way.
Here is the HTML
<div class="container-categorie">
//THIS IS A CATEGORY ITEM, WITH ADD PRODUCT BUTTON INSIDE
<div class="category" id="categoria-1">
<input type="text" class="input-categoria" placeholder="NAME CATEGORY" autofocus="autofocus">
<div class="list" id="list-1">
//products will be added here
</div>
<div class="item-products add-product-container">
<div align="center" class="add-product-btn" id="addproduct-1">
+ add product
</div>
</div>
</div>
//END OF CATEGORY ITEM
<div class="add-categoria-container">
Nuova categoria
</div>
</div>
And here is the js code:
var i = 2;
$(".categoria").on('click', function() {
//to delegate the click I applied this event to "add product" button's container
});
//This add a product inside category div
$(".add-product-btn").click(function() {
var id_btn = $(this).attr("id");
var single_id = id_btn.substring(id_btn.indexOf("-") + 1);
$("#list-"+single_id).append('<div class="item-products">prova</div>');
sortable('.list');
});
//This should add a new category inside "container-categorie", with an "add product"
//button inside, to add products inside this new category
$(".add-categoria-container").click(function() {
$(".sortable-categorie").append('<div class="categoria"><input type="text" class="input-categoria" placeholder="NOME CATEGORIA PRODOTTI" autofocus="autofocus"><div class="list" id="list-'+i+'"></div><div class="item-products add-product-container"><div align="center" class="add-product-btn" id="addproduct-'+i+'">+ Aggiungi prodotto</div></div></div>');
sortable('.sortable-categorie');
});
Jquery can't listen to dynamically generated Elements directly, what you can do is you can provide parent element which is already there in DOM listen to them.
$("element which is already in DOM").on('click',"element to listen to", function() {
//Code here
});
$(".container-categorie").on('click',".categoria", function() {
//Code here
});
or you can directly listen to the body instead, but it is not preferable.
For Ref : https://api.jquery.com/on/#on-events-selector-data-handler
Try this
$(document).on('click',".your_class_name", function() {
//to delegate the click I applied this event to "add product" button's container
});
JQuery has no virtual DOM like Angular or React. That means JQ can't "see" the dynamically generated element. What you can do is using a onclick="functionYouWantToTrigger(someParameters)" directly in the HTML tag.
I have my main page which contains a number of PartialViews
Here is my Index.cshtml
<div class="container">
#{
foreach (var summary in Model.Summaries)
{
<div class="partialViewWrapper">
#Html.Partial("_Summary", summary)
</div>
}
}
</div>
Here is my Javascript:
$(document).ready(function() {
$(".toggle").on("click",
function() {
var btn = $(this);
var state = btn.html();
if (state === 'Show Down Times') {
btn.html('Hide Down Times');
$('.foo').show();
} else {
btn.html('Show Down Times');
$('.foo').hide();
}
My partial View (relevant bits):
<div class="row">
<div class="col-md-12">
<button class="toggle btn btn-default" >Show Down Times</button>
</div>
<div class="foo col-md-12" style="display: none">
<table class="table table-striped table-bordered table-responsive">
...
</table>
</div>
</div>
My issue is, when I click the button on the first partial view, it changes its text to Hide from Show, but both Partial Views show their respective table.
So, the JS to change the button text is being applied to the correct partial view buttons but the showing / hiding the table is being applied to all partial views.
I think I need to do something with $(this) rather than just referencing it by class but I have no idea how to achieve this with JQuery.
Thanks,
Use relative selectors to get the .closest() ancestor containing both elements and then .find() the other element inside that ancestor.
var btn = $(this);
var foo = btn.closest('.row').find('.foo');
if (state === 'Show Down Times') {
btn.html('Hide Down Times');
foo.show();
} else {
btn.html('Show Down Times');
foo.hide();
}
The reason is $('.foo'). Since you are not pointing out the table in a specific partial. The selector selects all classes with the class foo.
The solution to this problem is to
Either
Select the sibling of the parent using the parent and next functions with btn and then use hide or show.
Or
Add an additional attribute to the button say data-target and add the name of the class or id. Access it using btn.data('target') and then use hide or show.
I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.
Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.
So in other words,
<div id="panda"></div>
$("#panda").click(function () {
console.log("some text");
});
So this statement works but now lets say I have,
<div id="panda">
<lots of children>
<div id="koala">
</div>
</lots of children>
</div>
$("#koala").click(function () {
console.log("doesnt work");
});
Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.
Any ideas what the case could be?
I tried this,
$('#panda').click(function(e){
if ($(e.target).is('#koala'))
{
console.log("koala");
}
});
But it just logs every click on the parent.
One option is to listen to the div children for panda.
$("#panda").on('click','div',function() {
console.log($(this).text()+' '+$(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panda">
<div id="koala">
koala
</div>
<div id="bear">
bear
</div>
</div>
Try making the selector '#panda #koala' like this
$("#panda #koala").click(function () {
console.log("koala");
});
Here is an example,
<div id="panda">Panda
<div id="koala">Koala</div>
</div>
$("#panda").on('click', '#koala', function () {
alert("koala!!!");
});
Here is a Fiddle
How can I get the div id for a button and identify whether it's within one of two possible ids? For example, we have a call-to-action button that could be inside a div with the id="new" or id="current". Here are a few examples:
<div id="new">
Download
</div>
or
<div id="current">
Download
</div>
It's possible the id could be in a parent or parent's parent div, such as this:
<div id="new">
<div class="something">
Download
</div>
</div>
or this:
<div id="new">
<div class="row">
<div class="col-md-6">
Download
</div
</div>
</div>
We'd like our landing page developers to be able to develop the pages without having to ever touch the JavaScript for this functionality. We're ultimately trying to pass along this value in a URL string, such as this:
fileref.setAttribute("src", "https://oururl.html?cStatus=" + cStatus);
Make this slight modification: onclick="cStatus(this)" and then:
function cStatus(elem) {
var els = [];
while (elem) {
els.unshift(elem);
elem = elem.parentNode;
if (elem.id == "new") {
// has new
break;
} else if (elem.id == "current") {
// has current
break;
}
}
}
In the onclick callback you can get the parent element using $(this).parent() and then check its id.