Develop Reference

Bootstrap container closes early

I'm trying to use bootstrap containers to make rows of 3 panels; however, with my current code one panel ends up in the container and two are left outside.
I'm not too sure where I'm going wrong.
I've counted and recounted my <div> and </div> so many times so I don't believe that is the issue
//var count = 0; above
//for loop for n > 3 above
html = "";
if (count%3===0) {
html = html + "<div class=\"container\">" +
"<div class=\"row\">";
}
html = html + "<div class=\"col-sm-4\">" +
"<div class=\"panel panel-primary\">" +
"<div class=\"panel-heading\">" + name + "</div>" +
"<div class=\"panel-body\"><img src=\"" + imageURL + "\"class=\"img-responsive\" style=\"width:100%\" alt=\"Image\"> </div>" +
"<div class=\"panel-footer\"> <h2>$" +
price.toString() + recString + "</h2>" + description + "</div> </div> </div>";
if (count%3===2) {
html = html + "</div> </div> <br> <br>"
}
count = count + 1;
$('#items').append(html);
Here is the items div in my html file.
<div id="items" >
</div><br>

By appending to the $items div in each iteration of the loop, the web browser checks and sees that the items div has been closed after the append. When a parent is closed, the web browser closes all the children, including the container and row divs.
Solution was to append at the end outside of the loop

jQuery Mobile dynamic content -cannot select tag

I'm working with jQuery Mobile in a google web app and just having some issues selecting a tag. More specifically, I have content that is loaded from an external source so need to have a loading page initially. Once the external source is available I then update the page with the content using jQuery. Included in this content is an input tag. The issue is when I update the page, I cannot then cannot find the value of this input tag.
Here is my code below:
(intial html - Before content is loaded)
<div class="ui-body ui-body-a">
<div id="googleList" >
<fieldset data-role="controlgroup" data-mini="true" >
<input type="checkbox" name="checkbox-v-6a" id="checkbox-1-a">
<label for="checkbox-v-6a">Loading . . . </label>
</fieldset>
</div>
</div>
Here is my jQuery to update the code above when the new content comes in:
function showTaskList(tasks)
{
//Generate HTML
var htmlToInsert = "<fieldset data-role=\"controlgroup\" data-mini=\"true\" >";
for(var i = 0; i < tasks.length; i++)
{
htmlToInsert += "<input type=\"checkbox\" data-id=\"" + tasks[i][1] + "\" name=\"checkbox-" + i + "-a\" id=\"checkbox-" + i + "-a\" class=\"custom taskCheckBox\" ";
if(tasks[i][2] != undefined)
htmlToInsert += "checked=\"checked\"";
htmlToInsert += " />";
htmlToInsert += "<input id=\"currency-controlgroup1\" data-id=\"" + tasks[i][1] + "\" type=\"text\" value=\"" + tasks[i][0] + "\" data-wrapper-class=\"controlgroup-textinput ui-btn\" class=\"taskinputBox\">";
}
//Insert HTML into site
$("#googleList").html(htmlToInsert + "</fieldset>");
//Refresh List
$("#googleList").trigger("create");
}
Here is my code to get the input tag value
$(document).ready(function(){
function processTaskList()
{
console.log("Test");
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("data-id");
console.log("CheckBox:" + checkBoxId );
});
}
});
CheckBoxId keeps coming back undefined when I click on one of the checkboxes. I want to be able to read the data-id value. I'm not sure how to fix this? Any help is appreciated.

I tested the code below again, and it works - Thanks for your help
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("id");
console.log("CheckBox:" + checkBoxId );
});

how to put a button inside div where data is filled dynamically through $.each function

This should be very simple but i am struggling here.
I have a parent div which have multiple child div. These child div are generated according to $.each() function. Number of times function run, num of div get generated.Now, i want to write a server side function on button click but i am unable to list that button in these child div.
<div class="div1">
<div class="div2">
// this is the button which i cant see in my div2 div
<button type="input">follow</button>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("/Home/GetUsers", null, function(data) {
$(".div1").html("");
$.each(data, function(i, item) {
var html = "<div class='div2'>";
html += "Name: " + item.UserName + "<br />";
html += item.ArticleCount;
html += "<img src='" + item.UserImage + "'height='20px' width='20px'/>"
html += "</div>";
$(".div1").append(html);
});
});
});
</script>
</div>
</div>
Any type of guidance appreciated.

If you'd like to add a button per child div you can do it in this way:
$(document).ready(function() {
var parent = $(".div1");
$.getJSON("/Home/GetUsers", null, function(data) {
parent.html("");
$.each(data, function(i, item) {
var html = "<div class='div2'>";
html += "Name: " + item.UserName + "<br />";
html += item.ArticleCount;
html += "<img src='" + item.UserImage + "'height='20px' width='20px'/>";
html += "<button type='button' class='newButton'>Click Me!</button>";
html += "</div>";
parent.append(html);
});
});
// In order to ensure that the button click is handled no matter when it was
// added, we can delegate the handler to the parent.
parent.on('click', '.newButton', function(e) {
var button = $(this);
// Handle the individual button click server side call here.
});
});

Optimize way to append element in html using jquery

What is the optimize way to append this element to my specific DIV Class using JQUERY. This will generate dynamic elements. I use .AppendTo then display dynamically the element inside <div class='parent-list-workorder'>.
Here's my code so far but it doesn't work:
$(document).ready(function(){
var ListOfWorkOrders = [];
$("#button").click(function(){
//var _WOID = $('.list-workorder-id').text();
var _WOID = $('#txtWOID').val();
//alert(_WOID);
$.ajax({
url:'getWorkOrders.php',
type:'POST',
data:{id:_WOID},
dataType:'json',
success:function(output){
for (var key in output) {
if (output.hasOwnProperty(key)) {
$("<div class='child-list-workorder'>
<div class='list-workorder'>
<div class='list-workorder-header'>
<h3 class='list-workorder-id'>" + output[key] + "</h3>
</div>
<p>" + Sample + ":" + key + "</p>
</div>
</div>").appendTo("<div class='parent-list-workorder'>");
//alert(output[key]);
}
}
console.log(output);
}
});
});
});
Am I missing something?

Your problem is in the code below:
.appendTo("<div class='parent-list-workorder'>");
The parameter of appendTo() should also be a valid selector.
you can try this instead:
.appendTo("div.parent-list-workorder");
granting that div.parent-list-workorder already exists.

You have two problems. First, you need to use a selector as an argument to .appendTo(), not an HTML string. Second, you need to remove or escape the newlines in the HTML string.
$("<div class='child-list-workorder'>\
<div class='list-workorder'>\
<div class='list-workorder-header'>\
<h3 class='list-workorder-id'>" + output[key] + "</h3>\
</div>\
<p>" + Sample + ":" + key + "</p>\
</div>\
</div>").appendTo("div.parent-list-workorder");

Update the content of a listview on 'pageshow'

I am trying to get a listview to populate with data on "pageshow". Using Javascript and JQM 1.3.2.
My html section is my page
<div data-role="page" data-theme="b" id="listPlaces">
<div data-role="header" data-position="fixed">
<h4>Header</h4>
</div>
<div data-role="content">
<div class="content-primary" id="content-primary"></div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
I'm calling an external javascript:
$(document).off("pageinit", "#listPlaces");
$(document).on("pageinit", "#listPlaces", (function parseData(){
var output = '', val;
var output = '<ul data-role="listview" data-autodividers="true" id="listOfPlaces">';
for (val in localStorage) {
if (localStorage.hasOwnProperty(val)) {
place = JSON.parse(localStorage[val]);
output += '<li><div data-role="collapsible">' + '' + place["name"] + '<br /><span style="font-size:10px;padding-left:20px">' + place["address"] + '</span><div></li>'
}
}
output += '</ul>';
return output;
}));
$(document).on("pageshow", "#listPlaces", (function() {
alert('in pageshow');
var div = $('#content-primary');
div.output(parseData());
div.find('ul').listview();
}));
I see the 'in pageshow' alert, but then parseData() is not defined. I have no idea how to fix this. When I send output to console.log it looks fine and I can copy it into another file and have it display correctly.
Any help is appreciated. I'm new to posting on this site so I tried to follow the rules. Apologies in advance if I did something wrong. I also did search the site and found this answer how to update the styles to a listview in jquery mobile? which helped, but I'm still stuck on this pageshow function.
Thanks

div.output(parseData());
What is .output()?? --> maybe you are looking for .html()?
This should do it:
$(document).off("pageinit").on("pageinit", "#listPlaces", parseData);
$(document).on("pageshow", "#listPlaces", (function() {
alert('in pageshow');
var div = $('#content-primary');
div.html(parseData());
div.find('ul').listview();
}));
function parseData(){
var output = '', val;
var output = '<ul data-role="listview" data-autodividers="true" id="listOfPlaces">';
for (val in localStorage) {
if (localStorage.hasOwnProperty(val)) {
place = JSON.parse(localStorage[val]);
output += '<li><div data-role="collapsible">' + '' + place["name"] + '<br /><span style="font-size:10px;padding-left:20px">' + place["address"] + '</span><div></li>'
}
}
output += '</ul>';
return output;
}