Develop Reference

Collapse each div separately in C# MVC Razor foreach loop

I'm working on C# mvc project, and I'm trying to load product cart partial view, where I want in each row to have a button Read More for product specification. When users click on Read more it should collapse in div where specification for product are loaded.
I manage to accomplish this by creating css style for div Id - product-intro, but It functioning just on first row.
I'm now trying to dynamically create div Id's and also style inline product-intro"+"-"+i and I cant manage working.
Thanks in advance for any suggestions.
Here is my html:
#{int i = 0;}
#foreach (var line in Model.Lines)
{
var validQuantityClass = line.Quantity <= line.InStock ? "" : "danger";
<tr class="article #validQuantityClass" id="article-#line.Product.ProductId">
<td>
<div class="media">
<h4 class="group inner list-group-item-heading">#line.Product.Name</h4>
#{i++;}
<script>articleSpec()</script>
<div class="media-body">
<div id="#("product-intro"+"-"+i)" class="collapse" style="margin-bottom: 10px; border-bottom:1px solid #dee2e6; padding:10px 0; font-size: 12px;">
<div class="row justify-content-between">
<div class="col">
<span id='#string.Format("article-{0}-spec", line.Product.tecId)'></span>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#product-intro-#i">Read More +</button>
</div>
</div>
</td>
</tr>
}
Javascript:
<script>
function articleSpec() {
$("#product-intro").each(function (index) {
var articleId = document.getElementById('tecId').value;
if (!articleId)
return;
var labelSelector = "#article-" + articleId + "-spec";
var url = "/Search/ArticleSpecification";
var postdata = "articleid=" + articleId;
$.post(url,
postdata,
function (data) {
$(labelSelector).html(data);
});
});
}
</script>
And this is my css for product-intro:
.cart-content #product-intro {
margin-bottom: 10px;
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
padding: 10px 0;
font-size: 12px;
}
I also tried to pass #i in javascript and dynamically load data in div:
function articleSpec(number) {
$("#product-intro" + '-' + number).each(function (index) {

Why table require two clicks when it has more than 5 row?

I have the problem. I have a page with dropdown menu that contain customers name and if customer name is selected appear table with customer configuration.
Customer can choose row in the table use one click on left mouse button:
When table has more than 5 rows it's style is changed (There is restriction display no more than five rows).
And if we press left mouse button in the first time on any field of page, table style is changed (also dropdown menu is unfocused):
And it's necessary press left button of the mouse in the second time for select configuration. It is happened only when table has more than five rows. (Table is built by jquery).
Code:
function changeCustomerName(customerName) {
getConfigurationsForSpecifiedCustomer(customerName);
}
function createTableForConfiguration(data){
fillTable(data);
$('#configurationTable').show();
}
function fillTable(data){
$('#tableBody').empty();
data.forEach(function(item) {
$('#tableBody').append(
'<tr>' +
'<td style="display:none">' +
item.id +
'</td>' +
'<td>' +
item.name +
'</td>' +
'</tr>'
)
});
}
function getConfigurationsForSpecifiedCustomer(customerName) {
$.ajax({
type: "POST",
contentType: "application/json",
url: "/getConfigurationsForSpecifiedCustomer",
data: JSON.stringify(customerName),
dataType: 'json',
success: function(response) {
createTableForConfiguration(response);
},
error: function(e){
// alert('Error from getConfigurationsForSpecifiedCustomer' + e);
console.log('Error from getConfigurationsForSpecifiedCustomer' + e);
$('#configurationTable').hide();
}
});
}
$(document).ready(function(){
$('#secondTable').on("click", '#tableBody tr', function(){
var selected = $(this).hasClass("highlight");
$("#tableBody tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
$("[name='configuration']").val($(this).context.children[0].innerText);
});
});
html:
<div id="table" class="scroll">
<table id="secondTable" class ="tableBorder">
<thead>
<tr>
<th style="display:none">id</th>
<th>Configuration Name</th>
<th>Product Name</th>
<th>Product Version</th>
<th>Solution Build</th>
<th>Customer Name</th>
<th>GP Code</th>
<th>Oracle DB Version</th>
<th>Configuration Version</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
style:
body {
font-size: 1em;
}
h1 {
font-size: 2em;
}
table.tableBorder {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
table.tableBorder th, table.tableBorder td {
padding: 4px 3px;
border: 1px solid black;
}
.scroll{
width: 100%;
max-height: 150px;
overflow: auto;
}
.highlight { background-color: grey; }
response of ajax call:
What a reason can be?

It's necessary increase width in scroll class.

Load ASP.NET MVC Partial Views Dynamically Using JQuery

I have a view with a test link on the left side. Each time user clicks the test link, I am adding a tab button and tab content (straight up HTML5 and CSS). This is what it looks like:
Controller Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MDMS_Web.Controllers
{
public class MainViewController : Controller
{
//
// GET: /MainView/
public ActionResult MainView(string name)
{
ViewBag.Name = name;
return View();
}
//[ChildActionOnly]
//public PartialViewResult MainContentPartial()
//{
// return PartialView("~/Views/MainView/MainContentPartial.cshtml");
//}
public ActionResult GetView()
{
return PartialView("~/Views/MainView/MainContentPartial.cshtml");
}
}
}
Partial View
<div id="MainContentBox" style="margin: 0em 0em;">
<h2>Testing</h2>
</div>
Main View
#{
ViewBag.Title = "Main View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<main id="mainView">
<div class="row" style="min-width: 100%; ">
<div style="float: left; width: 20%; min-height: 870px; margin-top: 0.5em; margin-left: -1em; overflow: hidden; border-style: solid; border-width: thin; border-color: lightgray; ">
<div id="Test">
<div class="row" style="background-color: #c2cbfb; margin-left: 0; margin-right: 0; ">
<p id="menuTitle" style="width: 100%; text-align: center; margin: 5px 0 5px 0; ">Test</p>
</div>
<div class="row content-wrapper">
<span style="white-space: nowrap;">
<img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/CheckIcon.png" alt="Check icon" />
<a id="TestLink">Test Stuff</a>
</span>
</div>
</div>
</div>
<div style="float: left; width: 80%; min-height: 870px; margin-top: 0.5em; margin-left: 0em; overflow: hidden; ">
<div id="MainContentBox" style="margin: 0em 0em;">
<div id="tabs" class="tab">
</div>
<div id="content">
</div>
</div>
</div>
</div>
<div id="loading">
</div>
</main>
#section scripts{
#Scripts.Render("~/bundles/App/MainView")
<script type="text/javascript">
$(function () { MainView.initModule('#ViewBag.Name') });
</script>
}
JavaScript
function addTab(evt) {
stateMap.tabIndex += 1;
// add tab button
console.log(evt);
var tHtml = '<button id="tb' + stateMap.tabIndex + '" class="tablinks">' + "New Tab " + stateMap.tabIndex + '</button>';
$("#tabs").append(tHtml);
console.log("we have a new tab!");
// add tab content section
var node = document.createElement('div');
node.setAttribute('id', 't' + stateMap.tabIndex);
node.className = "tabContent";
// load partial page place holder
var contentPlaceHolder = document.createElement('div');
contentPlaceHolder.setAttribute('id', 'c' + stateMap.tabIndex);
node.appendChild(contentPlaceHolder);
document.getElementById("content").appendChild(node);
console.log("we have new content placeholder for partial view!");
// HERE IS WHERE MY PROBLEM BEGINS !!!!!!
// NOTHING I DO WILL LOAD MY PARTIAL PAGE !!!!
//#{ Html.RenderPartial("MainContentPartial"); }
//$("#c" + stateMap.tabIndex).load('#{ Html.RenderPartial("MainContentPartial"); }');
//$("#c" + stateMap.tabIndex).load("GetView");
$(function () {
$("#c" + stateMap.tabIndex).load(
'<%= Url.Action("GetView", "MainViewController") %>'
);
})
//url: 'MainViewController/GetView',
//$.ajax({
// url: 'GetView',
// dataType: 'html',
// success: function (data) {
// $("#c" + stateMap.tabIndex).html(data);
// }
//});
}
JavaScript initModule
var initModule = function (data) {
stateMap.currentSection = data;
//Bind events
$("#TestLink").on("click", function (event) {
addTab(event);
});
$(document).ready(function () {
$(".tab").on("click", "button", function (event) {
openTab(event);
});
});
};
return { initModule: initModule };
My issue is with the last part of the JavaScript and probably the Controller. Can someone please tell me the correct way to load the partial view into my dynamically created tab content using JQuery?

You can load Partial View dynamically using Jquery in following way
$(document).on("click", "#TestLink", function () {
var url = "/MainView/GetView";
$.get(url, function (data) {
$("#content").html(data);
});
});
Here URL is the URL of action which will return PartialView.

javascript serialize on appended divs

Is it possible to serialize appended forms in jquery? I tried both button.on(click) and form.on(submit), but got a problem. When I use the onclick button it gives me an undefined serialization. When I use form submit, it gives me nothing.
Here's my JS Code:
function main_login(){
$('.main-login').click(function(){
var adpas = prompt("Enter password: ");
if(adpas !== null){
$.ajax({
type: 'post',
url: 'init.php',
data: {data: adpas},
success: function(data){
if(data == "success"){
$('#main-note').css('display', 'initial');
$('#main-note').append(''+
'<div id="note_app" style="height: 450px; width: 700px; background-color: white; border-radius: 10px;">'+
'<div style="height:12px; width:15px; border-radius:10px; background: linear-gradient(red, white);" align="center">X</div>'+
'<center><form action="" id="formmsg" method="post"><input type="text" id="note-title" style="width: 98%; height: 20px; font-size:16px"/>'+
'<textarea id="note-texts" style="width: 98%; height: 400px; resize: none;"></textarea></center>'+
'<input type="submit" value="Encode Lecture" name="btn-lecture" id="btn-lecture"></form></div>');
$('#formmsg').on('submit', function() {
alert($(this).serialize());
});
}
else{
alert('You don\'t have any administrative rights to open this link.');
}
}
});
}
});
}
Another question:
It seems that every time I successfully click "main-login class", it gives me the same number of divs it is clicked. Is there anyway to make the button trigger only once, only if the password was accepted and successful?
Tried jQuery.one(); it worked but both for successful and failed login.
Thanks in advance.

Basically you are trying to attach an event to an element which was created dynamically! So here event delegation helps you and instead of keeping event inside success of ajax, which is obviously not a good thing, put it outside! Following will be the changes you need to do!!
$('.main-login').click(function(){
var adpas = prompt("Enter password: ");
if(adpas !== null){
$.ajax({
type: 'post',
url: 'init.php',
data: {data: adpas},
success: function(data){
if(data == "success"){
$('#main-note').css('display', 'initial');
$('#main-note').append(''+
'<div id="note_app" style="height: 450px; width: 700px; background-color: white; border-radius: 10px;">'+
'<div style="height:12px; width:15px; border-radius:10px; background: linear-gradient(red, white);" align="center">X</div>'+
'<center><form action="" id="formmsg" method="post"><input type="text" id="note-title" style="width: 98%; height: 20px; font-size:16px"/>'+
'<textarea id="note-texts" style="width: 98%; height: 400px; resize: none;"></textarea></center>'+
'<input type="submit" value="Encode Lecture" name="btn-lecture" id="btn-lecture"></form></div>');
}
else{
alert('You don\'t have any administrative rights to open this link.');
}
}
});
}
});
Now your form submit event:
$('#main-note').on('submit','#formmsg', function() {
console.log($(this).serialize());
});
That should work now.

Close toggle when clicking away from div

I have a calendar that opens up when the input is clicked, and it can be closed by a cross(X. I need the calendar to close when clicking anywhere else on the page. I have tried various methods on Stackoverflow but I think there are conflicts with the original scripts. I'm guessing there is something I can add to the closeClaendar function to close when outside of div?
function closeCalendar(calendarId) {
$("#" + calendarId).hide();
}
function CalendarMonthChanged(contract, product, dropdtls, form, ticketType, dateselectorid) {
$calendar = $("#CalendarWrapper");
var loader = '<%= Html.StaticImage(Url, "ajax-loader.gif") %>';
$calendar.find(".table").html("<div class = 'calendar-loading' style='width:175px;'><img src = '" + loader + "' /></div>");
var qty = 2;
var dataArray = {
contract: contract,
productId: product,
dropdtls: dropdtls,
formNumber: form,
ticketType: ticketType,
numTickets: qty,
dateSelectorId: dateselectorid
};
$.ajax({
type: "POST",
url: '<%= Url.Action("Calendar", "productapi", null) %>',
data: dataArray,
success: function (response) {
$calendar.html(response);
toggleLayer("CalendarForm1");
}
});
}
<div id="CalendarWrapper">
<div id="Allocation">
<div id="CalendarForm1" class = "CalendarForm" style="display:none;">
<div class="allocation_form bg">
<div class="calendar_header">
<a href="javascript:closeCalendar('CalendarForm1');">
<span class="m-xs-10 halflings remove red"></span>
</a>
<select name="calendar_month" class="form-control" onchange="CalendarMonthChanged('<%= Model.ContractID %>','<%= Model.AWItemId %>',this.value,'<%= Model.FormNumber %>', '<%= Model.TicketType %>', <%= (int)Model.DateSelector %>); ">
<%= Model.Months %>
</select>
</div>
<div id="Loading" class="Loading" style="width:175px;height:172px;display:none;"></div>
<%= Model.Days %>
</div>
</div>
</div>
</div>

Here is one easy way by adding a click handler to document.
jsFiddle: http://jsfiddle.net/6pcq7pvo/3/
$(document).on("click", function (e) {
if ($("#calendar").is(":visible") && !$(event.target).is('#calendar *, #calendar')) {
// user clicked somewhere in the document but not inside the calendar
$("#calendar").hide();
$("#btnOpenCalendar").show();
} else if (event.target.id === "btnOpenCalendar") {
// user clicked the "Show calendar" button
$("#btnOpenCalendar").hide();
$("#calendar").show();
}
else if ($(event.target).is('#calendar span'))
{
// user clicked a date in the calendar
// for demo purposes only; normally your calendar plugin handles this for you
alert("Clicked date: " + $(event.target).text());
}
});
#calendar {
height: 100px;
width: 100px;
border: 1px solid black;
background-color: #ccc;
display: block;
overflow: hidden;
}
#calendar span {
display: inline-block;
width: 17px;
border:1px solid #ddd;
cursor: pointer;
}
#btnOpenCalendar { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>click anywhere in this frame, but outside of the "calendar" (gray box) to close calendar</h3>
<div id='calendar'><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>
<input id='btnOpenCalendar' type='button' value='Show calendar' />

Try this:
$(document).click(function(){
if($("#" + calendarId).is(':visible')){
$("#" + calendarId).hide().css("visibility", "hidden");;
}
});
also on your anchor click do, following to avoid hiding the calendar again:
$(document).on('click', 'a', function (e) {
//show calendar
$("#" + calendarId).show()
e.stopPropagation();
});
or instead of e.stopPropagation(); you can also use e.preventDefault();