Develop Reference

jQuery $.load Not Executing

I am currently using jQuery on my Django site to reload a div once a user clicks a button.
$(document).ready(function(){
var post_list = Array.from(document.getElementsByClassName("post_container"))
for(var post in post_list){
post_list[post].id = 'post' + post;
}
var $arrows = $(".arrow");
$arrows.each(function(index){
var data = $(this).data();
var element = $(this);
element.on('click', function(event){
if(user_auth){
var currentParentElement = element.parent().parent().parent().get(0);
var id = $(currentParentElement).attr('id');
$(id).load(document.URL + ' ' + id);
}
})
})
});
From the console I can see that currentParentElement and id are pointing to the correct div to reload, but $(id).load() does not seem to be doing anything.
In the image linked below, the clicking the arrow buttons should make the green or red number change. The number does not change when the arrow is clicked, but it does change when I reload the entire page.
https://i.stack.imgur.com/T26wn.png

Your ID selector is missing the # symbol. For example, suppose the id of this target element is "myID":
var id = $(currentParentElement).attr('id');
Then the jQuery selector you're using is:
$('myID')
Which is looking for a <myID> element. There isn't one, so no matches are found, so there's nothing to call .load() on.
You could add the symbol to your selector:
$('#' + id).load(document.URL + ' #' + id);
(Note: The same correction was also made in the selector passed to load() for the same reason.)

How do I trigger click event on dynamically created input type 'file'?

I am attempting to add an input of type 'file' to a form dynamically. Actually the end user can add as many files as they would like to a form, so an array concept is needed. I can inject dynamic elements, but I can't figure out how to dynamically invoke the click of the input element just injected. Also, need to remove the dynamic element if the user chooses cancel on the input element.
I have created a jsfiddle showing the injection but the click event never fires when the trigger is run.
How do I trigger the 'click' event after injecting this element?
jsFiddle Html
<input id='button1' type='button' value='button1'>
<div class='container'>
</div>
jsFiddle JavaScript
$(document).ready(function () {
$('#button1').on('click', function(event) {
Button1_Click(event);
});
});
function Button1_Click(event) {
var container = $('.container');
var containerChildren = $(container).children();
var containerChildrenCount = $(containerChildren).length;
var inputId = 'fileInput[' + containerChildrenCount + ']';
$('.container').append('<input id="' + inputId + '" type="file" />');
$('#' + inputId).trigger('click');
}

Try removing the [] from the inputId variable.
I got it to work in your fiddle by changing it to this
var inputId = 'fileInput-' + containerChildrenCount

Dynamically Moving Through Hidden Tables With jQuery

I'm having issues moving through a sequence of Hidden Divs that will eventually turn into Tables on another page that I am working on and the issue that I am running into is that the jQuery Javascript code does not seem to be responding to calls.
My JS Fiddle Example:
http://jsfiddle.net/qwertycody/QUprb/3/
My Actual Applied Work:
http://www.voyagersclan.com/scripts/pokemon/poke_pc.php
<script type="text/javascript" src="jquery.js"></script>
<script>
var currentID = 1;
$(function() {
$('#left').on('click', function(){
var currentDiv = '#' + currentID;
$('currentDiv').hide(500);
currentID = currentID - 1;
currentDiv = '#' + currentID;
$('currentDiv').show(500);
})
});
$(function() {
$('#right').on('click', function(){
var currentDiv = '#' + currentID;
$('currentDiv').hide(500);
currentID = currentID + 1;
currentDiv = '#' + currentID;
$('currentDiv').show(500);
})
});
</script>
Above is a code sample of my Javascript that doesn't seem to work correctly.
The overall goal of this is to be able to move through dynamically generated Tables with Individually Assigned Divs that can freely be Shown and Hidden at the press of a button.

Your answer is very close! The problem is that your selector is using a string, instead of the variable you intialized!
var currentDiv = '#' + currentID;
$(currentDiv).hide(500); // works!
$('currentDiv').hide(500); // gets an element of type "currentDiv"
Look at this updated JSFiddle.
I also added some bounds checks into your event handlers. This way you can only scroll through the available tables (1-4).

Jquery traversing table elements

I am using Jquery to dynamically populate the table element. My table will have three columns - Label, textarea and a button. I am binding a click event on click of the button. Below is my Jquery code.
var rowElem = $('<tr id="'+ key + '" class="queryRow"> </tr>');
rowElem.append($('<td class="queryTitleCol">' + key + '</td>'));
var colElem = $('<td class="queryValueCol"></td>');
var textAreaElem = $('<textarea rows="10" cols="75"/>');
colElem.append(textAreaElem);
rowElem.append(colElem);
textAreaElem.val(value);
var btnCol = $(
'<td valign="top">'
+ '<button style="width:42px; vertical-align:middle; margin:2px;" title="delete">'
+ '<span class="ui-icon ui-icon-trash" style="float:left;"/>'
+ '</button>'
+'</td>');
rowElem.append(btnCol);
$("button", btnCol).click(action);
}
In the button event I am using Jqury.closest to get the TR tag and label element. Below is my code for button click.
function action() {
var rowElem = $(this).closest("tr");
var labelTD = $(".queryTitleCol", rowElem);
}
But labelTD , I am always getting as [td.queryTitleCol] as an array. I am not able to get the td element to get the lable element. I tried with find(), but still I am getting as td array.
rowElem.find('td.queryTitleCol');
How can I traverse and get the label name on click function of the button. Any help will be really appreciated.

Try
var label = $(".queryTitleCol", rowElem)[0].innerHTML;
or
var label = $(".queryTitleCol", rowElem).text();

You could try something like
$('button').click(function(){
$(this).prev('.queryTitleCol').text();
});
This will always grab the previous element with queryTitleCol as its class. It only returns one element, so you shouldn't run into the problem you've been describing.

You can try this
function action() {
var titleCol = $(this).parent().parent().find('td:eq(0)').text();
}
Check this FIDDLE

Javascript running twice

I have to develop a small application for school and I first designed in photoshop a bit and "converted" it into html. That went all fine. I created a custom dropdown with javascript and it worked smoothly. I've just tried implementing CodeIgniter into the design but the javascript started running twice.
I've tried comparing the code of the plain html version with the codeigniter result but I can't seem to find any difference.
Can any of you maybe help me?
Here's the CodeIgniter result:
http://intellia.itforit.net/index.htm
As asked by Krof Drakula here are the most important pieces of code:
The actual jquery plugin: (styleForm.js)
;(function($){
$.fn.styleForm = function() {
var form = this;
/* Select */
$('select', this).each(function(){
var div = '<div class="styledSelect"><ul>';
var first = false;
$('option', this).each(function(){
var cssclass = "";
if(!first) {
first = true;
cssclass = 'class="first"'
}
div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>';
});
div += '</ul></div>';
$(this).hide();
$(this).after(div);
});
$('.styledSelect ul').toggle(function(){
$('li:not(.first)', this).show("fast");
}, function(){
$('li:not(.first)', this).hide("fast");
});
$('.styledSelect ul li:not(.first):not(.selected)').click(function(){
var id = $(this).attr('id');
var content = $(this).text();
$('.styledSelect ul li.first').attr('id', id).text(content);
$('.styledSelect ul li').css({'font-weight': 'normal'});
$(this).css({'font-weight': 'bold'});
/* SELECT in Select form item */
var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0);
selected.setAttribute("selected", "selected");
//$(form).submit();
});
};
})( jQuery );
And here's where it gets launched: (canvasDrawing.js)
$(document).ready(function(){
$('form').styleForm();
//Unimportant canvas stuff
});
Thanx in advance,
Duckness

The problem is that your canvasDrawing.js, in the "unimportant canvas stuff", causes a javascript error. If the canvas it describes actually exists, your styleForm stuff only runs once. So add this to your HTML:
<canvas id="floorplan"></canvas>
And magic will happen. Or, in your canvasDrawing file, add clause like this right after styleForm:
var canvas = document.getElementById('floorplan');
if (!canvas)
return;
I'm not actually all that clear why having an error in that function causes it to run twice, but it's definitely the problem. See it: your code + a canvas element = working.