Develop Reference

Replace Div and Reset Div (Jquery)

I have a DIV with links in it. When a link is clicked I wish to replace div in place with a form. When users need to return 'home' to original div they should simply click 'go back' or similar.
Here's what I've tried with no prevail:
HTML
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" id="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" id="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" id="home"/> Three
</div>
Javascript
var originalState = $("#init").clone();
$(".first").click(function() {
$("#init").replaceWith($("#one"));
});
$(".second").click(function() {
$("#init").replaceWith($("#two"));
});
$(".third").click(function() {
$("#init").replaceWith($("#three"));
});
$("#home").click(function() {
$(<current state>).replaceWith($(originalState));
});
Where I would like to replace div (id="init") with the corresponding selected div (id="one",id="two", or id="three").
Furthermore user need to return to original div (id="init") upon clicking 'go back button'
Here is a Fiddle.

This is a basic solution with javascript (no jQuery) hope it helps you and solves the problem.
const initDiv = document.getElementById('init');
const classList = ["first" , "second" ,"third"];
const inputClassList = ['one' ,'two' ,'three'];
let linkIndex = -1;
initDiv.addEventListener('click' , showInput);
function showInput(e){
let linkIndex = classList.indexOf(e.target.classList[0]);
if(linkIndex >= 0){
const inputDiv = document.getElementById(inputClassList[linkIndex]);
const inputButton = inputDiv.children[0];
inputDiv.classList.remove('noDisplay');;
initDiv.classList.add('noDisplay');
inputButton.addEventListener('click' ,function(){
initDiv.classList.remove('noDisplay');
inputDiv.classList.add('noDisplay');
})
}
}
#wrapper{
background-color: #999;
}
.noDisplay{
display:none;
}
.inputCss{
/*set here the css properties you don't want the input to
enherit from wrapper div*/
}
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
<div class="container noDisplay inputCss" id="one">
<input type="button" value="Go Back" id="home1"/> One
</div>
<div class="container noDisplay inputCss" id="two">
<input type="button" value="Go Back" id="home2"/> Two
</div>
<div class="container noDisplay inputCss" id="three">
<input type="button" value="Go Back" id="home3"/> Three
</div>
</div>
This solution is using jQuery.
The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.
So you can just modify the css display value.
var originalState = $("#init").clone();
$(".first").click(function() {
toggleDisplay("init" ,"one");
$("input").click(function() {
toggleDisplay("one" ,"init");
});
});
$(".second").click(function() {
toggleDisplay("init" ,"two");
$("input").click(function() {
toggleDisplay("two" ,"init");
});
});
$(".third").click(function() {
toggleDisplay("init" ,"three");
$("input").click(function() {
toggleDisplay("three" ,"init");
});
});
function toggleDisplay(first ,second) {
$(`#${first}`).hide();
$(`#${second}`).show();
}
#wrapper{
background-color: #999;
}
.inputCss{
/*set here the css properties you don't want the input to
enherit from wrapper div*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
<div class="container inputCss" id="one" style="display:none;">
<input type="button" value="Go Back" id="home1"/> One
</div>
<div class="container inputCss" id="two" style="display:none;">
<input type="button" value="Go Back" id="home2"/> Two
</div>
<div class="container inputCss" id="three" style="display:none;">
<input type="button" value="Go Back" id="home3"/> Three
</div>
</div>

This solution meets all functional requirements including browser history support. In other words, pressing the back or forward buttons work as expected.
See this fiddle. To test history controls, host the page locally. The full source is attached below.
The key challenge is to not change the DOM or event bindings more than needed. The replace and clone operations are expensive and have weird edge behaviors. Usually it is better to hide and show elements and set event bindings as few times as possible.
The solution below does all this. Let me know if you have questions. Good luck!
<html>
<head></head>
<body>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" class="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" class="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" class="home"/> Three
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function () {
var
allowList = [ '', 'first', 'second', 'third' ],
doDebounce = false
;
$('.first').click(function( event_obj ) {
$('#init').hide();
$('#one').show();
doDebounce = true;
document.location.hash = 'first';
event_obj.preventDefault();
});
$('.second').click(function( event_obj ) {
$('#init').hide();
$('#two').show();
doDebounce = true;
document.location.hash = 'second';
event_obj.preventDefault();
});
$('.third').click(function( event_obj ) {
$('#init').hide();
$('#three').show();
doDebounce = true;
document.location.hash = 'third';
event_obj.preventDefault();
});
$('.home').click(function( event_obj ) {
$('.container').hide();
$('#init').show();
doDebounce = true;
document.location.hash = '';
event_obj.preventDefault();
});
$( window ).on( 'hashchange', function () {
var
page_str = document.location.hash || '',
selector_str = ''
;
if ( page_str.length > 0 ) { page_str = page_str.substr( 1 ); }
if ( allowList.indexOf( page_str ) === -1 ) { return; }
if ( doDebounce ) {
doDebounce = false;
return;
}
selector_str = page_str ? '.' + page_str : '.home';
$( selector_str ).trigger( 'click' );
doDebounce = false;
});
}());
</script>
</html>

asp.net mvc loading first entries and the others - late

I'm using asp.net mvc razor
The page must show a very long list. Phonebook employees - about 500 people. Page is loading too slowly because of too many entities.
How to load first 50 entries, and later the others 450 entries - by background?
Thank you so much!
Code on page:
#model WarehouseSearch.Controllers.PhonesList
#{
string LastFirstChar = "";
}
<div id="main-content">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-8" style="border:1px solid #ddd;background-color:white">
<div class="row" style="background-color:rgba(247, 225, 181, 1);margin-bottom:1em;padding:0.5em;">
<div class="col-md-7 text-left" style="padding-left: 1em; padding-top: 0.2em; padding-right: 1em; padding-bottom: 0.3em;">
<span class="fa fa-user fa-2x blue"></span> <input type="text" name="Search" id="search_input" placeholder="search ..." class="search_input" />
</div>
<div class="col-md-3">
</div>
</div>
<ul id="phones" class="interleave">
#foreach (WarehouseSearch.GetPeoplePhonesListResult p in Model.allphones)
{
<li style="padding-top:2em;" class="row">
<div class="col-md-2">
#if (LastFirstChar != #p.FirstChar)
{
<span style="background-color:#41a7e2;color:white;position:relative;left:-4em;font-size:210%;padding:0.3em;" class="text-right"><b>#p.FirstChar</b></span>
LastFirstChar = p.FirstChar;
}
<img style="width: 85%; display: block;" src="#p.BigPhoto" /><br />
</div>
<div class="col-md-5">
<h3 class="phone smarttlink" style="margin-bottom:0.1em;margin-top:0;">#p.Family</h3>
<div>#p.FirstMiddleName</div>
<br />
<small style="color:#666">#p.Title</small>
</div>
.... some other info about people....
</li>
}
</ul>
</div>
</div>
</div>
</div>
<script>
$('#search_input').animate({
//"width": "100%",
//"padding": "4px",
"opacity": 1
}, 300, function () {
$(this).focus();
});
$(function () {
$(function () {
$('#search_input').fastLiveFilter('#phones'
, {
selector: ".phone, .phone2"
, callback: function (total) {
$('.phone').unhighlight();
searchTerm = $('#search_input').val();
if (searchTerm.length > 0) {
$('.phone').highlight(searchTerm);
}
}
, translit : true
}
);
});
});
</script>
in Controller:
:
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}

First I would recommend you to use an external CSS file instead of inline styling.
That way the CSS can be cached in the browser and might help you to boost the performance.
Also in a div with a class "row" you have only 12 columns,it should be like this.
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-2">
</div>
</div>
I would try change this Action to take the first 50
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().Take(50).ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}
And later in the view after it finished to iterate over the top 50 phones
Call to another function from the controller that will retrieve the rest of the phones.
#{
((HomeController)this.ViewContext.Controller).GetLast450();
}
And iterate that, probably a partial view will be good here.

open block on div click from list of div's in HTML

<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});

I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.

Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});

Why is this JS not firing

I have this Markup, and the way this is supposed to work is the user click on the "icon arrow" and this following JS is supposed to fire which will display the hidden content, in other words opening the window. this works in another program, but is there any reason this is not firing.
Here is the markup:
<div data-bind="foreach {data:movies}">
<div class="content-item full bottom-border">
<div class="content-item-container">
<div class="movie-listing-header">
<a class="icon arrow"></a>
<div class="movie-details">
<div class="title"></div>
<div class="info">
<div>
<span class="rating" data-bind="css: 'rating-' + (MovieRating || 'NR').toLowerCase().replace(/-/, '')"></span>
</div>
</div>
</div>
<a class="icon right-arrow"></a>
</div>
<div class="showtimes">
<div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div>
</div>
</div>
</div>
and here is the .js
$(document).ready(function () {
$('.icon.arrow').click(function () {
var active_el = $(this);
$('.movie-listing-header').each(function () {
if ($(this).get(0) === active_el.parent().get(0)) {
if ($(this).hasClass('active')) {
$(this).siblings('.showtimes').hide();
} else {
$(this).siblings('.showtimes').show();
}
$(this).toggleClass('active');
} else {
$(this).removeClass('active');
$(this).siblings('.showtimes').hide();
}
});
});
});

Showing Overall Description on button click

I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.

Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.