So more elements on page - javascript

I have 600 elements on page. When all element is loaded page doesen't have lags but after
Element
$.each(dishs, function(v, k){
$.each(k.dishs, function(v, dish){
if( check_criterion(dish.criterion_first, dish.criterion_second) && dish.price >= default_settings.min && dish.price <= default_settings.max && dish.name.toLowerCase().indexOf( default_settings.search ) + 1 )
show = ' style="display: block;" ';
else
show = ' style="display: none;" ';
html += '<form crit_2="' + dish.criterion_second + '" crit_1="' + dish.criterion_first + '" name="'+ dish.name +'" price="'+ dish.price +'" '+ show +' action="/order/" method="post" class="add_to_cart_close block col-md-4 col-sm-6 col-xs-12">';
html += '<input type="hidden" value="' + dish.id + '" />';
html += '<div class="item">';
html += '<div class="b-img" style="position: relative;">';
html += '<div style="position: absolute; width: 100%; top: 0px; left: -5px;">';
if(dish.criterion_first){
html += '<div class="ic criterion_' + dish.criterion_first + '" style="">';
html += '<img alt="" src="/static/img/ci' + dish.criterion_first + '.png" width="20px" height="20px">';
html += '<span>' + criterion_list["item" + dish.criterion_first ] + '</span>';
html += '</div>';
}
if(dish.criterion_second){
html += '<div class="ic criterion_' + dish.criterion_second + '" style="">';
html += '<img alt="" src="/static/img/ci' + dish.criterion_second + '.png" width="20px" height="20px">';
html += '<span>' + criterion_list["item" + dish.criterion_second ] + '</span>';
html += '</div>';
}
html += '</div>';
html += '<div class="img">';
if(!dish.image) {
html += '<div style="display: block; width: 100%; height: 170px; background-image: url(/static/img/no_image.png); background-position: 50%; background-size: cover;" ></div>';
} else {
html += '<div style="display: block; width: 100%; height: 170px; background-image: url(/media/' + dish.image + '); background-position: 50%; background-size: cover;" ></div>';
}
html += '</div>';
html += '<div class="slider-img">';
html += '<div class="slider">';
if(!dish.image_all.length) {
html += '<div class="slide">';
html += '<img data-toggle="modal" data-target="#modalPopup_' + dish.id + '" alt="" src="/static/img/no_image.png">';
html += '</div>';
} else {
$.each(dish.image_all, function(v, image ) {
html += '<div class="slide">';
html += '<a data-toggle="modal" data-target="#modalPopup_' + dish.id + '" href="#" onclick="return false;" style=" display: block; width: 100%; height: 276px; background-image: url(/media/'+ image +'); background-position: 50%; background-size: cover;" ></a>';
html += '</div>';
});
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="title">' + dish.name + '</div>';
if(dish.weight) {
html += '<div class="massa">' + dish.weight + '</div>';
}
html += '<div class="desc" style="height: 120px; overflow: hidden;">';
html += dish.description;
html += '</div>';
html += '<div class="bottom">';
html += '<div class="left">';
html += '<div class="cost"><span class="fix_price">' + dish.price + '</span> <span class="rub">a</span></div>';
html += '</div>';
html += '<div class="right">';
if(dish.supplements.length) {
html += '<input data-toggle="modal" data-target="#modalPopup_' + dish.id + '" type="submit" class="btn btn-default" value="ЗАКАЗАТЬ">';
} else {
html += '<input dish_id="' + dish.id + '" shop_id="' + dish.shop_id + '" type="submit" class="add_to_cart btn btn-default" value="ЗАКАЗАТЬ">';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</form>';
html += '<div class="modal fade product-modal bs-example-modal-lg" id="modalPopup_'+ dish.id +'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
html += '<div class="modal-dialog modal-lg" role="document">';
html += '<div class="modal-content">';
html += '<div class="modal-body">';
html += '<div class="row">';
html += '<!-- slider -->';
html += '<div class="col-sm-4">';
html += '<ul>';
$.each(dish.image_all, function(v, img){
html += '<li style="width: 270px;"><img src="/media/'+ img +'" /></li>';
});
html += '</ul>';
html += '<div class="slider">';
html += '<div class="icons">';
html += '<span class="likes"><span class="icon glyphicon glyphicon-heart"></span> 4,8</span>';
html += '<span class="expert-count"><img src="/static/img/expert.png" width="22px"> 3</span>';
html += '<span class="reviews-count"><img src="/static/img/speach.png" width="20px"> 5</span>';
html += '</div>';
html += '<div class="reward">';
html += '<span class="rewi1"><img src="/static/img/ico/i1.png" width="20px"> Блюдо без мяса</span>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<!-- / slider -->';
html += '<div class="info-product col-sm-8">';
html += '<div class="headline">' +dish.name + '</div>';
html += '<div class="product-value">Вес '+ dish.weight + ' </div>';
html += '<div class="product-description">';
html += '<p style=" overflow: hidden;padding: 5px; text-overflow: ellipsis;" >';
html += dish.description;
html += '</p>';
html += '</div>';
if(dish.criterion_first || dish.criterion_second) {
html += '<div class="product-composition"><b>Состав:</b>';
if(dish.criterion_first) {
html += criterion_list[dish.criterion_first];
}
if(dish.criterion_second)
{
html += criterion_list[dish.criterion_second];
}
html += '</div>';
}
html += '<div class="supplements">'
if(dish.supplements.length) {
html += '<div class="row">';
html += '<div class="title">Добавки:</div>';
$.each(dish.supplements, function(v, supp){
html += '<div class="row-check col-sm-6">';
html += '<input price="'+ supp.price + '" class="supplement_price" value="'+ supp.id +'" type="checkbox">';
html += '<label>';
html += '<span class="name">';
html += supp.name;
html += '</span>';
html += '<span class="text-right price-plus fix_price">';
html += supp.price;
html += '</span> р.';
html += '</label>';
html += '</div>';
});
html += '</div>';
}
html += '<div class="total-price">';
html += '<div class="col-sm-12 line"></div>';
html += '<div class="row">';
html += '<!--<div class="col-sm-4 col-xs-6">Цена:</div>';
html += '<div class="col-sm-8 text-right" style="margin: 0 0 10px 0;">';
html += '<span class="fix_price">'+ dish.price +'</span><span> р.</span></div>-->';
html += '<div class="col-sm-4 col-xs-6">Цена:</div>';
html += '<div class="col-sm-8 text-right">';
html += '<span class="fix_price supplement_total_price" price="' + dish.price + '" >';
html += dish.price;
html += '</span>';
html += '<span style="margin-right: 50px"> р.</span>';
html += '<button shop_id="' + dish.shop_id + '" dish_id="' + dish.id + '" data-dismiss="modal" class="add_to_cart btn btn-btn-cart">Заказать</button>';
html += '</div>';
if($('#user').val()) {
var display = 'block';
if(dish.favsdish) var display = 'none;';
var dis_fav = 'none';
if(dish.favsdish) var display = 'block';
html += '<div class="col-sm-4 col-xs-6"> </div>';
html += '<div class="col-sm-8 text-right" dish_id="' + dish.id + '" style="margin: 10px 0;">';
html += '<button dish_id="' + dish.id + '" style="margin-left: auto; cursor: pointer; display:' + display + ' " class="add_to_favs btn btn-btn-cart" >В избранное</button>';
html += '<button dish_id="' + dish.id + '" style="margin-left: auto; cursor: pointer; display: '+ dis_fav +'" class="remove_from_favs btn btn-btn-cart" >Убрать из избранного</button>';
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<!--';
html += '<div class="row">';
html += '<div class="complete-product">';
html += '<div class="headline col-sm-12">Это блюдо входит в обед:</div>';
html += '<div class="item col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Суп "Кокетка"</div>';
html += '</div>';
html += '<div class="item col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Грибочки "А ля рус"</div>';
html += '</div>';
html += '<div class="item last col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Мохнатое мороженое</div>';
html += '</div>';
html += '<div class="product-cart col-md-3 col-xs-12 col-sm-3 text-right">';
html += '<span class="price">345 р.</span><button class="btn btn-cart">Заказать обед</button>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '-->';
html += '<div class="expert">';
html += '<div class="headline">Мнение эксперта</div>';
html += '<div class="row">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '<div class="show-more">Показать больше ответов экспертов</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="expert reviews">';
html += '<div class="headline">Отзывы о блюде (7)</div>';
html += '<!-- item -->';
html += '<div class="row item">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '</div>';
html += '</div>';
html += '<!-- / item -->';
html += '<!-- item -->';
html += '<div class="row item">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '</div>';
html += '</div>';
html += '<!-- / item -->';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
});
$('#menu_' + k.sm).next().html(html);
html = '';
check_visible_catalogs();
});
I generate in from AJAX data: than i insert it on page
Got function Show and hide elements So: i try show and hide 600 elements
$('[id^="menu_"]').hide();
$('[id^="menu_"]').next().hide();
And Than:
$('[id^="menu_"]').show();
$('[id^="menu_"]').next().show();
$('[id^="menu_"]').next().children().show();
I Got so strong lags....
How i can fix that lags?

cildren() return not first level elements In 600 element i have `3200 childrens

Related

why does my script wont append the ul in my class?

i have this script to append new message from client but it wont append to my ul list, don't know why but when i check in console it print 2 object from class chat-message one there is the ul and one not, but from this script it only append to .chat-message class one time and in the html i only have the container class and in the new .chat-message i empty my .message-user class and only add the ul tag to used it later when append new data
here is the html script
<div class="chat-message">
</div>
here is my js script.
function get_message_data(){
$(".client-message").on("click",function(){
$.ajax({
url:"msg",
method:"get",
data:{"data":this.id},
success:function(response){
data_response = JSON.parse(response)
add_data = add_data +
'<div class="header-message" value='+data_response[0].line_name+'>'+
'<div class="image-profile">'+
'<img src='+data_response[0].line_image+' alt="image-message">'+
'</div>'+
'<div class="username-profile">'+
'<label>'+data_response[0].line_name+'</label>'+
'</div>'+
'<button id="btn-exit" onclick="exit_app()">X</button>'+
'</div>'+
'<div class="message-user">'+
'<ul>'+
'</ul>'+
'</div>'+
'<div class="footer-message-send">'+
'<div class="file-send">'+
'<label for="btn-file-input"><i class="fas fa-archive"></i></label>'+
'<button id="btn-file-input" style="display:none;"></button>'+
'<input type="file" id="file-input" style="display: none;">'+
'</div>'+
'<div class="send-message">'+
'<input type="text" name="yellow" class="textinput">'+
'</div>'+
'<div class="button-send">'+
'<label for="send-message-admini"><i class="fa fa-paper-plane" aria-hidden="true"></i></label>'+
'<button id="send-message-admini" style="display:none;" type="button" value="submit"></button>'+
'</div>'+
'</div>'
$(".chat-message").empty();
$(".chat-message").append(add_data);
for(var i = 0; i < data_response.length; i++){
var add_template =
'<li class="message-send-client">'+
'<div class="client-message-send">'+
'<div class="message-header-send">'+
'<img src='+data_response[i].line_image+'>'+
'</div>'+
'<div class="user-message">'+
'<label>'+data_response[i].line_name+'</label>'+
'<p>'+data_response[i].message+'</p>'+
'</div>'+
'</div>'+
'</li>'+
$('.message-user').find('ul').append(add_template)
}
send_admin_message();
var interval = setInterval(function(){
update_message();
},3000)
}
})
id_user = this.id
})
}
here make it like this
see in ul i have added the templatedata
success:function(response){
data_response = JSON.parse(response)
var add_template = '';
for(var i = 0; i < data_response.length; i++){
// here this is creating list
add_template +=
'<li class="message-send-client">'+
'<div class="client-message-send">'+
'<div class="message-header-send">'+
'<img src='+data_response[i].line_image+'>'+
'</div>'+
'<div class="user-message">'+
'<label>'+data_response[i].line_name+'</label>'+
'<p>'+data_response[i].message+'</p>'+
'</div>'+
'</div>'+
'</li>'+
}
add_data = add_data +
'<div class="header-message" value='+data_response[0].line_name+'>'+
'<div class="image-profile">'+
'<img src='+data_response[0].line_image+' alt="image-message">'+
'</div>'+
'<div class="username-profile">'+
'<label>'+data_response[0].line_name+'</label>'+
'</div>'+
'<button id="btn-exit" onclick="exit_app()">X</button>'+
'</div>'+
'<div class="message-user">'+
'<ul>'+add_template+
'</ul>'+
'</div>'+
'<div class="footer-message-send">'+
'<div class="file-send">'+
'<label for="btn-file-input"><i class="fas fa-archive"></i></label>'+
'<button id="btn-file-input" style="display:none;"></button>'+
'<input type="file" id="file-input" style="display: none;">'+
'</div>'+
'<div class="send-message">'+
'<input type="text" name="yellow" class="textinput">'+
'</div>'+
'<div class="button-send">'+
'<label for="send-message-admini"><i class="fa fa-paper-plane" aria-hidden="true"></i></label>'+
'<button id="send-message-admini" style="display:none;" type="button" value="submit"></button>'+
'</div>'+
'</div>'
$(".chat-message").empty();
$(".chat-message").append(add_data);
}

dynamically Created html link does not work [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
After creating a batch of Html nodes, The link does not work!
How can I fix it?
Javascript Codes:
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
Exactly this line of code:
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>'
I expect this event to fire after clicking the tag that I have created dynamically.
But it doesn't work!
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
});
var collapseId = document.getElementById('collapseId')
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
console.log(nodeId);
});
<div id="collapseId"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
it works fine :)

how to get value from jquery in dynamic input

I'm trying to create a questions with answer or
multiple choice in CodeIgniter, I create the choice using jQuery and now I don't know how to get all value from text input.
can someone help me for this case??
This code:
var choices = [{
id_soal: 'choice1'
}, {
id_soal: 'choice2'
}, {
id_soal: 'choice3'
}];
var html = '';
var i;
for (i = 0; i < choices.length; i++) {
html += '<div class="row">',
html += '<div class="col-xs-8 col-md-4>',
html += '<div class="input-group">',
html += '<span class="input-group-addon" style="background:green"><i class="fa fa-question-circle"></i> Soal' + (i + 1) + '</span>',
html += '<input type="text" name="Question' + i + '" id="Question' + i + '" class="Question form-control" placeholder="Question" required>',
html += '</div></div></div></br>',
html += '<div class="row">',
html += '<div class="col-xs-4 col-md-4">',
html += '<div class="input-group">',
html += '<span class="input-group-addon">A</span>',
html += '<input type="text" name="A_jawaban' + i + '" id="A_jawaban' + i + '" class="form-control A_jawaban" placeholder="Result" required>',
html += '</div></div>'
html += '<div class="col-xs-4 col-md-4">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> B</span>',
html += '<input type="text" name="B_jawaban' + i + '" id="B_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div>',
html += '<div class="col-xs-4 col-md-4">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> C</span>',
html += '<input type="text" name="C_jawaban' + i + '" id="C_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div></div><br>';
html += '<div class="row">',
html += '<div class="col-xs-4 col-md-6">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> D</span>',
html += '<input type="text" name="D_jawaban' + i + '" id="D_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div>'
html += '<div class="col-xs-4 col-md-6">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> E</span>',
html += '<input type="text" name="E_jawaban' + i + '" id="E_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div></div><br>';
}
$('.judul').html(html);
$('#tambah').click(function(event) {
console.log('THIS CHOICES',choices)
var results = $('.Question').serializeArray();
console.log('FOR QUESTIONS',results)
var resultsAnswearA = $('.A_jawaban').serializeArray();
console.log('FOR QUESTIONS',resultsAnswearA)
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div name="judul" class="judul"></div>
<button id="tambah" name="tambah" class="btn btn-warning"><i class="icon-pencil5"></i> Tambah</button>
UPDATE
wow sorry for my question above, I forgot and just realized I got the answer to use query selector. just check the code
Try:
var allInputsValue = {};
$(".judul input").each(function(){
//Add each input value to all inputs
allInputsValue[allInputsValue.length] = {
"name":$(this).attr("name"),
"value":$(this).val()
};
});
console.log(allInputsValue);

On dropdown search not able to generate pop

#{
ViewBag.Title = "iifl_conference";
Layout = "/Views/Shared/_ConferenceLayout.cshtml";
}
#model IIFLWeb.Models.Parents.EventsParent
#section Conference
{
<div class="search-ac-list">
#Html.DropDownList("ddlSpeaker", Model.lstSpeakerData, "Select Speaker", new { #onchange = "GetSearchedSpeakerData(this)", #class = "select2" })
</div>
}
The Main issue is that I am not able to generate pop up in search
function GetSearchedSpeakerData(val) {
var selectedSpeaker = val.value;
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: {"name": selectedSpeaker },
success: function (result) {
var SpeakData = '';
$.each(result, function (i, val) {
var SpeakerName = '';
SpeakData += ' <li>';
SpeakData += '<a href="#SpeakerPopup" onclick="GetSelectedSpeakerData(\'' + val.Name + '\');" data-effect="mfp-zoom-in" id="SpeakerDetails" class="open-popup-link popup-block">';
SpeakData += '<div class="height240">';
SpeakData += '<div class="circle-img">';
if(val.Name=="Panel Discussions")
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="Panel Discussions "/>';
}
else
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="'+val.Name+'"/>';
}
SpeakData += '</div>';
SpeakData += '<h4>'+val.Title +'</h4>';
SpeakData += '<label class="speaker-date">';
SpeakData += +val.TimeSlot + ", " + val.Venue + " at "+val.SpeakerDate ;
SpeakData += ' </label>';
SpeakData += '</div>';
SpeakData += '<div class="speaker-bx">';
SpeakData += '<h3 id="SpeakerName">' + val.Name + '</h3>';
SpeakData += '<h4>' + val.Designation + '</h4>';
SpeakData += '</div>';
SpeakData += '</a>';
SpeakData += '</li>';
});
$("#UlProfileList ").empty();
$("#UlProfileList").append(SpeakData);
}
});
}
I am getting name from dropdownlist and from Ajax function name called GetSearchedSpeakerData(val) and I get that particular div
Now OnClick of that particular Div Need to generate Popup, for that I am using another Ajax function name called GetSelectedSpeakerData(val) , This function is create so that on select of the particular div I get "name" value on that name value is and popup is created form ajax function GetSelectedSpeakerData(val)..
function GetSelectedSpeakerData(val) {
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: { "name": val },
success: function (result) {
var SpeakData = '';
var Speaktopic='';
var Speaktab='';
$.each(result, function (i, val) {
var SpeakerName = '' ;
SpeakData += ' <div class="col-sm-3">';
SpeakData += ' <div class="circle-img">';
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/'+ val.ImageUrl+ ' " alt=" '+val.Name+ '"/>';
SpeakData += '</div>';
SpeakData += '</div>';
SpeakData += '<div class="col-sm-9">';
if(val.Name=="Panel Discussions")
{
SpeakData += '<h3>Panel Discussion</h3>';
}
else
{
SpeakData += '<h3>'+val.Name+'</h3>';
}
SpeakData += '<h5>'+val.Designation+'</h5>';
SpeakData += '<h4>' + val.Title + '</h4>';
if(#Html.Raw(Json.Encode(ViewBag.IsVenue)) == true)
{
SpeakData += '<label class="speaker-date"> ( ' + val.SpeakerDate + ", " + val.TimeSlot + " at " + val.Venue + ')</label>';
}
SpeakData +='</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane active" id="Tab1-1">' + val.Description + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-2">' + val.CompanyDesc + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-3">';
Speaktopic += '<h4>' + val.Title + '</h4>';
Speaktopic += val.Topic +'</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-4">';
Speaktopic += '<video controls class="VideoPlayer">';
Speaktopic +='<source src="http://www.iiflcap.com/IPad/Conference/Videos/2017/'+val.VideoUrl+'" type="video/mp4"></video></div>';
if (val.Description != "")
{
Speaktab += '<li role="presentation" class="active">';
Speaktab +=' Profile';
Speaktab +=' </li>';
}
if (val.CompanyDesc != "")
{
Speaktab +='<li role="presentation" >';
Speaktab +=' Company';
Speaktab +=' </li>';
}
if(val.Topic != "")
{
Speaktab +=' <li role="presentation">';
Speaktab +='Topic</li>';
Speaktab +='</li>';
}
if(val.VideoUrl != "")
{
Speaktab +=' <li role="presentation">';
Speaktab += 'Video</li>';
Speaktab += '</li>';
}
});
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
}
});
}
I can see on the brower the popup div called div is named as #SpeakerPopup
But I cannot see the Popup up
<div id="SpeakerPopup" class="white-popup mfp-with-anim mfp-hide">
<div id = "Details" class="row">
<div class="col-sm-3">
<div class="circle-img">
<img src="resources/images/speakers/1.jpg"/>
</div>
</div>
<div class="col-sm-9">
<h3>Dr. Jim Walker</h3>
<h5>Renowned economist, Founder and Managing Director, Asianomic</h5>
<h4>"World War Three"</h4>
<label class="speaker-date">(Tuesday, 21 February, 8:30am at Golconda)</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul id="Menutabs" class="nav nav-tabs Border-0 popuptabs" role="tablist">
<li role="presentation">Profile</li>
<li role="presentation" class="active">Company</li>
<li role="presentation">Topic</li>
<li role="presentation">Video</li>
</ul>
<div id="Tabcontent" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Tab1-1">
<p>hello </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-2">
<p>HEllo</p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-3">
<h4>"World War Three"</h4>
<p>hi </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-4">tttddd
</div>
</div>
</div>
</div>
</div>
This is purely css issue. I see mfp-hide class on popup - div#SpeakerPopup which basically might be having some property display:none in CSS. So what I would suggest is, Just add $("#SpeakerPopup").show() at the end of GetSelectedSpeakerData(val) ajax-success. Also you can just replace below lines
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
with just
$("#Details").html(SpeakData);
$("#Tabcontent").html(Speaktopic);
$("#Menutabs").html(Speaktab);
and at the end of these you can add $("#SpeakerPopup").show().
PS - Seems like you've been using twitter-bootstrap framework for responsive design. If so, you can try using bootstrap-modals to achieve this elegantly.
Hope this helps.

Removing Element from String Template

I have a JavaScript string called _categoryItemDivTemplate that defines HTML markup, including a <div> with class="MakeTopLevelCategory".
I thought I can remove that <div> with the following code:
item = $(_categoryItemDivTemplate);
if (!isTopLevel)
item.remove('div.MakeTopLevelCategory');
But it has no effect.
Am I missing something? Is it necessary to first add the item to the DOM?
EDIT:
Here's the template from the code:
var _categoryItemDivTemplate =
'<div class="CategoryItem" style="clear:both;">'
+ '<div class="CategoryHeader">'
+ '<img src="/images/plus.gif" class="Icon"/>'
+ '<img src="/images/icn_folder.gif" class="Icon"/>'
+ '<span class="Title"> </span>'
+ '<div style="float:right; font-size: 11px;" class="CategorySelector">'
+ '<div class="DeleteCategory" title="Delete this Category"> </div>'
+ '<div class="EditCategory" title="Rename this Category"> </div>'
+ '<div class="MakeTopLevelCategory" title="Make this Category a Top-level Category">&nbsp</div>'
+ '<div class="MoveSubcategory" title="Move this Category"> </div>'
+ '<div class="SubcategoryMarker AddSubcategory" title="Add a new Subcategory to this Category"> </div>'
+ '<div class="PackageCostingMarker AddPackage" title="Add a new Package to this Category"> </div>'
+ '<div class="ProductCostingMarker AddProduct" title="Add a new Product to this Category"> </div>'
+ '<div class="NarrativeMarker AddArticle" title="Add a new Article to this Category"> </div>'
+ '</div>'
+ '</div>'
+ '<div class="CategoryItems" style="display: none;">'
+ '</div>'
+ '</div>';
Removing it from the object does not removes it from the string, if you want to remove it from the string then you need to replace the string with the object sources so try
item = $('<div />', {html:'_categoryItemDivTemplate'});
if (!isTopLevel) {
item.find('div.MakeTopLevelCategory').remove();
}

Categories