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.)

Dynamically adding ng-model to input boxes attribute using jquery

I want to dynamically add ng-model to input boxes attribute using jquery.
I want to do this because i have over 10 input boxes, so i only want to use one.
So what i have done is have many check boxes and when i check on a specific one a input boxes will slide down.
$(function() {
$( "#datepickerFr" ).datepicker();
$( "#datepickerTo" ).datepicker();
$('#dateInput').slideUp();
$('#textInput').slideUp();
var optionC = [];
$('[name="searchOption"]').each(function(i, obj) {
$(this).click(function() {
var textSearch = $(this).parent().text();
var e_name = $(this).attr('id');
var lastName = e_name.substring(e_name.length - 4, e_name.length);
if (lastName == "Date") {
$('#searchLabelD').html(textSearch + " Pick a date ( Month | Day | Year )");
$('#datepickerFr').attr('ng-model', e_name + 'Fr');
$('#datepickerTo').attr('ng-model', e_name + 'To');
$('#dateInput').slideDown();
$('#textInput').slideUp();
} else {
$('#inputSearch').attr('ng-model', "search." + e_name);
$('#searchLabelT').html(textSearch);
$('#dateInput').slideUp();
$('#textInput').slideDown();
}
});
});
});
So far when i look at the inspector element i see that ng-model attribute is there but it doesnt seem to be doing anything.

Why not assign the ng-model to empty $scope variables, and only fill the one you want to fill instead of trying to add ng-model. The reason why this isn't working is like AngularHarsh said, because your angular code is allready applied when you are adding ng-model with jquery

Change one element for each click with jquery

I have a box , like this :
<div class="box">
</div>
And i want to do something with jquery that changes the text of that element for each time that the .box get clicked !
For example,
for first time , i click on the box, i want to have : <div class="box">Test1</div>
For second time , i click on that , i want this : <div class="box">Test2</div>
+...
I khow i can use this code for click event :
$('.box').click(function(){
$(this).text();
});
But i want something to do , to have multiple values for each click !
EDit :
I don't need a value + count ! i need new string each time

You can use that code:
var myTexts = ["text1", "text2", "text3"];
$('div.box').click(function (indexOfArray) {
$(this).text(myTexts[indexOfArray]);
})

try to store your click count in a variable.
var i = 0;
$('.box').click(function(){
i++;
$(this).text('Test'+i);
});

var clix = 1;
$('div.box').click(function () {
$(this).text('Test' + clix++);
})
jsFiddle example

This is one way to do it. See this fiddle
$('.box').click(function(){
var $this = $(this),
count = $this.data("count") || 0;
count += 1;
$this.text("Test" + count.toString());
$this.data("count", count);
});

jQuery traversing and finding textboxes

If I am looping through elements in a table - say a hidden field of class "pmtos" - how do I get a reference to the text field (input) within the same cell in the table?
jQuery is:
// Loop through each hidden field, which holds the outstanding amount
$(".pmtos").each(function () {
var os = $(this).val();
//
//find text box in same cell - and populate with some value
//
//
});
Thank you for any guidance in getting this working.
Mark

Here's a solution to the question before it was edited (as requested):
$('#allocate').click(function () {
var recd = parseFloat( $('#pmtRecd').val() );
$('input.pmtallocated').each(function() {
var value = parseFloat( $(this).parent().prev().text() );
this.value = (recd >= value) ? value : recd;
recd = recd - this.value;
if (recd == 0) {
return false;
}
});
});
Note: This doesn't rely on the hidden input. It takes the text from the td in the second column.
Here's the fiddle
To answer the question post-edit
You can use siblings('.pmtallocated') or prev('.pmtallocated') to get the input. Using siblings() would probably be the better of the two as it doesn't rely on pmtallocated coming directly before pmtos in the markup:
$(this).siblings('.pmtallocated').val()

Try
// Loop through each hidden field, which holds the outstanding amount
$(".pmtos").each(function () {
var os = $(this);
var cell = os.parent(); // gets the parent, i.e. the table cell
var input = cell.find('input')[0];
});

You could use $(this).closest('input')

Check this out. may works for you.
$(".pmtos").each(function () {
var os = $(this).val();
var input = $(this).closest('td').find('input[type=text]');
});

textbox keyup event not working properly

I am using following code to update one textbox value txtUnitPrice based on other textbox txtQuantity ,both can be generated dynamically which is done.
//update unitprice based on quantity of product and tax applied
$('input').live('keyup', function () {
var inputId = $(this).attr('id'); //get textbox txtQuantity id
var rowNum = parseInt(/txtQuantity(\d+)/.exec(inputId)[1], 10); //get row id
var productValue = $("#ddlProduct" + rowNum).val();
var taxValue = $("#ddlTax" + rowNum).val();
var unitPriceValue = $("#txtUnitPrice" + rowNum).val();
var quantityValue = $("#txtQuantity" + rowNum).val();
if ((quantityValue != " ") && (quantityValue > 0)) {
$("#txtUnitPrice" + rowNum).val(unitPriceValue * quantityValue);
}
else {
$("#txtUnitPrice" + rowNum).val(unitPriceValue);
}
});
Now problem arising in the code above is that when I even moving cursor forward or backward in the textbox txtQuantity then the value for txtUnitPrice is changing becuase which this event 'keyup' is firing and hence whole code is executed with the existing txtunitprice value and multiplies this again with the existing txtquantity which I dont' want Please can anyone help me regarding this . Thanks

Just add a check to ignore the cursor movements like shown below
$('input').live('keyup', function (e) {
if([37, 38, 39, 40].indexOf(e.which)){
return false;//do nothing because the cursor keys have been pressed
}
//the rest of your code
});