We Keep Coding

How to us $.data in a loop to display correctly for each div

When I click a marker on my map, I want to display data from the database associated with that marker. Currently I am doing this for the divs that I create. I am having a problem when I click on a div to open my form under it, I want to load the same data into the form, but currently the only data that will load into each for is the first one that ran through the loop.
Another words, my venue-list div might hold 3 venues for this one location, and I can click on each div and display a form under it, but if "Sally's Salon" is the first div in the list, every form will display "Sally's Salon" instead of their own name. Here is my code:
// initially detach form to be attached to each div on click
var editForm = $('.edit-container').detach();
function fillForm(title, priority) {
$('.venue-input').val(title);
$('.priority-input').val(priority);
}
for(var i = array.length -1; i>=0; i--) {
var prop = array[i].feature.prop
if(prop.title) {
// create variable to hold html
var html = $([
"<div class='venue-item'>",
" <span><strong>Venue Name</strong></span>",
" <span class='venue-name venue-title' data-title=" + prop.title + ">" + prop.title + "</span>",
"<span class='venue-priority' data-priority=" + prop.prioritylevel + "><strong>Priority</strong>" + ' ' + prop.prioritylevel + "</span></div>"].join("\n"));
// append venue item to venue list div with event handler to add form and prefill when clicked
$(html).appendTo('.venue-list').on('click', function() {
$(this).after(editForm);
fillForm($('.venue-title').data('title'), $('.venue-priority').data('priority'));
});
}
any input would be helpful, I've been battling this for a couple days now, not sure if I am even attaching the html elements correctly but I mainly just want to be able to click on one of the html elements I create and then the data gets loaded into the form so it can be manipulated.

You are appending multiple copies of your content, however there are 2 elements using the same id (venue-priority & venue-title) - which should be unique on a web page.
Thereafter, you use jQuery to get those elements, however as jQuery expects id's to be unique, it will just grab the first (or last, im not sure) element with that Id.
The solution is not to use duplicated id's in your markup.

You seem to have a syntax error on line 6. You can view errors in a browser using developer tools in case there are others.
$('#priority-input.val('priority);
should be
$('#priority-input').val('priority');

Actually, if you want to set the value to the value of the parameter, you should use
$('#priority-input').val(priority);
not
$('#priority-input').val('priority');

Find next input element in DIV using JQuery

The API method I am using takes a list of parameters in the form of Dictionary<string,string>. I am building the inputs for this dynamically with JavaScript, where I have a DIV row and then two inner DIV cells, one for the parameter name and one for the parameter value input.
I can use .each() to loop through each of the parameter name DIVs but need to figure out how to get the value of the input which is displayed directly after it.
With the following pseudo code to show the idea, what would be the best approach where I could get the parameter values together?
CSS Table:
consumedValues.innerHTML += "<div class='valuesRow'>";
consumedValues.innerHTML += "<div class='valuesCellName'>" + consumesItem + "</div><div class='valuesCellValue'><input type='text'></div>";
consumedValues.innerHTML += "</div>";
Parameter Dictionary:
var parameters = {};
$('.valuesCellName').each(function(index)
{
parameters[$(this).html()] = "INPUT_VALUE_HERE";
});

Since they are siblings, Use next()
$(this).next().find("input").val()

Delete all divs that has part of a string - jQuery

Heey all,
I want to delete all divs that contains a part of a string.
How can i achieve this?
My old HTML looks like this:
<div class="article-options_4"></div>
My new HTML looks like this, where 4 is the main article id and 2 is the option id of the article:
<div class="article-options_4_2"></div>
Here is my current jQuery which checked if the clicked article is false:
if(this.checked == false) {
$('.article-options' + '_' + $(this).val()).remove();
}
The problem is that when adding new article options with ajax i need to add an extra id to delete every article item when the main article is unchecked. Atleast i think thats the right way...
The problem i faced with this piece of code is that its only deleted one item and not all with the main article ID thats why i added the id of the article options see the html above.
Im curious how i could solve this!

Use the attribute selector, with a ^ to grab everything that starts with the class name. Do not forget the last _ or else selecting article-options_4 will also pick article-options_40 and article-options_400 and so on.
if(this.checked == false) {
$('[class^=article-options' + '_' + $(this).val() + '_').remove();
}

You may use starting with jQuery Attribute Selector
$("div[class|='.article-options_'" + MAIN_ARTICLE_ID + "']").remove()
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.

using javascript display the multiple selected td values

i am using java-script function when i click a td the value is stored in a variable and display in a textarea its works good. but when i click another td value in the textarea changed to new one.
I am using java script for creating table and with javascript itself i generate the id
str += "<td id='R" + i + "C" + j"'>Demo</td>";
Here my code execute when click is triggered
$(this).addClass('active');
var id = $(this).closest('td').attr('id');
document.getElementById('hit').value += id; //hit- id of textarea
is it any way for append the values one by one when user clicks multiple td

I've created a fiddle which hopefully is what you are looking for.
$('#tbl td').click(function() {
$('#txta').val($('#txta').val() + $(this).text());
});​
http://jsfiddle.net/B8fqK/2/

i don't know if i grasped your question clearly but if you want to append to the textarea the value of the td clicked instead of replacing it you can do something like this:
$("td").click(function(){
$(this).addClass('active'); //i let this but i don't get what you need it for
$('#hit').val($('#hit').val()+$(this).text());
});
if you want to store the value of the td you can just put an additional :
var value = $(this).text();

How to get the selected value of a dynamic drop down in js

I am creating dynamic drop down in my template. I can't get the selected value of those.
var newjobDropDown = $(document.createElement('div')).attr("id", 'jobDropDown' + counter);
newjobDropDown.after().html('<label><?php echo __(Job Vacancy); ?></label>' +
'<select id="jobDropDown' + counter +'"'+' onchange="validate()"'+' class="vacancyDrop"'+'>'+buildVacancyList()+'</select>'+
'<span onclick="removeDrop(event)"'+'class="removeText"'+ 'id="removeButton'+counter+'">'+remove+'</span>'+'<br class="clear" />');
newjobDropDown.appendTo("#TextBoxesGroup");
I used the following code to get the value, but i got a null value.
$('#jobDropDown1').val()

You call
$('#jobDropDown1').val()
but you select looks like
<select id="jobDropDown'
Add 1 to its id and it will do the trick

You have repetated ids (you shouldn't have).
You have 2 choices:
1) Change to different id, then select it with jquery normally
2) If you can't don't want, you should do:
$('select#jobDropDown1').val()
With this, we're differentiating both equal ids by tag name.
Hope this helps. Cheers

From the code you have posted it looks like you are creating two elements with the same id—the select and a preceding div. From the jQuery docs:
If more than one element has been
assigned the same ID, queries that use
that ID will only select the first
matched element in the DOM.
This means your code is trying to get the value of the div element, rather than that of the select. Try giving the div a different id:
var newjobDropDown = $(document.createElement('div')).attr('id', 'jobDropDown_div' + counter);
newjobDropDown.after().html('<label><?php echo __(Job Vacancy); ?></label>' +
'<select id="jobDropDown' + counter +'"'+' onchange="validate()"'+' class="vacancyDrop"'+'>'+buildVacancyList()+'</select>'+
'<span onclick="removeDrop(event)"'+'class="removeText"'+ 'id="removeButton'+counter+'">'+remove+'</span>'+'<br class="clear" />');
newjobDropDown.appendTo('#TextBoxesGroup');