On dropdown search not able to generate pop - javascript

#{
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.

Related

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 :)

Print the contents of a pop up modal window

I would like to print the contents of a pop up modal window and nothing else on the main page.
I've tried linking a button on the popup window to run the command window.print(); but this just prints a blank page.
I'm assuming that this is because I have not actually called the main content to be printed, but they are in javascript and I simply don't know how to do this.
How can I only print the contents of the pop up window?
The print button is here:
<div id="scheduleModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title_logindetail"></h4>
</div>
<div class="modal-body_logindetail">
</div>
<div id="printarea2">
<div class="modal-footer">
<a class="btn btn-primary" href="javascript:void(0);" onclick="printArea2('printableArea')" >Print</a>
<button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $this->lang->line('cancel'); ?></button>
</div>
</div>
</div>
</div>
</div>
This is what I want to print:
$(document).on('click', '.schedule_modal', function () {
$('.modal-title_logindetail').html("");
$('.modal-title_logindetail').html("<?php echo $this->lang->line('login_details'); ?>");
var base_url = '<?php echo base_url() ?>';
var student_id = '<?php echo $student["id"] ?>';
var student_first_name = '<?php echo $student["firstname"] ?>';
var student_last_name = '<?php echo $student["lastname"] ?>';
$.ajax({
type: "post",
url: base_url + "student/getlogindetail",
data: {'student_id': student_id},
dataType: "json",
success: function (response) {
var data = "";
data += '<div class="col-md-12">';
data += '<div class="table-responsive">';
data += '<p class="lead text text-center" style="font-size:60px;">' + student_first_name + ' ' + student_last_name + '</p>';
data += '<table class="table table-hover">';
data += '<thead>';
data += '<tr>';
data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('user_type'); ?>" + '</th>';
data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('username'); ?>" + '</th>';
data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('password'); ?>" + '</th>';
data += '</tr>';
data += '</thead>';
data += '<tbody>';
$.each(response, function (i, obj) {
data += '<tr>';
data += '<td class="text text-center" style="font-size:30px;"><b>' + firstToUpperCase(obj.role) + '</b></td>';
data += '<input type=hidden name=userid id=userid value=' + obj.id + '>';
data += '<td class="text text-center" style="font-size:30px;">' + obj.username + '</td> ';
data += '<td class="text text-center" style="font-size:30px;">' + obj.password + '</td> ';
data += '</tr>';
});
data += '</tbody>';
data += '</table>';
data += '<b class="lead text text-danger" style="font-size:20px;"> ' + "<?php echo $this->lang->line('login_url'); ?>" + ': ' + base_url + 'site/userlogin</b>';
data += '</div> ';
data += '</div> ';
$('.modal-body_logindetail').html(data);
$("#scheduleModal").modal('show');
}
});
});
function firstToUpperCase(str) {
return str.substr(0, 1).toUpperCase() + str.substr(1);
}
</script>
<script>
function printArea2(areaID) {
var printContent = document.getElementById("printarea2");
var WinPrint = window.open('', '', 'width=1100,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
assuming you want to print div with class $(".modal-title_logindetail")
change your print button to
<a class="btn btn-primary" href="javascript:void(0);" onclick="printArea2();" >Print</a>
try this
function printArea2() {
var contents = document.getElementsByClassName("modal-title_logindetail").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}

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);

So more elements on page

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

Adding Dynamic Inputs , getting value from Dynamic dynamic generate input

I created a dynamic Form with JavaScript, with AddChapitre function and I want to get number value from an input text <input type="text" class="form-control" id="grandTitreNbr1">. And created "numbers value" inputs when I click to addChapitre button using AddFeild() function <button id="b1" class="btn btn-primary" onclick="addFields()">add titres</button> .
The problem is when I click in addChapitre I get the The Chapitre Form hidden.
Here is it in JsFiddle : http://jsfiddle.net/javagose/6veqe55v/1/
This image will show the problem:
function addChapitre() {
var newdiv = document.createElement('div');
var addChapitre =
'<div class="panel panel-success"> <div class="panel-heading"> <h2 class="panel-title">' +
'<a data-toggle="collapse" data-target="#collapse" href="#collapse" class="collapsed">chapitre : ' + j +
' </a></h2></div><div class="panel-body" id="Chapitre' + j + '">';
newdiv.innerHTML += addChapitre;
addChapitre1 =
'<div class="panel-collapse" id="collapse' + j + '" >' +
'<form class="form-horizontal"><div class="form-group">' +
'<label for ="ChapTitre' + j + '">Titre du chapitre</label>' +
'<input type="text" class="form-control" id="ChapTitre' + j +
'" placeholder=" titre du chapitre ' + j + '"></div></form></div>';
newdiv.innerHTML += addChapitre1;
addChapitre2 =
'<div class="panel panel-success" id="grandTitres' + j + '">' +
'<div class="panel-heading"><h2 class="panel-title">' +
'<a data-toggle="collapse" data-target="#collapseTitre" ' +
'href="#collapseTitre" class="collapsed"> Grands titres des chapitre: ' + j + '</a></h2></div>';
newdiv.innerHTML += addChapitre2;
addChapitre2 =
'<div class="panel-body"><div class="panel-collapse" id="collapseTitre" >' +
'<form class="form-horizontal"><div class="form-group" id ="grandTitres1">' +
'<label for ="grandTitreNbr1"> GRAND TITRE</label>' +
'<input type="text " class="form-control" id="grandTitreNbr' + j + '">' +
'<button id="b1" class="btn btn-primary" onclick="addFields()">add titres</button>' +
'<div id="grandTitresDiv' + j + '">' +
'</div></div> </form></div></div> </div></div></div>';
newdiv.innerHTML += addChapitre2;
document.getElementById('conteneur').appendChild(newdiv);
j++;
}
function addFields() {
var number = document.getElementById("grandTitreNbr" + j + "").value;
var container = document.getElementById("grandTitresDiv" + j + "");
for (i = 0; i < number; i++) {
// Append a node with a random text
var newdiv = document.createElement('div');
var grandTitreTxt =
'<input type="text" class="form-control" id="grandTitreTxt' + j +
'" name="grandTitreTxt' + j + '"></div>';
newdiv.innerHTML += grandTitreTxt;
var grandTitreUpload =
'<div class="checkbox"><label><input type="checkbox"> Pdf </label></div>' +
' <input type="file" name="fichier" id="fichier"' + j + ' accept="pdf" />';
newdiv.innerHTML += grandTitreUpload;
var grandTitreUpload =
'<div class="checkbox"><label><input type="checkbox">video </label>' +
'</div> <input type="file" name="fichier" id="fichier"' + j +
' accept="video" />';
newdiv.innerHTML += grandTitreUpload;
container.appendChild(newdiv);
// Append a line break
container.appendChild(document.createElement("br"));
}
}

Categories