We Keep Coding

Json data from table in an onclick function show in seperate div

I'm trying to get data used in my table to be used in a div when I click on the table. The thing is, there are multiple tables in my script according to the data of my JSON. So my JSON consists of object that consists of object. For example:
My table(s) are rendered like this:
data.forEach(function(somedata){
return '<table><tr><td>'+somedata.something+'</td></tr></table>';
});
Now I've tried to get the onclick to work in this case but I cant seem to figure out how. I'd like to not use specific ID's rendered in the foreach like:
var i=0;
data.forEach(function(somedata){
i++;
return '<table id="'.id.'"><tr><td>'+somedata.something+'</td></tr></table>';
});
the variable somedata consists of an object so I cant just make an onclick in the html code of the table either and send the data in it.
So somedata would look something like this but json encoded:
somedata{
[0]=>array(
'something'=>'test',
'theobject'=>array(...)
),
[1]=>array(etc...)
}
Now what I want is to get the data from theobject in a seperate div as soon as I click on the table that belongs to the right somedata.
I've been thinking of making a jquery on click for this but then I would need specific ID's in the table(if that's the only possible solution then I'd take it). Cant I do something with this or something? Or send the data at the same time it's being rendered cause in my code I can at the moment of course reach to somedata.theobject
I think I'm thinking a bit too difficult about this. Am I?

You can pass this in onclick function like
return '<table onclick=makeObject(this)><tr><td>'+somedata.something+'</td></tr></table>';
And then use the function to get the data
function makeObject(that){
var tbl = $(that).find('tr').map(function() {
return $(this).find('td').map(function() {
return $(this).html();
}).get();
}).get();
}

There are a few ways to go about this. Rather than using the forEach function we can use the jQuery.map function, since you've indicated that you're open to using jQuery :-)
var $els = $.map(data, function(somedata, i){
var $el = $('<table><tr><td>'+somedata.something+'</td></tr></table>')
.click(function(e) {
populateDivWithData(somedata.theobject);
});
return $el;
});
The call to .click inside each will create a separate click handler for each item in data; each click handler then has access to the relevant theobject value.
EDIT: Thanks #Loko for the reminder about the .forEach built-in

Run JQuery when data is loaded in Firebase

i have a problem that i need first to get the image links from the Firebase data base then i call a JQuery code that will organize the images in a beautiful way >> But it seems that the Jquery runs before i get the images,
Help Please ..!
JS Function
new Firebase("https://zoominp.firebaseio.com/photos/"+imageID)
.once('value', function(snap)
{
link = snap.child('imageLink').val();
link = 'images/'+link;
var id = "img";
div.innerHTML += "";
});
JQuery
jQuery("#gallery").unitegallery(
{
tiles_type:"nested",
tiles_nested_optimal_tile_width:200
});

Firebase loads (and synchronizes) the data asynchronously. So the jQuery code you have, will indeed execute before the data has come back from the server.
To fix this, move the jQuery code into the Firebase callback:
var ref = new Firebase("https://zoominp.firebaseio.com/photos/"+imageID);
ref.on('value', function(snap) {
link=snap.child('imageLink').val();
link='images/'+link;
var id="img";
div.innerHTML = div.innerHTML +"";
jQuery("#gallery").unitegallery({
tiles_type:"nested",
tiles_nested_optimal_tile_width:200
});
});
I also changed once() to on(). With that tiny change, your HTML will be updated whenever the data in the database changes. Try changing the data and you'll experience the "magic" of Firebase.
Since asynchronous loading is hard to wrap your head around when you first encounter it, I highly recommend that you read the more in-depth answers to these questions:
How do I return the response from an asynchronous call?
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
Handling Asynchronous Calls (Firebase) in functions
Returning value from a jQuery function

i have never worked with a Firebase, but you will need to have your actual resources ready before running the jQuery - you cannot do this in a synchronous way, as when you call your jquery unitedGallery it is called before the .once('value') event triggers.
do you call that new Firebase(.... thing more times in a loop or something? you could do something like keeping information about whether have all the images loaded in an array. something like this: let's assume, your images are stored in an array allOfYourImages. then,
define a global variable like this
var images_loaded=[];
for(var i=0; i<allOfYourImages.length; i++){ images_loaded[i]=false; }
then i assume you somehow iterate over your pictures since you are using imageID. add an incrementing variable var image_number=0; before the iterator and do image_number++ after each image iteration. like
var image_number=0;
...iteratorofyourchoiseihavenoideawhatareyouusing...{
new Firebase("https://zoominp.firebaseio.com/photos/"+imageID).once('value', function(snap){
...DOM stuff previously did ...
images_loaded[image_number]=true;
checkAllImagesLoaded();
});
image_number++;
}
notice the checkAllImagesLoaded() function. this will look whether have all your images already loaded and fire the jQuery gallery thing, like this
checkAllImagesLoaded(){
var all_loaded=true;
for(var i=0; i<allOfYourImages.length; i++){
all_loaded &= images_loaded[i]; //in case any of the items is false, it will set the all_loaded to false
}
if(all_loaded){
..your jQuery.("#gallery").unitegallery stuff..
}
}

How to update cached jquery object after adding elements via AJAX

I'm trying to write a plugin-like function in jQuery to add elements to a container with AJAX.
It looks like this:
$.fn.cacheload = function(index) {
var $this = $(this);
$.get("cache.php", {{ id: index }).done(function(data) {
// cache.php returns <div class='entry'>Content</div> ...
$(data).insertAfter($this.last());
});
}
and I would like to use it like this:
var entries = $("div.entry"),
id = 28;
entries.cacheload(id);
Think that this would load another "entry"-container and add it to the DOM.
This is works so far. But of course the variable that holds the cached jQuery object (entries) isn't updated. So if there were two divs in the beginning and you would add another with this function it would show in the DOM, but entries would still reference the original two divs only.
I know you can't use the return value of get because the AJAX-call is asynchronous. But is there any way to update the cached object so it contains the elements loaded via AJAX as well?
I know I could do it like this and re-query after inserting:
$.get("cache.php", {{ id: num }).done(function(data) {
$(data).insertAfter($this.last());
entries = $("div.entry");
});
but for this I would have to reference the variable holding the cached objects directly.
Is there any way around this so the function is self-contained?
I tried re-assigning $(this), but got an error. .add() doesn't update the cached object, it creates a new (temporary) object.
Thanks a lot!
// UPDATE:
John S gave a really good answer below. However, I ended up realizing that for me something else would actually work better.
Now the plugin function inserts a blank element (synchronously) and when the AJAX call is complete the attributes of that element are updated. That also ensures that elements are loaded in the correct order. For anyone stumbling over this, here is a JSFiddle: http://jsfiddle.net/JZsLt/2/

As you said yourself, the ajax call is asynchronous. Therefore, your plugin is asynchronous as as well. There's no way for your plugin to add the new elements to the jQuery object until the ajax call returns. Plus, as you discovered, you can't really add to the original jQuery object, you can only create a new jQuery object.
What you can do is have the plugin take a callback function as a second parameter. The callback could be passed a jQuery object that contains the original elements plus the newly inserted ones.
$.fn.cacheload = function(index, callback) {
var $this = this;
$.get('cache.php', { id: index }).done(function(html) {
var $elements = $(html);
$this.last().after($elements);
if (callback) {
callback.call($this, $this.add($elements));
}
});
return $this;
};
Then you could call:
entries.cacheload(id, function($newEntries) { doSomething($newEntries); } );
Of course, you could do this:
entries.cacheload(id, function($newEntries) { entries = $newEntries; } );
But entries will not be changed until the ajax call returns, so I don't see much value in it.
BTW: this inside a plugin refers to a jQuery object, so there's no need to call $(this).

JavaScript/DOM - Help removing my inline JavaScript

Being new to JavaScript I have not been able to come up with a solution to this issue.
I want each "Add to Cart" button to invoke the same function "AddtoCart". I have achieved this but at the cost of inline JavaScript - something I would like to avoid.
onclick=
"AddToCart(document.getElementById('toy_title1').innerHTML,document.getElementById('toy_quantity1').value,document.getElementById('toy_price1').innerHTML)
So how would I achieve including this as part of the external JavaScript file, bearing in mind I have to be able to apply this to all 4 unique items

You could change your function that way:
function AddToCart(toyId) {
var title = document.getElementById('toy_title'+toyId).innerHTML;
var quantity = document.getElementById('toy_quantity'+toyId).value;
var price = document.getElementById('toy_price')+toyId).innerHTML
}
Then on each button you just pass the toy's ID
Just be carefull about sensitive data like price, leaving it on Javascript(I'm supposing you will send it to your back-end after this) is dangerous, it could be easily manipulated.
But if your intention is just a test or something like that, its ok.
EDIT:
to call your this function you would do something like that:
onclick="AddToCart(1)"
Where 1 is your toy's ID, you should change it to 2,3... depending on your toy.

then you should read more about addEventListener(standard) and attachEvent(IE)
//assume element means the button
//you can use getElementsByTagName, getElementsByClassName, querySelectorAll etc.
//to fetch your elements
//DRY, store the operation in a function so it's reusabe and not written twice
function thisFunction(){
AddToCart(document.getElementById('toy_title1').innerHTML,
document.getElementById('toy_quantity1').value,
document.getElementById('toy_price1').innerHTML)
}
if(element.addEventListener){ //check if the standard is supported
element.addEventListener('click',function(){ //use it to add the handler
thisFunction();
});
} else {
element.attachEvent('onclick',function(){ //else, we use IE's version
thisFunction();
}, false);
}

jQuery/JavaScript Execution Order

I have some items that I'd like the user to be able to filter using jQuery. The user selects their filter criteria and hits submit, and I make a call to my database. When this call completes, I fade out the existing containers with this function:
function clearGrid() {
var theseDivs = $('.grid-item');
$('.grid-item').fadeOut('fast', function() {
$(theseDivs).remove();
});
}
and then I append my new data with the following function:
function repopulate() {
<% #stuff.each do |gb| %>
$('#grid').append('<%= escape_javascript(render "/stuff", :gb => gb) %>');
<% end %>
resizeGrid();
}
The resizeGrid() function does some absolute positioning based on the other elements in the Grid. It seems like repopulate() is being called BEFORE the other elements are removed with clearGrid(), and thus the positioning of the new elements is off, and they're rendered as if the old elements are still there.
Is there a way to ensure that my repopulate() function doesn't get called until the other elements are well out of the way?

You should allow the clearGrid() function to call a callback once it's completed, and then pass it repopulate as that callback. Change clearGrid() to look like this:
function clearGrid(callback) {
var theseDivs = $('.grid-item');
theseDivs.fadeOut('fast', function() {
theseDivs.remove();
if(callback) {
callback();
}
});
}
And then, assuming your current code to call those two looks like this:
clearGrid();
repopulate();
You can change it to look like this:
clearGrid( repopulate );
Note: repopulate should not have () after it because you want to pass a reference to it, not call it.
Second note: I also changed clearGrid() to just use theseDivs rather than call jQuery again. It's slightly faster this way, although you probably won't be able to notice the difference.
If you know that there will only ever be <div> tags that you're working with, you could change the selector to $('div.grid-item') for another small speedup.

Try slowing down the repopulate method with
setTimeout( function(){ repopulate(); }, 50 );