I am generating a dynamic div using a for loop and I was surprised by the output. The code looks as follows:
for(continent in CityList)
{
$('<div id="'+continent+'Display"><div class="row top-buffer">').appendTo('#Display');
currentcontinent = CityList[continent];
for(city in currentcontinent) {
$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#Display');
}
$('</div></div>').appendTo('#Display');
}
The output html using
alert($("div#Display").clone().html());
is:
<div id="AmericaDisplay"><div class="row top-buffer"></div></div><div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>Boston</h3><a data-name="Boston" href="#Boston"> <img src="undefined" style="min-height:250px;height:250px;"></a></div></div></div>...
As you can see there are two </div></div> after the first append, but I expect those to be at the end of the html since I call them last in the for loop. Is there any reason for the loop to behave like this?
when you parse a tag with jQuery it creates a DOM object, which includes closing tags as well. If you want $('<div class="col-md-4"><div class="thumbnail">... to go inside $('<div id="'+continent+'Display"><div class="row top-buffer">') you need to append it to '#' + continent + 'Display' like so:
$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#' + continent + 'Display');
also, get rid of $('</div></div>').appendTo('#Display');, it serves no purpose when parsing elements with jQuery.
The code $('<div id="Display"><div class="row top-buffer">') will create jquery object so if you append it, the html will look like this
<div id="Display">
<div class="row top-buffer">
</div>
</div>
if you want to append the </div></div> in the end then save all the html in a variable and append it in the end
for(continent in CityList){
var data = '<div id="'+continent+'Display"><div class="row top-buffer">';
currentcontinent = CityList[continent];
for(city in currentcontinent) {
data += '<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>'
}
data += '</div></div>';
$(data).appendTo('#Display'); // or ('#Display').append(data);
}
Related
I need to get my div between 2 divs inside my template. I can only edit it with external HTML, JS.
Template looks like this:
<main id="content-in">
<div id="homepage-banner"> XXX </div>
<div id="carousel-banner"> XXX </div>
And I need to get my img and a href <div id="moveOut"> XXX </div> between these 2.
I have it like this now which works ok:
<script>
function addCode() {
var d1 = document.getElementById('content-in');
d1.insertAdjacentHTML('afterbegin', '<div id="moveOut"><img src="https://example.png" alt=""></div>');
}
</script>
but I need to move it.
Thank you for your help.
You need to insert after the homepage-banner DIV.
var d1 = document.getElementById("homepage-banner");
d1.insertAdjacentHTML('afterend', '<div id="moveOut"><img src="https://example.png" alt=""></div>');
I've got a load more button, which when clicked it displays the next 4 items, by doing an ajax call.
However, sometimes (for no apparent reason), the content is duplicated and returned twice, even though when I alert the results, there's only 1. This also happens when you double click the button.
Any help would be appreciated!
Here's my code:
/* load more */
$('.load-more').on('click',function(e){
e.preventDefault();
e.stopPropagation();
$('.pagination-holder').fadeOut(250,function(){
$(this).remove();
});
var start = $(this).data('start'),
limit = $(this).data('limit'),
page = $(this).data('page'),
type = $(this).attr('href');
$.ajax({
url:'/index.php?route=news/news/getnext&start=4&limit=4&page=2',
method:'GET',
data:{start:start,limit:limit,page:page},
dataType:'json'
}).done(function(data){
var html = '';
html +='<div class="row next" style="display:none">';
$.each(data.newss,function(i,news){
html +='<div class="col-md-3 pt30">';
html +=' <div class="image mb30"><img src="'+news.image+'" alt="'+news.title+'" class="responsive" /></div>';
html +=' <div class="text">';
html +=' <h3>'+news.title+'</h3>';
html +=' <p class="date mb5">'+news.date+'</p>';
html +=' <p class="mb30">'+news.description+'</p>';
html +=' Read';
html +=' </div>';
html +='</div>';
if ((i+1) % 4 === 0) {
html +='<div class="clear"></div>';
}
});
html +='</div>';
//alert(html); /* when I alert this, it displays one row, as it should do, but when i don't alert this, it can append duplicates */
$('#'+type+'-list').find('.row').after(html).ready(function(){
$('.row.next').fadeIn(500).removeClass('next');
});
});
});
I've seen similar questions throughout stackoverflow and I've tried to solve the issue, but I can't figure it out.
Hey you can use my same answer on it:
https://stackoverflow.com/questions/45788916/jquery-isnt-getting-dynamically-updated-data-from-button
thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.
I dynamically create a number of divs using javascript based on the number of sections in an external text file. The divs are initially populated with a graph but I'd like to be able to individually toggle the divs over to the raw data that was used to build each graph.
If the text file has 25 sections and creates 25 divs, how do I 'select' say, the 15th div to toggle to the alternate view?
http://jsfiddle.net/EwNRJ/2357/ - demo of a manual solution and framework of the dynamic solution
for (var i = 5; i < count+1; i++) {
new_divs += '<button class="div' + count + '_toggle">toggle ' + count + '</button>;
new_divs += '<div id="div' + count + '_main" class="main" ></div>';
new_divs += '<div id="div' + count + '_alt" class="alt" ></div>';
}
Use jQuery to select all of the child elements $('.container .child'), and then you can use the eq() function to get the nth element. Note that the arrays are zero-indexed, so the fifth element is element 4.
$(document).ready(function() {
// get 5th element (remember arrays are zero-indexed/start at 0)
var $fifth = $('.container .child').eq(4);
// show the fifth element has been selected by setting color to red
$fifth.css({color: 'red'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
I need to append a div tag inside an existing html structure. The problem is I am not able to target the div after which I need to append the new div. I need to append my div inside the "auto-scroll" div. And the div that is appended is getting dynamically generated.
What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.
Here is the html structure:
<div class="wrapper" id="cases">
<div class="row">
<div class="col-md-12 case-view-header">Header text</div>
</div>
<div class="auto-scroll">
</div>
</div>
My code:
$.each(caseRecords, function(index, value) {
var tb = $('#cases');
var autoscroll = $('.auto-scroll');
var html = "<div class='row data animate-row'>";
html = html + " <div class='col-xs-12 col-sm-2 col-md-2 col-lg-2 case-view-other height-fix'>" + this.c.CaseNumber + "</div>";
html = html + " <div class='col-xs-12 col-sm-4 col-md-4 col-lg-4 case-view-other height-fix'>" + this.c.Account.Name + "</div>";
html = html + " <div class='col-md-3 case-view-other height-fix'>" + this.cm.MilestoneType.Name + "</div>";
html = html + " <div class='col-xs-12 col-sm-3 col-md-3 col-lg-3 case-view-other height-fix align-center timer-case'> ";
html = html + " <div id='CountDownTimer" + index + "' data-timer='" + this.seconds + "'></div>";
html = html + " <div id='CountDownTimerText" + index + "' style='display: inline-block; position:absolute;'></div>";
html = html + " </div>";
html = html + "</div>";
tb.append(html);
setupCounter('CountDownTimer' + index, 'CountDownTimerText' + index, this.targetSeconds);
});
What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.
That is because tb is object of #cases div and you are appending contents to it. you need to target the inner div with class auto-scroll:
var tb = $('#cases .auto-scroll');
var tb = $('.auto-scroll').append(html);
instead of
tb.append(html);
use
autoscroll.append(html);
because tb is #cases whereas autoscroll is the element which you required