Develop Reference

How to update div content by changing panel name

When I edit panels name I want to update div content, that will have tab-pane name.
I tried to get the value and change it "onchange", but
I think I did something incorrectly.
http://jsfiddle.net/agata666/5zLmtqby/139/
var $foo = $(".tab-pane");
var $newPanelDefault = $foo.clone();
var hash = 1;
$(".add").on("click", function() {
var $newPanel = $newPanelDefault.clone();
var hashClass = 'zone-panel-' + generateHash();
$newPanel.find(".panel").data('hash', hashClass).attr("href", "#" + (++hash)).text("Zone " + hash);
$newPanel.attr("id", "tab" + hashClass);
var nextTab = $('.tabs li').size()+1;
$('<li class="' + hashClass + '">Zone ' + hash + ' <i class="fas fa-pencil-alt pencil"></i></li>').appendTo('.tabs');
$($newPanel).appendTo('.tab-content');
$(".pencil").click(function() {
$(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
});
});
var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');
function generateHash() {
return Math.random().toString(16).substr(-5);
}
addZoneButton.addEventListener('click', function () {
var randomNumber = generateHash();
panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});
$(".pencil").click(function() {
$(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
});
Could you help me?

Get Input in Div with Starting-ID

I would like to select a Input inside a Div which has a dynamic id ([id^="SML_ID_"]) is it possible to archive it?
My Example-Code is this:
$('[id^="SML_ID_"] .social_media_input_type').on("change", function() {
var Link_ID = $('[id^="SML_ID_"]').attr("id");
var Link_Type = $("SML_ID_" + Link_ID + " > social_media_input_type").text();
Link_ID.replace("SML_ID_", "");
$("SML_ID_" + Link_ID).text("Input a" + Link_Type + "link");
});
Any Idea?
EDIT:
HTML-Structure:
var Link_ID = 0;
$("#AddSocialMediaLink").on("click", function() {
Link_ID = Link_ID + 1;
var AddSML_HTML_String = '<div id="SML_ID_' + Link_ID + '" class = "social_media">\n\
<input class="social_media_input_type" type="text" placeholder="Input a Type!"/>\n\
<input class="social_media_input_link" name="" placeholder="Input a link" / >\n\
</div><br/>';
$("#social_media_form").prepend(AddSML_HTML_String);
})

Use delegation by attaching to a container
$(document).on('change','[id^="SML_ID_"] .social_media_input_type', function() {
var Link_ID = $('[id^="SML_ID_"]').attr("id");
var Link_Type = $("SML_ID_" + Link_ID + " > social_media_input_type").text();
Link_ID.replace("SML_ID_", "");
$("SML_ID_" + Link_ID).text("Input a" + Link_Type + "link");
});

Can't get json object

I am trying to get city name from input element and then get the weather information and also timezone information of the city from API.
However i can't get the json object in that function but it works outside the function.
Can anyone help me?
var d = "Lisbon";
$(document).ready(function() {
$("#button").click(function() {
d = document.getElementById("input").value;
$(document).ready(function myfunction() {
$.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=11d324c05e02e308c1c9eb8d8041b143&q=' + d + '&units=metric', function(data) {
document.getElementById("city").innerHTML = data.name + ", " + data.sys.country;
document.getElementById("wind").innerHTML = data.wind.speed + " m/s ";
document.getElementById("cloudiness").innerHTML = data.weather[0].description;
document.getElementById("pressure").innerHTML = data.main.pressure + " hpa";
document.getElementById("humidity").innerHTML = data.main.humidity + " %";
document.getElementById("coord").innerHTML = "[ " + data.coord.lat + ", " + data.coord.lon + " ]";
document.getElementById("temperature").innerHTML = data.main.temp + "°C";
document.getElementById("icon").innerHTML = "<img src=http://openweathermap.org/img/w/" + data.weather[0].icon + ".png" + ">";
console.log(data);
(function() {
$.getJSON("http://api.geonames.org/timezoneJSON?" + "lat=" + data.coord.lat + "&" + "lng=" + data.coord.lon + "&username=hrrs", function(data) {
document.getElementById("time").innerHTML = data.time;
document.getElementById("timeCity").innerHTML = data.timezoneId;
document.getElementById("country").innerHTML = data.countryName;
document.getElementById("sunrise").innerHTML = data.sunrise;
document.getElementById("sunset").innerHTML = data.sunset;
console.log(data);
});
})();
});
document.getElementById("slayt").innerHTML = '<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?tag=' + d + '&width=1920&height=500&" frameborder="0" width="1920" height="500" scrolling="no" marginwidth="0" marginheight="0"></iframe>';
})();
});
});

Is this what you are trying to achieve?
http://jsfiddle.net/wnunhhac/
<input type="text" id="inputCity" value="Zurich"/>
<input type="button" id="start" value="Go" />
<br />
<span id="city">click go</span>
$(document).ready(function() {
$("#start").click(function() {
var d = $("#inputCity").val();
$.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=11d324c05e02e308c1c9eb8d8041b143&q=' + d + '&units=metric', function(data) {
$("#city").html(data.name);
});
});
});
The API returns status code 404 not found, if the city is invalid. So you should code an appropriate resonse.
if (data.cod === "404") {
// Api could not find city
return;
}
Also I changed the button type to "button" instead of "submit"
<button type="button" id="button" class="btn btn-default">
Corresponding Fiddle: http://jsfiddle.net/xvn6f05w/

modal images generate wrong code under FF and IE

My modal images seems to be working only under Chrome. In Firefox and Internet Expoler modal images generate code with errors:
<img src="" http:="" localhost="" ceramikakornak="" images="" realizacje="" klasyczne="" 3.jpg""="" class="img-responsive">
In Chrome modal windows is ok and looks:
<img src="images/realizacje/1.jpg" class="img-responsive">
JavaScript which i use to generate Modal Window:
$(document).ready(function() {
$('.realizacje-fota').each(function(){
var checkClass = $(this);
var image_url = checkClass.css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
// alert(image.width + 'x' + image.height);
var ratio = image.width/image.height;
if (ratio > 1) {
checkClass.addClass("realizacje-fota-pion");
}
else if (ratio <= 1) {
checkClass.addClass("realizacje-fota-poziom");
}
});
image.src = image_url;
}
});
});
$(document).ready(function(){
$('.lazy div').on('click',function(){
var src = $(this).css('background-image');
var src = src.substring(4, src.length);
var src = src.substring(0, src.length - 1);
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('div').index();
var html = '';
html += img;
html += '<div style="clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+1) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>'
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('.row div:nth-child('+ index +') img').attr('src');
$('.modal-body div').str('scr', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('.row div').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});

Adding Delay between inserting data in row

I am recieving data (10 records at a time) and inserting it in a div in a javascript loop
var a1 = $('.HomeAnnoucement').length;
var a2 = $('.HomeAnnoucement').length;
for (a1 ; a1 < (+a2 + +data.d.length) ; a1++) {
var a = a1 - a2;
var newFormat = '<div class="HomeAnnoucement"><label class="annID" id="archannouncementID' + a1 + '" style="display: none;" /><div class="DateandDelete left"><a class="AnnoucementDate left"><strong>' + data.d[a].EffectiveDate.split('/')[1] + getPostWord(parseInt(data.d[a].EffectiveDate.split('/')[1])) + '</strong> ' + getMonthString(parseInt(data.d[a].EffectiveDate.split('/')[0])) + '</a><div class="clear"></div></div><a class="AnnoucementTitle left"><strong id="archannTitle' + a1 + '" class="bold"></strong></a><div class="clear"></div></div><div class="AnnoucementDescription" id="archannDescription' + a1 + '" style="display:none;"></div>';
$('#archivedAnnouncements').append(newFormat);
$('#archannouncementID' + a1).append(data.d[a].ID);
$('#archannTitle' + a1).append(data.d[a].Title);
if (data.d[a].Owner != "" && data.d[a].Owner != " ") {
$('#archannTitle' + a1).append('<label style="font-weight: normal !important;"> by ' + data.d[a].Owner + '</label>');
}
var description = data.d[a].Description.replace(/\"/g, "'");
var div = document.createElement("div");
div.innerHTML = description;
var descriptiontext = div.textContent || div.innerText || "";
$('#archannDescription' + a1).html(data.d[a].Description);
}
I want to add delay in between inserting the rows. So that the user could see each record insertion in the grid. I have tried inserting the elements with display: none and fadingIn setTimeOut function but that didnt work. Please help.

Use JQuery Show with animation
Here is sample quoted form page above
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Show it</button>
<p style="display: none">Hello 2</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
</body>
</html>
In this case you can add hidden controls to child list, and call show with animation in loop

JQuery .delay() would help you
http://api.jquery.com/delay/

I've modified your existing code to hide each row and then set a delay and fadeIn...
var a1 = $('.HomeAnnoucement').length;
var a2 = $('.HomeAnnoucement').length;
for (a1 ; a1 < (+a2 + +data.d.length) ; a1++) {
var a = a1 - a2;
var $newFormat = $('<div class="HomeAnnoucement"><label class="annID" id="archannouncementID' + a1 + '" style="display: none;" /><div class="DateandDelete left"><a class="AnnoucementDate left"><strong>' + data.d[a].EffectiveDate.split('/')[1] + getPostWord(parseInt(data.d[a].EffectiveDate.split('/')[1])) + '</strong> ' + getMonthString(parseInt(data.d[a].EffectiveDate.split('/')[0])) + '</a><div class="clear"></div></div><a class="AnnoucementTitle left"><strong id="archannTitle' + a1 + '" class="bold"></strong></a><div class="clear"></div></div><div class="AnnoucementDescription" id="archannDescription' + a1 + '" style="display:none;"></div>');
$('#archivedAnnouncements').append($newFormat);
$('#archannouncementID' + a1).append(data.d[a].ID);
$('#archannTitle' + a1).append(data.d[a].Title);
if (data.d[a].Owner != "" && data.d[a].Owner != " ") {
$('#archannTitle' + a1).append('<label style="font-weight: normal !important;"> by ' + data.d[a].Owner + '</label>');
}
var description = data.d[a].Description.replace(/\"/g, "'");
var div = document.createElement("div");
div.innerHTML = description;
var descriptiontext = div.textContent || div.innerText || "";
$('#archannDescription' + a1).html(data.d[a].Description);
$newFormat.hide().delay(a * 500).fadeIn();
}