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

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

Related

dynamically generate a list dropdown in javascript from JSON data

I have generated a form and storing it into a JS variable but the problem is I want to generate a dropdown list. Data for that dropdown is present in an array into JSON. I tried to concat values using a for loop but that didn't work
function(resp){
resp = JSON.parse(resp);
console.log(resp);
let dispData = '<form>'+
'<div class="form-group">'+
'<label>Item</label>'+
'<input type="text" class="form-control reas-item" id="'+resp["item_details"].master_id+'" value="'+resp["item_details"].item_name+'" disabled>'+
'</div>'+
'<div class="form-group">'+
'<label>Date</label>'+
'<input type="date" class="form-control reas-date">'+
'</div>'+
'<div class="form-group">'+
'<label>Quantity</label>'+
'<input type="number" class="form-control reas-quantity" min="1" max="'+resp["item_details"].quantity+'" value="'+resp["item_details"].quantity+'" >'+
'</div>'+
'<div class="form-group">'+
'<label>Reassign To:</label>'+
'<select class="form-control reas-staff">'
for (var i = 0; i < resp['trachers_list'].length; i++) {
var staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name
+'<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>'
}
'</select>'+
'</div>'+
'</form>';
/*for (var i = 0; i < resp['trachers_list'].length; i++) {
let staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name
$(".reas-staff").html('<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>');
}*/
}
See Commented for loop I've tried that as well but that is also not working.
This is how my json looks like

Please do code like below:
function(resp){
resp = JSON.parse(resp);
console.log(resp);
let dispData = '<form>'+
'<div class="form-group">'+
'<label>Item</label>'+
'<input type="text" class="form-control reas-item" id="'+resp["item_details"].master_id+'" value="'+resp["item_details"].item_name+'" disabled>'+
'</div>'+
'<div class="form-group">'+
'<label>Date</label>'+
'<input type="date" class="form-control reas-date">'+
'</div>'+
'<div class="form-group">'+
'<label>Quantity</label>'+
'<input type="number" class="form-control reas-quantity" min="1" max="'+resp["item_details"].quantity+'" value="'+resp["item_details"].quantity+'" >'+
'</div>'+
'<div class="form-group">'+
'<label>Reassign To:</label>'+
'<select class="form-control reas-staff">';
for (var i = 0; i < resp['trachers_list'].length; i++) {
var staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name;
dispData += '<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>';
}
dispData += '</select>'+
'</div>'+
'</form>';
/*for (var i = 0; i < resp['trachers_list'].length; i++) {
let staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name
$(".reas-staff").html('<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>');
}*/
}

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

Escaping Quotes does not work in JavaScript innerHTML

I have got a quite bad "quoting situation" at the moment.
I am working inside an innerHTML and inside this i want to call a function on the onClick-Event, which leaves me with the following:
modalEl.innerHTML = '<form>'+
'<legend>Gruppe bearbeiten</legend>'+
'<div class="mui-textfield">'+
'<input id="groupName" type="text" value="'+name+'">'+
'<label>Gruppenname</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
'<label>Beschreibung</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<label>Geräte hinzufügen</label>'+
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
'<option value="0"></option>'+
'</select>'+
'</div>'+
'<br>'+
'<div class="outterformbuttons">'+
'<div class="formbuttons">'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById("groupName").value, document.getElementById("groupDesc").value)">Speichern</button>'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
'</div>'+
'</div>'+
'</form>';
I already tried escaping the quotes and using HTML-Quotes, but neither worked.

Instead of HTML encoding the single quotes, just JavaString escape your single quotes.
'<button type="button" class="mui-btn mui-btn--raised"
onclick="sendUpdatedGroup(id, document.getElementById(\'groupName\').value,
document.getElementById(\'groupDesc\').value)">Speichern</button>'+
If you don't want to get into escaping hell , don't use event handlers as HTML attributes (which we stopped doing about 10 years ago).
modalEl.innerHTML = '<form>'+
'<legend>Gruppe bearbeiten</legend>'+
'<div class="mui-textfield">'+
'<input id="groupName" type="text" value="'+name+'">'+
'<label>Gruppenname</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
'<label>Beschreibung</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<label>Geräte hinzufügen</label>'+
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
'<option value="0"></option>'+
'</select>'+
'</div>'+
'<br>'+
'<div class="outterformbuttons">'+
'<div class="formbuttons">'+
'<button type="button" class="mui-btn mui-btn--raised" >Speichern</button>'+
'<button type="button" class="mui-btn mui-btn--raised">Abbrechen</button>'+
'</div>'+
'</div>'+
'</form>';
var buttons = modalEl.querySelectorAll('.formbuttons button');
buttons[0].addEventListener('click', function() {
sendUpdatedGroup(id,
document.getElementById('groupName').value,
document.getElementById('groupDesc').value))
});
buttons[i].addEventListener('click', deactivateOverlay);

You forgot to declare desc and name look at this fiddle totally works https://jsfiddle.net/L3Lfweh9/
HTML
<div id="message">
</div>
<button id="bttn">
click here
</button>
JS
var name = "one";
var desc = "two";
var text = '<form>'+
'<legend>Gruppe bearbeiten</legend>'+
'<div class="mui-textfield">'+
'<input id="groupName" type="text" value="'+name+'">'+
'<label>Gruppenname</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
'<label>Beschreibung</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<label>Geräte hinzufügen</label>'+
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
'<option value="0"></option>'+
'</select>'+
'</div>'+
'<br>'+
'<div class="outterformbuttons">'+
'<div class="formbuttons">'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById("groupName").value, document.getElementById("groupDesc").value)">Speichern</button>'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
'</div>'+
'</div>'+
'</form>';
document.getElementById("bttn").addEventListener("click", function(){
document.getElementById("message").innerHTML = text;
}, false);

facebook like photo viewer jQuery FBPhotoBox

Creating A Image Viewer with Descriptions Like Facebook - jQuery FBPhotoBox
everything is working good but i could not retrive image name, description and album name
$(document).ready(function() {
$(".fbphotobox img").fbPhotoBox({
rightWidth: 360,
leftBgColor: "black",
rightBgColor: "white",
footerBgColor: "black",
overlayBgColor: "#1D1D1D",
onImageShow: function() {
$('.imgtitle').html($(this).attr("data-title"));
$('.imgdesc').html($(this).attr("data-desc"));
}
});
});
show: function(image) {
if (image.attr("fbphotobox-src")) this.tempImage.src = image.attr("fbphotobox-src");
else this.tempImage.src = image.attr("src");
$(".fbphotobox-tag").remove();
var index = this.targetObj.index(image);
this.leftArrow.attr("data-prev-index", index-1);
this.rightArrow.attr("data-next-index", index+1);
if (index-1 < 0) this.leftArrow.hide();
else this.leftArrow.show();
if (index+1 >= this.targetObj.length) this.rightArrow.hide();
else this.rightArrow.show();
},
html code
<div class="fbphotobox">
<img src="museumgallery/<?php echo $setdetail['image'] ?>" class="img-polaroid" width="190" id="<?php echo $setdetail['id'] ?>" data-title="<?php echo $setdetail['itemname'] ?>" data-desc="<?php echo $setdetail['description'] ?>"/>
</div>
and the viewer is appended as
['<div class="fbphotobox-main-container">',
'<div class="fbphotobox-container-left">',
'<table class="fbphotobox-main-image-table"><tr><td>',
'<div class="tag-container"><img class="fbphotobox-main-image" src=""/></div>',
'</td></tr></table>',
'<div class="fbphotobox-image-stage-overlay">',
'<div class="fbphotobox-container-left-header">',
'<a title="Full Screen" class="fbphotobox-fc-btn fbphotobox-a"></a>',
'</div>',
'<div data-prev-index="" class="left-arrow">',
'<table style="height:100%"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td></tr></table>',
'</div>',
'<div data-next-index="" class="right-arrow">',
'<table style="height:100%;"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td></tr></table>',
'</div>',
'</div>',
'</div>',
'<div class="fbphotobox-container-right">',
'<div class="fbphotobox-close-btn">',
'<a title="Close" href="" style="float:right;margin:8px">',
'<img src="./assets/images/close.png" style="height:10px;width:10px"/>',
'</a>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-image-content">',
'<h3 class="imgtitle"></h3>',
'<div class="imgdesc"></div>',
'</div>',
'</div>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-fc-main-container">',
'<div class="fbphotobox-fc-header">',
'<div style="float:left"></div>',
'<a class="fbphotobox-fc-close-btn" href="">Exit</a>',
'<div style="clear:both"></div>',
'</div>',
'<div style="position:fixed;top:0px;right:0px;left:0px;bottom:0px;margin:auto;">',
'<table style="width:100%;height:100%;text-align:center;">',
'<tr>',
'<td class="fc-left-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td>',
'<td>',
'<img class="fbphotobox-fc-main-image" src=""/>',
'</td>',
'<td class="fc-right-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td>',
'</tr>',
'</table>',
'</div>',
'<div class="fbphotobox-fc-footer"><div style="clear:both"></div></div>',
'</div>',
'<div class="fbphotobox-overlay"></div>',
'<div style="clear:both"></div>'];
but it appears to be like in this image
http://i.stack.imgur.com/5wFoS.jpg
http://www.jqueryscript.net/lightbox/Creating-A-Image-Viewer-with-Descriptions-Like-Facebook-jQuery-FBPhotoBox.html
this is the link where i got file from
what i am stuck at is i tried
$('.imgtitle').html($(this).attr("data-title"));
$('.imgdesc').html($(this).attr("data-desc"));
to show in the viewer but it only shows src not data-desc or data-title... and also i want to display the album name too

Documentation is bad, but if you examine the code you will see this part:
initDOM: function() {
var html = ['<div class="fbphotobox-main-container">',
'<div class="fbphotobox-container-left">',
'<table class="fbphotobox-main-image-table"><tr><td>',
'<div class="tag-container"><img class="fbphotobox-main-image" src=""/></div>',
'</td></tr></table>',
'<div class="fbphotobox-image-stage-overlay">',
'<div class="fbphotobox-container-left-header">',
'<a title="Full Screen" class="fbphotobox-fc-btn fbphotobox-a"></a>',
'</div>',
'<div data-prev-index="" class="left-arrow">',
'<table style="height:100%"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td></tr></table>',
'</div>',
'<div data-next-index="" class="right-arrow">',
'<table style="height:100%;"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td></tr></table>',
'</div>',
'<div class="fbphotobox-container-left-footer">',
'<div style="margin:20px;">',
'<span style="font-weight:bold;">Dummy Photo Caption</span>',
'<span style="color:#B3B3B3;"> in </span>',
'<span style="font-weight:bold;">Dummy Album Name</span>',
'</div>',
'</div>',
'<div class="fbphotobox-container-left-footer-bg"></div>',
'</div>',
'</div>',
'<div class="fbphotobox-container-right">',
'<div class="fbphotobox-close-btn">',
'<a title="Close" href="" style="float:right;margin:8px">',
'<img src="./images/close.png" style="height:10px;width:10px"/>',
'</a>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-image-content"></div>',
'</div>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-fc-main-container">',
'<div class="fbphotobox-fc-header">',
'<div style="float:left">Dummy Header</div>',
'<a class="fbphotobox-fc-close-btn" href="">Exit</a>',
'<div style="clear:both"></div>',
'</div>',
'<div style="position:fixed;top:0px;right:0px;left:0px;bottom:0px;margin:auto;">',
'<table style="width:100%;height:100%;text-align:center;">',
'<tr>',
'<td class="fc-left-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td>',
'<td>',
'<img class="fbphotobox-fc-main-image" src=""/>',
'</td>',
'<td class="fc-right-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td>',
'</tr>',
'</table>',
'</div>',
'<div class="fbphotobox-fc-footer">Dummy Footer<div style="clear:both"></div></div>',
'</div>',
'<div class="fbphotobox-overlay"></div>',
'<div style="clear:both"></div>'];
$("body").append(html.join(""));
this.settings.afterInitDOM();
},
and at far end we can see that you can define in settings afterIntitDOM() callback function. There you can change your popup template in general, or the Album name this way:
afterIntitDOM: function() {
$('.fbphotobox-container-left-footer span:last').text('My Album name');
}
But since you also want to change the image name and description, than you should use onImageShow method/callback in settings, but there is a problem: this inside is the image in focus, not the original image in DOM tree. So, I suggest you change core show method and add one line at the end of function:
show: function(o) {
/* o is a jQuery object, the original image we need */
....
....
if ( typeof this.settings.myShow==='function' ) this.settings.myShow(o);
}
Then define your myShow callback in settings:
$(".fbphotobox img").fbPhotoBox({
rightWidth: 360,
leftBgColor: "black",
rightBgColor: "white",
footerBgColor: "black",
overlayBgColor: "#1D1D1D",
myShow: function(image) {
var myTitle = image.data('title');
var myDescription = image.data('description');
var myAlbum = image.data('album');
$('.fbphotobox-container-left-footer span:first').html( myTitle );
$('.fbphotobox-container-left-footer span:last').html( myAlbum );
$(".fbphotobox-image-content").html( myDescription );
}
});
This assumes you work with this HTML:
<div class="fbphotobox">
<img data-title="Title 1" data-description="Desc 1" data-album="Album 1" fbphotobox-src="http://lorempixel.com/400/200/fashion/3" src="http://lorempixel.com/400/200/fashion/3" />
<img data-title="Title 2" data-description="Desc 2" data-album="Album 2" fbphotobox-src="http://lorempixel.com/500/300/food/2" src="http://lorempixel.com/500/300/food/2" />
<img data-title="Title 3" data-description="Desc 3" data-album="Album 3" fbphotobox-src="http://lorempixel.com/600/400/transport/1" src="http://lorempixel.com/600/400/transport/1" />
</div>
Working Fiddle/Example here

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