This is code from phone gap index HTML page.
function querySuccess(tx, results){
var len = results.rows.length;
var output = '';
for (var i=0; i<len; i++)
{
output = output + '<li id="' + results.rows.item(i).id + '">' + results.rows.item(i).list_action + '</li>';
}
messageElement.html('<p>There are ' + len + ' items in your list:</p>');
listElement.html('<ul>' + output + '</ul>');
}
After populating this database I need that how to get limited rows at each page, for ex 5 rows after clicking to next button. But the button is not present there. Then how to create it. Also how to pass the current ID to another HTML page.
Related
Here is my JSON
var gal = [
{
"folder":"nu_images",
"pic":"gd_42.jpg",
"boxclass":"pirobox_gall",
"alt":"Rand Poster 1",
"title":"Rand Poster 1",
"thfolder":"th",
"thumbpic":"th_gd_42.jpg"
},
{
"folder":"nu_images",
"pic":"gd_13.jpg",
"boxclass":"pirobox_gall",
"alt":"Explosive Pixel Design",
"title":"Explosive Pixel Design",
"thfolder":"th",
"thumbpic":"th_gd_13.jpg"
}
];
and here is my for loop
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML = "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + ""
};
I am trying to make my JSON show all of the objects in HTML one after the other. I can get it to show the first one or whatever number I put into the array but I don't know how to make it generate a list of them.
Here is a link to my jsfiddle. Any help you can offer would be greatly appreciated.
http://jsfiddle.net/o7cuxyhb/10/
It's being generated here <p id="gallery"></p> just not correctly.
You're overwriting your html with every loop iteration:
document.getElementById("gallery").innerHTML = ...
^---
Perhaps you want something more like
document.getElementById("gallery").innerHTML += ...
^---
which will concatenation the original html contents with your new stuff.
And technically, you shouldn't be doing this in a loop. Changing .innerHTML like that causes the document to be reflowed/re-rendered each time you change .innerHTML, which gets very expensive when you do it in a loop. You should be building your html as a plain string, THEN adding it to the dom.
e.g.
var str = '';
foreach(...) {
str += 'new html here';
}
document.getElementById("gallery").innerHTML += str;
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML += "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + "" };
Add a += instead of an = after innerHTML
Try this:
function displayJson(jsonArray){
var container = document.getElementById("gallery");
for (var i=0; i<jsonArray.length; i++){
var newElement = document.createElement("a").innerHTML = jsonToHtml(jsonArray[i])
container.appendChild(newElement);
}
}
function jsonToHtml(jsonObj){
//Define your dom object here
var el = document.createElement("a").innerHTML = '' // you code here
...
return el;
}
displayJson(gal);
I'm trying to populate a HTML select list from a text file located on the server. The file is setup like this:
ttt1111,John Doe
xxx2222,Jane Doe
etc....
The first column would be the <option value=""> and the second would be the displayed text. I read in the file and then split it into an array by each line. I'm having trouble trying to figure out the code to create the correct append line using the two values.
I'm extremely new to this so any help at all is appreciated, even just links to examples. This is my code so far, but it just assigns the entire line to the value and the text output.
function PopulateSupervisorList() {
var Suplist=[];
var SupervisorFile="text.txt";
var DDL = $("#iSupervisor");
var SuperID=[];
$.get(SupervisorFile,function(data) {
Suplist = data.responseText.split("\n");
for (var i=0; i < Suplist.length; i++) {
DDL.append("<option value='" + SuperID[i] + "'>" + Suplist[i] + "</option>")
}
});
}
You have to split each line in columns
try this
function PopulateSupervisorList() {
var SupervisorFile="text.txt";
var DDL = $("#iSupervisor");
$.get(SupervisorFile,function(data) {
var suplist = data.responseText.split("\n"),
cols;
for (var i=0, len=suplist.length; i<len; i++) {
cols = suplist[i].split(','); //split the line in columns
//so cols[0] -> ttt1111
//and cols[1] -> John Doe
//and so on for the rest lines
DDL.append("<option value='" + cols[0] + "'>" + cols[1] + "</option>");
}
});
}
Basically my search returns search results in spans, then when one is clicked, a new span is added to another div with a select input and hidden input so all the selected features can be posted as an array.
My question is, $(this).html() now includes a span of class alias_span. Which I don't want to appear in the new span. How do I remove it before inserting the contents of the clicked span into the new span
$(".minisearch_res").live('click', function() {
// when a search result is clicked we disable the submit button,
// append a span to the left column with an id,
// a select input to select standard/optional and
// a hidden field with the required information to save and something to
// show the user
var id = $(this).attr('id');
var html = "<span class= \"added_result_cont\" id=\"" + id + "_cont\">";
html += "<select name='" + id + "_sel'>";
html += "<option value=\"none\" selected=\"selected\"></option>";
html += "<option value=\"std\">Standard</option>";
html += "<option value=\"opt\" >Optional</option>";
html += "</select>";
html += "<span id= \"" + id + "\" class=\"added_result\">";
html += "<input type=\"hidden\" name=\"selectedfeat[]\" value=\"" + id + "\">";
html += $(this).html() + "</span></span>";
$('#div_apply_to').append(html);
$(this).remove();
$('#search_input').trigger('keyup');
$("input[type=submit]").attr("disabled", "disabled");
});
Update: here's the html of the span
<span class="minisearch_res" id="opt_1">Anti-Lock Brakes<br><span style="padding-left:20px" class="alias_span"><i>abs</i></span><br></span>
<div></div>
Add it to the dom, then remove it.
var htm = (
'<span class="foo">foo</span>' +
'<span>bar</span>' +
'<span>bar</span>' +
'<span>bar</span>' +
'<span>bar</span>'
);
var $el = $("div").append(htm);
console.log($el.html());
$el.find('.foo').remove();
console.log($el.html());
http://jsfiddle.net/chovy/w2HdE/
Got a tidy cross browser solution, which I'm very proud of :)
var temp = $(this);
temp.children('.alias_span').remove();
$('#div_apply_to').append("...html..." + temp.html() + "...html...");
inspiration came from here:
Remove element from Ajax Response
I am displaying table rows in the form. Each row has 5 columns, one of the columns is an (editable) textbox field.
ajaxLoading(true);
$.post('<%=request.getContextPath()%>'+"/processServlet", postData,
function(data) {
var ctxPath='<%=request.getContextPath()%>';
currentPosition = data.currentPosition;
var items = $("#itemsTable");
items.empty();
if (data.items.length == 0) {
items.append($('<tr><td colspan=5 style="color:red;">No items<td></tr>'));
}
;
for (var i = 0; i < data.items.length; i++) {
editText = "";
items.append($("<tr " + zebra + "><td><a href=\"javascript: deviceView('" + data.items[i].id + "')\">" + data.items[i].num +
"</a></td><td>" + data.items[i].itemType +
"</td><td><input type = 'checkbox' id = 'CheckBoxRow_' />" + data.items[i] +
"</td><td><input type = 'textbox' id = 'TextBoxRow_' value = '" + data.items[i].itemName +"' "/>" +
"</td><td>" + data.items[i].status +
"</td><td>" + data.items[i].date + "</td>" +
"<td>" + data.items[i].firmware + "<td>" +
"Delete" +
"</tr>"));
;
ajaxLoading(false);
}, "json");
How do I auto select the check box when the data is entered or modified in the textbox and save the data in the database?
bind to textbox onchange event and have it set the checkbox to checked=true once returned with a value (and not already checked).
$('#itemsTable input[type="checkbox"]').change(function(e){
var $cb = $(this);
if ($cb.is(':checked')){
$cb.closest('tr').find('input[type="checkbox"][id^=CheckBoxRow_]').prop('checked','true');
}
});
basically. though you really should not use HTML in an append, and should be building the objects with jQuery.
I'm applying DataTables
to utilize filtering, sorting and pagination on my HTML table. I'm using the following code to apply these attributes to the table:
$(document).ready(function() {
<!-- Sorting and pagination -->
var oTable = $('#mainTable').dataTable( {
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
<!-- Filtering -->
$("thead td").each( function ( i ) {
<!-- Create and populate combo boxes -->
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
<!-- Filter data when selection changes -->
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
});
});
});
On the function call:
fnCreateSelect( oTable.fnGetColumnData(i));
..the combo boxes are filled with the data from the table. However, the boxes are automatically sized to contain the full length of the values (some of which span many lines) and so the columns are sized too big and run way off the page. I've determined it's not a CSS issue, so what I need is a way to make the combo boxes use multiple lines per entry, or only show a portion of the value so that I can fit all these columns on one page.
Thanks in advance!
Answer for anyone following this:
I changed the code in fnCreateSelect (where the combo boxes are built) to limit how much text is stored per value in the combo boxes as such:
function fnCreateSelect(aData) {
var r = '<select><option value=""></option>', i, iLen = aData.length;
for (i = 0; i < iLen; i++) {
// If string is a URL, handle it accordingly
if (aData[i].indexOf("href") != -1) {
var url = aData[i].substring(aData[i].indexOf('http'), aData[i].indexOf('">'));
r += '<option title="' + url + '" value="' + url + '">' + url.substring(0, 25);
if (url.length > 25)
r += '...';
}
else {
r += '<option title="' + aData[i] + '" value="' + aData[i] + '">' + aData[i].substring(0, 40)
if (aData[i].length > 40)
r += '...';
}
r += '</option>';
}
return r + '</select>';
}