We Keep Coding

Avoid JavaScript Replication in partial views

This code is used to remove a cart-item from a partial view.
$(document).on('click', '.RemoveLink', (function (e) {
e.preventDefault();
var recordToDelete = $(this).attr("data-id");
var itemID = $(this).attr("data-itemid");
if (recordToDelete != '') {
$.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete, "itemID": itemID },
function () {
$('.container-cart').load('#Url.Action("cartDropDown","ShoppingCart")', function () {
$('.cart-dropdown').css('display', 'inline-block');
}
);
});
}
}));
This works well for the first iteration but from the second iteration on-wards, every click of a remove of an item is resulting in deletion of 2 items of a kind. Suppose we had 4 items of pencils and 8 items of pens. Clicking delete pencil button once will result in deletion of 2 pencils and vice versa.
This is probably because of the logic used. Following is the html that is rendered when $('.container-cart').load('#Url.Action("cartDropDown","ShoppingCart")' executes:
#model OnlineStore.ViewModels.ShoppingCartViewModel
<div class="container-cart">
#if (Model.ItemCount == 0)
{
<div>
<span>
There are no items in your cart. Continue shopping.
</span>
</div>
}
else
{
<ul class="cart-dropdown">
<li>
<div class="cart-items cart-caption">
<ul>
#foreach (var i in Model.CartItems)
{
<li id="list-item-#i.item.ItemID">
<div class="container-fluid item-wrap" style="position: relative">
<div class="item-remove">
<a href="#" class="RemoveLink"
data-id="#i.RecordID" data-itemid="#i.item.ItemID">
x
</a>
</div>
<div class="col-md-2 item-img">
<div class="row-cart">
<img alt="" id="cartImg" height="71" width="75" src="#i.item.ImageUrl">
</div>
</div>
<div class="col-md-5 item-info">
<div class="row-cart">
<div class="brand-name">
<a href="#" class="brandName">
#i.item.BrandName
</a>
</div>
<div class="product-name">
<a href="#" class="productName">
#i.item.ItemName
</a>
</div>
<div class="product-qty">
<p class="productQTY" id="item-count-#i.item.ItemID">
#i.Count x #i.item.ItemPrice
</p>
</div>
</div>
</div>
<div class="col-md-5 price-info">
<div class="row-cart" style="margin-top: 10px">
<div class="col-md-6">
<div class="row-mrp">
<span class="cartItemPrice" id="item-total-#i.item.ItemID">
Rs #(#i.Count * #i.item.ItemPrice)
</span>
</div>
</div>
</div>
</div>
</div>
</li>
}
</ul>
</div>
</li>
<li class="clearfix">
<div class="col-md-6">
<div class="row-cart sub-cost" style="background: #fff; margin-left: -10px; margin-right: 0">
<p>
Sub Total :
<span style="float: right">
Rs
<span class="ng-binding"></span>
</span>
</p>
<p>
Delivery Charge :
<span qa="delChargeMB" style="float: right">Free</span>
</p>
</div>
<div class="row-cart cart-chkout-btn">
<button type="button">View Basket & Checkout</button>
</div>
</div>
</li>
</ul>
}
</div>
This html is the partial view that is initially rendered when user clicks a button to view the cart-items. So when user clicks on 'remove an item' button on this partial view, an ajax call is sent to server to remove an item from the cart-items and on success, load the UI again by rendering this partial view once again with new values from the database.
All this is working fine for the first iteration of the deletion of an item from the cart-item list. But when I'm deleting an item again as a second deletion, code is running twice. I'm guessing this is because <div class="container-cart"> is rendered twice on the page as after the first deletion, I can see it on the live DOM inside the browser that <div class="container-cart"> is encolsed inside another <div class="container-cart"> and then the normal elements are rendered in sequence. I'm guessing maybe that's why javaScript is rendered twice or running twice.
Please suggest what you think about it and help me resolve it.
Thanks in advance

After deletion of an item try to use location.reload(); instead of hitting the MVC action method again!

How do I print only the selection from my list group item?

I searched how to and I am not able to find an answer.
I have 3 list group boxes like this in my Web page
Containers
I am trying to write get the selection using jQuery/javascript for my right Container to print in my bottom container.
**My HTML**
<div class="col-6">
<div class="card ">
<div class="card-header py-2">LEFT CONTAINER</div>
<div id="leftContainer" class="list-group" style="height:425px; overflow-y: scroll">
<!-- POPULATED BY JINJA -->
{% for campaign in campaign_histories %}
{{forloop.counter}}. {{ campaign }}
{% endfor %}
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header py-2">RIGHT CONTAINER</div>
<div id="rightContainer" class="list-group" style="height:425px; overflow-y: scroll">
<!-- POPULATED BY AJAX BELOW -->
</div>
</div>
</div>
<div class="col-12" >
<div class="card mt-4" id="BOTTOM CONTAINER">
<div class="card-header py-2">BOTTOM CONTAINER</div>
<div id="bottonContainer" class="list-group" style="height:190px;">
</div>
</div>
</div>
<p id = "DEBUG"></p> <!-- FOR DEBUG PRINT ONLY, REMOVE LATER-->
My jQuery/AJAX:
<script>
$("#leftContainer> a").click(function(event){
event.preventDefault();
$("#leftContainer > a").removeClass("active");
$(this).addClass("active");
$.ajax({
type:'POST',
url:"view_results/onclick/",
data:{
idx:index,
csrfmiddlewaretoken:"{{ csrf_token }}"
},
dataType:"text json",
success: function(resp){
// console.log(resp.model_list);
$("#rightContainer > a").removeClass("active");
$("#rightContainer > a").hide();
$("#rightContainer ").empty()
success_flag =1;
for(i=0; i<resp.model_list.length; i++){
$("#rightContainer ").append(''+resp.model_list[i]+'');
}
},
})
});
</script>
I added THIS below to my scripts to debug print it to my <p id = "DEBUG"> in my HTML. But it is printing the whole list. I do not know how to get the selection from my RIGHT CONTAINER to print. I need both the text and the index. :
$("#rightContainer").on('click',function(){
event.preventDefault();
$("#rightContainer > a").removeClass("active");
$(this).toggleClass("active");
document.getElementById("debug").innerHTML = $(this).children().attr("id")
});
My NEED is:
I only want to print to my BOTTOMCONTAINER ONLY the selection from my RIGHTCONTAINER instead of the whole list . I also need to add a button to the end of item printed in the bottom container. I am using bootstrap 4.
Can you help? My project is Django/Python in the backend.

What you can do is after your loop that appends all the links to the right container, you can add an on click listener on all the links you added (with a special class name to be specific).
Then in the function that handles the click event, you can use the this keyword to access the properties of the clicked link and use them to create your next element to append to the bottom container. Here is an example:
First you should add a class name for all the links in the right container so we know we are only targeting those. Notice below I only added rightContainerLink to the classes.
for(i=0; i<resp.model_list.length; i++){
$("#rightContainer ").append(''+resp.model_list[i]+'');
}
Then you can go ahead and use that class selector to be sure you only run handleLinkClick when a rightContainer link is clicked.
$(".rightContainerLink").on("click", handleLinkClick);
function handleLinkClick() {
let index = $(this).attr("id");
let text = $(this).text();
let elem = `<span>index is: ${index} text is: ${text}</span>`;
elem += "<button> I am a button</button> <br/>";
$("#bottomContainer").append(elem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rightContainer">
model 1
model 2
model 3
<!-- This link will not add to the bottom div because it doesn't have rightContainerLink class -->
I will not be added to bottom 4
</div>
<hr/>
<div id="bottomContainer">
</div>

same navbar with unique heading loaded

I want to create a website which will carry out the same navbar on each webpage. I Have managed to create the same navbar all over using simple jquery techniques. My navbar has a sidebar element with bootstrap styling incorporated. to the right of the sidebar, I have to generate unique heading which corresponds to the webpage click on the navbar. I would like to know is it a way out to create different headings using javascript or jquery.
nav.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-4 sidebar1">
<div class="logo">
<img src="images/group_logo.jpg" class="img-responsive align-middle" alt="Logo">
<hr align="left" width="200px;">
</div>
<br>
<div class="left-navigation">
<ul class="list">
<!--<h5><strong>Actionlist</strong></h5>-->
<li><i class="glyphicon glyphicon-th-large"></i>Dashboard</li>
<li><i class="glyphicon glyphicon-certificate"></i>Seating</li>
<li><i class="glyphicon glyphicon-book"></i>Report</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-8 main-content">
<!--Main content code to be written here -->
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
Dashboard
</h1>
<hr align="left" width="100%">
<!-- Create action buttons -->
</div>
</div>
</div>
In index.html I have the below code under body tag to load the container. How can I create the unique heading for different HTML pages?
<div id="nav-placeholder"></div>
<script>
$.get("nav.html", function(data) {
$("#nav-placeholder").replaceWith(data);
});
</script>

You can use the filename to set the header once the page is loaded.
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span id="nav-placeholder">Dashboard</span>
</h1>
And then use the script like this -
<script>
$(document).ready(function() {
var navPlaceholder= "";
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
switch(filename) {
case "seaing.html":
navPlaceholder = "Seating";
break;
case "report.html":
navPlaceholder = "Report";
break;
default:
navPlaceholder = "Dashboard";
break;
}
$("#nav-placeholder").replaceWith(navPlaceholder);
});
</script>

Untested, but this should give you the idea and steer you in the right direction.
Store the link in a variable;
Store the title of the link in a variable;
Demonstration:
<script>
$('.left-navigation a').on('click', function(){
var getUrl = $(this).attr('href'),
getTitle = $(this).text();
/* Log variable to console - remove for production */
console.log('The Url:',getUrl);
console.log('The Title:',getTitle);
$.get(getUrl, function(data) {
$("#nav-placeholder").replaceWith(data);
$('#page-title').text(getTitle); /* Update the page title */
});
});
</script>
To target the right element in order to update the page title, update your html structure as follows:
<h1><i class="glyphicon glyphicon-menu-hamburger"></i> <span id="page-title">Dashboard</span></h1>
We don't want the script to remove the glyphicon icon nested within your h1 element, so we wrap the text that needs to update in an element we can target specifically (#page-title).

jQuery losing div wrap, + problems with modifying elements

I am building a form, where user can ADD or REMOVE rows dynamically. I have built jQuery Functions to accomplish this however I am losing some elements in the process and I can't figure out why.
HTML Snippet
<div class="options" id="options">
<div class="item1" id="item1">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
</div>
<div class="controls">
<div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
<div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
</div>
</div><!-- End Item -->
</div> <!-- End Options Wrap -->
jQuery
var count = 1;
var wrap;
var item;
function addRow(){
count++;
var $newElement = $(item);
$newElement.find("li.col_id").text(count);
// Doesn't work
$newElement.find(".item1").removeClass("item1").addClass("item"+count);
// Remove ID item1 make it (item+count)
// Change deleteRow('#item1') to deleteRow('#item2')
$($newElement).appendTo(".options");
};
$(document).ready(function(){
wrap = $(".options").html();
item = wrap;
id = $("div.item1");
id.find("li.col_id").text("1");
});
I have commented out parts inside the addRow that I am having problems with. Wired thing is when I display my (item) inside .ready it shows me wrap () however when I do it inside addRow it doesn't show it anymore.
I have been stuck on this for few hours and have tried few different ways to do this however I keep coming up short.
When I click Add Row it does work however I can never change the class and id for the wrap.

I have updated your Code.
$newElement is already the main DIV that you want to update with new ID and Class.
var count = 1;
var wrap;
var item;
function addRow(){
count++;
var $newElement = $(item);
$newElement.find("li.col_id").text(count);
// Remove previous class and Add new Class
$newElement.attr('class','').addClass("item"+count);
// Update the ID
$newElement.attr('id',"item"+count);
// Update the onlick event with new Item ID
$newElement.find('.deleteRow').attr('onclick','deleteRow("#'+"item"+count+'")');
// Remove ID item1 make it (item+count)
// Change deleteRow('#item1') to deleteRow('#item2')
$($newElement).appendTo(".options");
};
$(document).ready(function(){
wrap = $(".options").html();
item = wrap;
id = $("div.item1");
id.find("li.col_id").text("1");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options" id="options">
<div class="item1" id="item1">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
</div>
<div class="controls">
<div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
<div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
</div>
</div><!-- End Item -->
</div> <!-- End Options Wrap -->

Jquery slideToggle particular div

Respected ppl ...
This is my markup :
<div class="row-fluid">
<div class="span12 card card-even">
<div>
<h3>Case 1</h3>
Hide the subsection
</div>
<div class = "timeline">
<div class= "circle circle-green " data-toggle="tooltip" title="Task 2 ">
<span></span>
</div>
<div class="rect-fixed"></div>
</div>
<div class="subsection"><span>Panther a</span></div>
</div> <!-- end of card 1-->
</div>
<div class="row-fluid">
<div class="span12 card card-odd">
<div>
<h3>Case 1</h3>
Hide the subsection
</div>
<div class = "timeline">
<div class= "circle circle-green " data-toggle="tooltip" title="Task 2 ">
<span></span>
</div>
<div class="rect-fixed"></div>
</div>
<div class="subsection"><span>Panther b</span></div>
</div> <!-- end of card 2-->
</div>
I have an app which generates multiple alternating cards(row-fluids) which are even/odd with a button "hiderBUTTON" to hide the div with the class=subsection
But im unable to link the button of a particular row with its corresponding subsection ....
How do i use the this keyword correctly and target a button's subsection for a given row ...
Thanks very much ....
Regards

Like this?
$('.hiderBUTTON').click(function(e){
e.preventDefault();
$(this).closest('.card').find('.subsection').toggle();
});
Use .closest() to get to the its root parent of each subsection and button parent i.e .card and the use find to get the subsection and use toggle to switch it or just use .hide() to hide it.
Demo
With text toggling b/w show/hide
$('.hiderBUTTON').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.closest('.card').find('.subsection').toggle();
$this.text(function(_, text){
return text == "Hide the subsection" ? "Show the subsection" : "Hide the subsection";
})
});
Demo