Develop Reference

Keep getting same value from jQuery array

I have two problems.
I have a jQuery array which stores the URL's for images. Everything was working fine a few minutes ago, but now it's not. I have the following code for the images:
var images = ["link1","link2","etc","etc"];
index=0;
this to display them when you click their thumbnails:
$('.thumbnail').click(function(){
$('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>');
});
and this to show the previous/next images in the array:
$('.next').click(function(){
index = (index===0)?(images.length-1):(index-1);
$('.large_view img').attr('src',images[index]);
});
$('.previous').click(function(){
index = (index==images.length-1)?0:(index+1);
$('.large_view img').attr('src',images[index]);
});
My problem is that when I click a thumbnail, the same image (the first one in the array) always shows up. After that I can change the image properly with my next/previous buttons.
When I display the images in my array with code that includes the following, it shows up backwards, from the last item in the array to the first one: for(var i=0; i<images.length; i++)
P.S. the only reason the code inside .previous and .next are backwards is because the array is somehow backwards, like I said.

The first problem is that when any thumbnail is clicked, index will be at its original value of 0, which is what's always making the first one show up. To fix this, you'll need to determine the corresponding index from whichever thumbnail was clicked (perhaps using $(this).attr('data-image-index'), if you stuffed the index into an attribute like that).
The second problem is that you want to use .append instead of .prepend in the for loop to tack each new thumbnail onto the end of the set instead of the beginning.
Also, the click handlers for .next and .previous appear to be backwards.
And you might want to use $('.large_view').html(...) instead of $('.large_view').prepend(...) if you only want one large picture to be displayed at any given time.

1) your index is 0, so you are going to get the first image every time.
this line
$('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>');
should be changed, to reference the index of the clicked thumbnail instead of the variable called index. so something like
$('.large_view').prepend('<img src="'+ $(this).attr("index") +'" width="450px"/>');
You will add the index attr when creating the thumbnails, for example:
for( var i=0; i<images.length; i++){
var thumbnails = '<label class="align">' + '<img class="thumbnail" src="'+images[i]+'" index="' + i + '"/></label>';
$('.gallery').prepend(thumbnails);
}
2) for your second problem, you are using prepend, which as the name implies PREpends. you will want to use append() to get them in the forward sequence as you want.

jQuery Chosen plugin query

I am using chosen plugin for a multiple select and I want to dynamically display all the selected options somewhere in the page.
I am able to show them, however, I also want to remove them if someone deselects/removes them. This is what I am struggling with.
My code till now looks like
$(".chosen-select").chosen({max_selected_options: 5}).change(function() {
var bStr = "#home-summary-right";
var htmlContent = $("#home-summary-right").html();
$(".search-choice").find("span").each(function() {
$(bStr).html("" + htmlContent);
toAppend = '<span>' + $(this).text() + '</span>';
$(bStr).append(toAppend);
});
});
Okay
Otherwise, is there any way to disable removing of elements once they are select in the multiple select? There is that cross, to which I can do display none, but I still don't know how can i disable the backspace from removing the elements.

Okay, I fixed it.
I used setTimeout in combination with bunch of other things.
The problem was after change, the inner html would return the same content as before... So I called an event after pretty much everything was done. Works super smooth!

nestedsortable dynamic item not collapsing

I am using this nested sortable plugin mjsarfatti.com/sandbox/nestedSortable and the only issue I have so far is when I dynamically add an item to the "tree", I am not able to expand or collapse the item(s). I am just using the sample code so far, and adding to that.
How I am adding the items dynamically:
$('#new-button').on('click', function() {
var nextId = $('ol.sortable').nestedSortable('nextId');
var $li = $("<li id=\"list_" + nextId + "\"><div><span class=\"disclose\"><span></span>
</span>New Item</div>");
$li.addClass('mjs-nestedSortable-leaf');
$('ol.sortable').append($li);
})
When I add these new items to the tree, they work just fine - I can move them throughout the tree, make them children, etc.
However, when I try to collapse a new item that I have made a parent - there is no response.
I am sure I just haven't added the correct event handler somewhere, but I can't fin where that is happening. I have even triggered a destroy() and _create() of the tree after I add the new item(s), hoping that would "re-configure" all the items again. However, no luck there.
Can anyone tell me how I can properly hook up these new dynamically created items so they will be treated as other items in the tree?
Thanks!

Ok, after 2 days of looking at this, I was able to solve the issue. It is funny - the code I had been looking for was directly above the new code that I had entered. (Right under my nose.) Thanks to the kind people here for introducing me to: Visual Event - that greatly helped me to track down where the events were being created in the first place!
$('#new-button').on('click', function() {
var nextId = $('ol.sortable').nestedSortable('nextId');
//Begin creating dynamic list item
var $li = $("<li id=\"list_" + nextId + "\">");
var $lidiv = $("<div></div>");
var $disli = $("<span class=\"disclose\"><span></span></span>");
$li.addClass('mjs-nestedSortable-leaf');
//Assign event listener to newly created disclose span tag above
$disli.on('click', function() {
$(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
});
//Now actually start to append to DOM
$lidiv.append($disli);
$lidiv.append("New List Item " + nextId);
$li.append($lidiv);
$('ol.sortable').append($li);
})
Hopefully, this will help someone.
Here is a working copy in case you want to see it in action.

Making a scrollable List without drop down lists

I want to make a transition page that stands as a break between the Login page & the main page.
The Page contains nothing but The list of names ... So, I don't want to make it to be a drop down list ... I want the page to be filled with a scrollable list.
I tried making a div with some buttons inside it, but it doesn't look good. So, do you have any ideas on how can I make the page looks better, or whether I should use 2 divs inside each other & modify them using CSS?
This is what I made:
JS:
function GetClassesList(data) {
var classes = (typeof data) == 'string' ? eval('(' + data + ')') : data;
$('#ClasssesList').empty();
for (var i = 0; i < classes.length; i++) {
var text = '<button class="BigDiv" value="' + classes[i].Cls_ID + '" >' + classes[i].Cls_Name + '</button>';
$('#ClasssesList').append(text);
}
$("#ClasssesList").bind('click', 'button.BigDiv',CallLink());
}
HTML:
<div id="ClasssesList" ></div>
Thanks a lot.

It seems like your code works fine... If I understand correctly, you could define the height and width of #ClassesList and set the overflow to scroll in the CSS. Then, you can format the buttons to appear however you wanted when you are formatting the html inside of the for loop.
I don't understand exactly what you are looking for though. Maybe if you could clarify a bit.

I cannot append a child element to a list

I used to be able to append a child to a list dynamical but now for some reason the JavaScript functions stop working. Also the error console does not throw any errors and I have place several alert('') methods in between the code to make sure that the method is actually running. this is what I used to have and it used to work perfectly fine:
var o = document.getElementById('searchResults');
var li = document.createElement('li'); //creates a list item tag
//if counter is even then highlight the cell different than an odd one
if ((counter) % 2 == 0) {
li.setAttribute('class', 'par');
} else {
li.setAttribute('class', 'non');
}
// I copied the inner html from a row that was displaying. I got rid of the dynamic variables
// just so it is a little easier to understand.
li.innerHTML = "<label class='list3p1'>testing</label><label class='list3p2'>testing2</label><label class='list3p3'>2:23</label>";
o.appendChild(li);
this function was working but as I added other tables to index.php this functions stopped working. Moreover I have used this similar method in other pages. Also other methods are working and that is the only function that does not seem to work.

It had to do with the visibility. It took me a long time to find. I had the id of the table repeated and the visibility of the other table was hidden therefore I was adding items to a hidden table. sorry for the fool question.