Items.push variable using JavaScript - javascript

I have an JSON array, that i manipulate inside my app,
...
$.each(data, function(key, val) {
val = link + val;
foto = val;
foto = foto.substr(0, foto.lastIndexOf(".")) + ".jpg";
/* Visualizza */
var elem = document.getElementById("archivio-num");
elem.innerHTML = '<img src="' + foto + '">';
elem.firstChild.onclick = function() {
cordova.exec("ChildBrowserCommand.showWebPage", val);
};
items.push('<li id="' + key + '">' + elem.innerHTML + '</li>');
});
...
Now i'm trying to push all elements outside that are packed inside var elem.
Puttin only + elem + give me an error [objectHTMLDivElement].
Is that possible?

Exploiting jQuery further, you might want to try something like this :
...
var $ul = $("<ul/>");//jQuery object containing a dummy UL element in which to accumulate LI elements.
$.each(data, function(key, val) {
var url = link + val;
var foto = url.substr(0, url.lastIndexOf(".")) + ".jpg";
var $a = $('<a/>').attr('href',url).append($("<img/>").attr('src',foto)).on('click', function() {
cordova.exec("ChildBrowserCommand.showWebPage", $(this).attr('href'));
return false;
});
$ul.append($('<li/>').attr('id',key).append($a));
});
$("#archivio-num").html($a);
...
Here, instead of accumulating the HTML in an array, actual LI elements are accumulated in a jQuery-wrapped UL element, which is available for further treatment (eg. insertion into the DOM) later in the code.

<script type="text/javascript">
$.getJSON('http://www..../json.php', function(data) {
var items = [];
var url;
var foto;
var link = 'http://www.bla.com/';
var $div = $("<div/>");
$.each(data, function(key, val) {
url = link + val;
foto = url.substr(0, url.lastIndexOf(".")) + ".jpg";
var $a = $('<a>').attr('href',url).append($("<img/>").attr('src',foto)).on('click',function(){
cordova.exec("ChildBrowserCommand.showWebPage", $(this).attr('href'));
return false;
});
$div.append($('<div/>').attr('id',key).append($a));
});
$("#archivio-num").html($a);
});
</script>

Related

JavaScript performance issue, appending li into ul offline

I have a performance related issue : it takes 10sec to load my ul -it contains more than 1000 li-.
Can you point me where the problem is. What can I optimize ?
Moreover I have some much trouble to read the profile result.
NB: the DOM element template is offline until I send it to the sandbox
var displayAllHypotheses = function () {
console.time('displayAllHypotheses');
console.profile('displayAllHypotheses');
var $template = $(_template);
var $item_example = $template.find('#item-example').clone();
var $list = $template.find('.content-ask ul.select-hypothese');
$item_example.removeAttr('id');
$template.find('#item-example').remove();
_$template_item_selected = $template.find('.item-example').removeClass('item-example').clone();
for (var i in _data_game.Hypotheses) {
var $clone = $item_example.clone();
var $a_select_hypothese = $clone.find('a');
$a_select_hypothese.html(_data_game.Hypotheses[i].nom).data('hypotheseid', _data_game.Hypotheses[i].id);
$a_select_hypothese.attr('href', '#' + i);
if (!!_hypotheses_selected[_data_game.Hypotheses[i].id]) {
$a_select_hypothese.addClass('inDaList');
}
$clone.appendTo($list);
}
$list.find('a').click(function () {
$('#mod_hypothese .part-select .select-hypothese a').removeClass('selected');
$(this).addClass('selected');
displayChooseButton();
});
$item_example = null;
$a_select_hypothese = null;
$clone = null;
$list = null;
console.timeEnd('displayAllHypotheses');
console.profileEnd('displayAllHypotheses');
return $template;
};
var initTemplate = function (data) {
console.time('initTemplate hypothese');
console.profile('initTemplate hypothese');
_template = data;
var $template = displayAllHypotheses();
$template.find('.close-modal').click(function () {
_sandbox.notify('close hypothese', null);
});
_sandbox.setTemplate($template);
initSearchBox();
displaySelectedHypotheses();
$template = null;
console.timeEnd('initTemplate hypothese');
console.profileEnd('initTemplate hypothese');
};
EDIT
So I tried the string concatenation :
var displayAllHypothesesString = function () {
console.time('displayAllHypothesesString');
console.profile('displayAllHypothesesString');
var $template = $(_template);
var $list = $template.find('.content-ask ul.select-hypothese');
var lis = '';
_$template_item_selected = $template.find('.item-example').removeClass('item-example').clone();
for (var i in _data_game.Hypotheses) {
if (!_hypotheses_selected[_data_game.Hypotheses[i].id]) {
lis += '<li><a data-hypotheseid="' + _data_game.Hypotheses[i].id + '" href="#' + i + '">' + _data_game.Hypotheses[i].nom + '</a></li>';
} else {
lis += '<li><a class="inDaList" data-hypotheseid="' + _data_game.Hypotheses[i].id + '" href="#' + i + '">' + _data_game.Hypotheses[i].nom + '</a></li>';
}
}
$list.empty().append(lis);
$list.find('a').click(function () {
$('#mod_hypothese .part-select .select-hypothese a').removeClass('selected');
$(this).addClass('selected');
displayChooseButton();
});
console.timeEnd('displayAllHypothesesString');
console.profileEnd('displayAllHypothesesString');
return $template;
};
It's working fast enough !!
But now I have HTML snippet in my JS and if the web designer need to pimp the li he'll have to go to the JS file.
But I guess there is no workaround on this issue, is there ?
You can try creating a variable and store all the data in it. Once you completed the loop, append it to the element you want so you dont have to call append that many times.
var listData;
for(var i; i<data.length; i++)
listData += "<li>some data</li>"
$("#element").html(listData)
Something like that.

Works $(this) after $.post?

Can I use $(this).parentsUntil()... after a $.post?
I need to remember what select element from the DOM changed and then append the information collected from my PHP to next select.
//OPTION SELECTED
$('body').on('change','.provincias, .partidos', function(e) {
var idSelect = $(this).attr('id');
var dataSelect = $(this).select2('data');
var value = dataSelect.id;
$.post('php/select/script.php', {id:idSelect, id_provincia:value, id_partido:value } , function(respuesta) {
data = JSON.parse(respuesta);
if(data.control == 0){
alert(data.error)
window.location.replace(data.url);
}else{
if(idSelect == data.thisSelect){
for(var u=0; u<data.array1.length; u++){
$(this).parentsUntil('.formRow').next().children(data.nextSelect).append('<option value="' + data.array1[u].id + '">' + data.array1[u].nombre + '</option>');
}
}else if(idSelect == data.thisSelect){
for(var t=0; t<data.array1.length; t++){
$(this).parentsUntil('.formRow').next().children('".' + data.nextSelect +'."').append('<option value="' + data.array1[u].id + '">' + data.array1[u].nombre + '</option>');
}
}
}
});
});
The typical solution is to define another variable to hold the value of this, e.g. self, or in this case, you might want to call it target:
...
var target = this;
$.post('php/select/script.php', {id:idSelect, id_provincia:value, id_partido:value } , function(respuesta) {
// Use target here.
}
just save the $(this) in a variable.
$('body').on('change','.provincias, .partidos', function(e) {
var el = $(this);
...
el.parentsUntil('.formRow').next().children(data.nextSelect).append('<option value="' + data.array1[u].id + '">' + data.array1[u].nombre + '</option>');

Hiding <p> field in javascript

Here's my code for gathering titles/posts from reddit's api:
$.getJSON("http://www.reddit.com/search.json?q=" + query + "&sort=" + val + "&t=" + time, function (data) {
var i = 0
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
i++
});
});
Basically every post (selftext) is assigned a different paragraph id (post0, post1, post2, etc) for every result that's pulled. I'm also going to create a "hide" button that follows the same id scheme based on my i variable (submit0, submit1, submit2, etc). I want to write a function so that based on which button they click, it will hide the corresponding paragraph. I've tried doing an if statement that's like if("#hide" + i) is clicked, then hide the corresponding paragraph, but obviously that + i doesn't work. How else can I tackle this?
Could you try something like the below?
showhide = $("<a class='hider'>Show/Hide</a>");
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
}
Alternatively:
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var showhide = $("<a class='hider" + i + "'>Show/Hide</a>");
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
});
i++
});

search with an array associate with javascript?

I want to do a search by name and surname with an array javascript, and the results in a div. for example: I write Ali in input, an it shoul show me Alison and Alibaba.
this is my code, but it's giving errors; are there other ways to do it?:
<input type='text' id='filter' placeholder='search'>
<div id='output' style='margin-top:50px '></div>
my array
var arrayD =[
{"Name":"Alison","Surname":"Kenn","Mobile":529129293},
{"Name":"Ashton","Surname":"Jhojan","Mobile":529129293},
{"Name":"Bith","Surname":"Klint","Mobile":129129293},
{"Name":"Ana","Surname":"Clow","Mobile":229129293},
{"Name":"Geoge","Surname":"Rich","Mobile":329129293},
{"Name":"kenneth","Surname":"Cooler","Mobile":329129}
]
var $result = $('#output');
$('#filter').on('keyup', function () {
var $fragment = $('<div />');
var val = this.value.toLowerCase();
$.each(arrayD, function (i, item) {
console.log( item[0].toLowerCase().indexOf(val));
if ( item[0].toLowerCase().indexOf(val) == 0 ) {
$fragment.append('<li>' + item[0] + ' ' + item[1] + '</li>');
}
});
$result.html( $fragment.children() );
});
http://jsfiddle.net/henrykend/ChpgZ/4/
The main problem with your code is that you're trying to reference fields in the object by ordinal position rather than name. There is nothing automagic in JavaScript which will read item.Name (or item["Name"]) from item[0].
There is also no need to build up a "false element" (in your case $fragment) and then append its children to the output area - you may as well do this in one go (remembering to .empty() it between calls).
Your corrected code:
var $result = $('#result');
$('#output').on('keyup', function () {
$result.empty();
var val = this.value.toLowerCase();
$.each(arrayD, function (i, item) {
if ( item.Name.toLowerCase().indexOf(val) == 0 ) {
$result.append('<li>' + item.Name + ' ' + item.Surname + '</li>');
}
});
});
And a live example: http://jsfiddle.net/ChpgZ/6/
You had couple of problems in your code.
Names of the elements we're wrongly placed (which you've fixed with the edit)
In the .each, you've used item[0] instead of item.Name (also surname)
See the following code
var arrayD =[
{"Name":"Alison","Surname":"Kenn","Mobile":529129293},
{"Name":"Ashton","Surname":"Jhojan","Mobile":529129293},
{"Name":"Bith","Surname":"Klint","Mobile":129129293},
{"Name":"Ana","Surname":"Clow","Mobile":229129293},
{"Name":"Geoge","Surname":"Rich","Mobile":329129293},
{"Name":"kenneth","Surname":"Cooler","Mobile":329129}
]
var $result = $('#result');
$('#output').on('keyup', function () {
var $fragment = $('<div />');
var val = this.value.toLowerCase();
$.each(arrayD, function (i, item) {console.log( item.Name.toLowerCase().indexOf(val) );
if ( item.Name.toLowerCase().indexOf(val) == 0 ) {
$fragment.append('<li>' + item.Name + ' ' + item.Surname + '</li>');
}
});
$result.html( $fragment.children() );
});

jquery get href and text from a tags on a page and show them in a div

This is my jquery code:
$(document).ready(function() {
var contentText = $.ajax({
url: "index.php",
async: false
}).responseText;
$("#defaultData").append(contentText);
$('img').each(function(){
$(this).remove();
});
//delegate?
var test = 0;
var href = 0;
var title = 0;
$('.btn').click(function(){
var href = $('a').each(function() {
$(this).attr('href');
});
console.log(href);
var test = $('a').each(function() {
$(this).text();
});
console.log(test);
$.each(href, function(i, val) {
$("#data").append(i + " => " + val + "<br/>");
});
$.each(test, function(i, val) {
$("#data").append(i + " => " + val + "<br/>");
});
});
//for (var i = 0; 50; i++) {
//var pageNum = $("a#specificLink").attr("href").match(/page=([0-9]+)/)[1];
});
What this code does:
It gets a page (index.php) prints it, removes the images and gets the href and text from all a-tags.
1st question:
text
should give me: link and text
but it gives me link and link :s
I realy don't get this
2nd question:
Alse I want to append the href and text to a div, seperated by semi colons.
So it looks like this:
link;text
link;text
...
Now I get:
link
link
text
text
...
This should give you all the link;text link;text
var test = "";
$('a').each(function() {
test += $(this).attr('href') + ';';
test += $(this).text() + ' ';
});
alert(test);
The reason you end up with link;link;link then text;text.. is because you are processing all links via
$.each(href, function(i, val) {
$("#data").append(i + " => " + val + "<br/>");
});
before even processing the texts. Add them at the same time as shown above.
I don't think that $('slector').each() is designed to return values. You should populate a viariable inside the loop like this:
var href = []
$('a').each(function() {
href.push($(this).attr('href'))
})
console.log(href)
Just to add, it appears that you're using .each the way that .map should be used:
var href = $('a').map(function() {
return this.href + ';' + $(this).text();
}).get();
$("#data").append(href.join(' '));

Categories