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()
Related
I want to update text in html element on AJAX post.
Element is in td. Problem is I have many td so I named it id="someTab.#user.UserId" so every td has binded UserId.
I have this id in variable var someTabId = "someTab." + userId
Then I want to update its text on some action.
$("#" + someTabId).text("some text here")
And its not updating. I used console.log to check if someTabId is equal to its element id and it is
HTML Element I want to update:
<td id="someTab.#user.UserId">I want to update value here</td>
you can use instead of
var someTabId = "someTab." + userId
to
var someTabId = "someTab_" + userId
it will work.
because "." is a class selector in jQuery.
Since I got no answer I found a workaround.
I just refresh whole table in background by writing $("#someTab").load(location.pathname + " #someTab"); in AJAX.
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');
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');
So I am using javascript, jQuery, and HTML here. Basically I have a dynamic number of buttons that are being created, and will each call a function using unique variables. The variables are held in a json variable. Here is the code as it is:
var box = "<font size=\"2\">The following assassins are in your current location:<br/><table width = \"100%\">";
for (var i=0; i<info.length; i++) {
if(userid != info[i].playerid){
box += "<tr><td>"+info[i].name+" | rank: "+info[i].rank+"</td><td align=\"right\"><input id='attack' type='button' onclick='loadAttack(userid, info[i].playerid, info[i].name, info[i].rank, location)' value='Attack'/></td></tr>";
}
}
box += "</table></font>";
$("#assassinBox").html(box);
The box looks fine, with the proper names, ranks, and buttons. The problem is when a button is pushed, info is undefined. I think this is because the button doesn't get its own copy of it, and is out of the bounds of the array at the end of the loop. I am struggling to think of a solution, some way of passing the onclick function a unique variable?
Thanks!
box += "<tr><td>"+info[i].name+" | rank: "+info[i].rank+"</td><td align=\"right\"><input id='attack' type='button' onclick='loadAttack(userid, info["+i+"].playerid, info["+i+"].name, info["+i+"].rank, location)' value='Attack'/></td></tr>";
That should work. Although if I were you I would consider rewriting it to not use inline event handlers and maybe building the HTML with jQuery or the native DOMElement creation methods rather than concatenating strings of HTML. It makes it a lot more maintainable in the long run.
I am generating a dynamic fieldset with javascript. For adding fields, I use the following function (this function actually adds more than one field)
//add test
function addTest() {
var location = document.getElementById('addTestLocation');
var num = document.getElementById('addTestCount');
var newnum = (document.getElementById('addTestCount').value -1)+ 2;
num.value = newnum;
location.innerHTML += "<div id='testContainer_"+newnum+"'><label for='test_"+newnum+"'>Test name: </label><input type='text' name='test_"+newnum+"' id='test_"+newnum+"'/> <a href='javascript: removeTest("+newnum+")'>- Remove test</a><br/><br/><span id='addObjectLocation'></span><br/><select id='select_"+newnum+"'><option>True or False</option><option>Single choice</option><option>Multiple choice</option><option>Short definition</option><option>Fill in the blanks</option></select><input type='hidden' id='addObjectCount' value='0'/> <a href='javascript:addObject();'>+ add question</a><br/><br/><hr/><br/></div>";
}
I use innerHTML instead of append because there is a lot of code i'd have to append, the markup is so much shorter this way.
Now, my problem is that whenever I add (or remove) a field, all the data from the other dynamically generated data would be lost. How can I fix this? Saving the value and then adding it to every field would be again, very complicated in my case. Any ideas?
Setting the innerHTML of the parent element causes the entire content to be serialized and then re-parsed, losing all the values in the process (the values aren't serialized back into value attributes). I can think of three workarounds:
Create your outer div (the testContainer) using createElement, set its innerHTML and then append the div into the parent element
Create all the elements using DOM. It's trivial to create a bunch of helper functions to make creating the elements easier.
Use jQuery which does all this for you: $(location).append('html goes here');