There is a list of Accounts on the page and there is an edit button after every Account. When that button is clicked data gets populated in the form below the list. This multi-select box is present in that form.
When the list of account gets loaded and the user selects an account from the list the multi-select box gets populated with the selected elements from the database for that particular account. If the edit button is clicked again without reloading the DOM, the multi-select box does not get populated.
The point is I am selecting the elements using below jQuery code:
var itemValues = $('select[name^="item"]').find('option');
$.each(itemValues, function(key, teamVal) {
$.each(selectedRow.item, function(key, values) {
var arrval = teamVal.value.split("_");
if (arrval[0] == values.teamId) {
$('select[name^="item"] option[value="' + teamVal.value + '"]').attr("selected", "selected");
}
});
});
The statement $('select[name^="item"] option[value="' + teamVal.value + '"]').attr("selected", "selected"); only selects the elements for the first time in the multiselect box when the DOM is loaded.
It is not selecting the elements the second time, ie. when the user clicks on the edit button for the same account again. You have to refresh the page. This means the above select statement is not working for the second time.
Related
I have a datatable with a working system to select rows, if you click anywhere in the row (not just the checkbox), it will select the row (greying it out) and check the box, it also tracks the number of selected rows in the bottom info text.
I'm trying to get the first column header 'select all' checkbox to correctly select all rows, this function detects when the select all button is pressed:
//select all
$('body').on('click', '#productGapsSelectAll', function () {
var allPages = myProductGapsTable.rows().nodes();
console.log("allPages.length = ", allPages.length, ", allPages = ", allPages)
myProductGapsTable.rows().every(function(rowIdx, tableLoop, rowLoop){
var node=this.node();
console.log(`${rowIdx} selected = ${$(node).hasClass('selected')}`);
$(node).toggleClass('selected');
//$(node).click()
//$(node).select();
});
}
When I use $(node).toggleClass('selected') it only greys out the box, and doesnt check the checkbox,
$(node).click() and $(node).select(); dont check the box or grey the row. Is there some way using $(this) that I can replicate the action of clicking on the row to select it?
EDIT
I can access the checkbox via Node, although no defining ID
edit2; tried getting checkbox value from node but there is no 'checked' string inside the input element
I'm attempting to recreate the form located here: http://yeticustomshop.com/get-quote (PLEASE look at this for reference)
Needed user experience:
Select Product, product selection is replaced by table showing
product selection name, checkbox, and quantity selector.
Option to add another product. If clicked, button disappears and the
product selection is shown BELOW the table. Then the process is
repeated, adding new selections to table.
The ability to remove previously selected items.
Here's the fiddle
// Get all the product radio buttons and loop them
var products = document.getElementsByName('product');
for (var i = products.length; i--;) {
// add an event listener to do stuff when one of them is clicked
products[i].addEventListener("click", function() {
// get the value of the clicked button
var cup = this.value;
// put the value in the input box
document.getElementById('yourSelection').value = cup;
// hide the radio buttons and show the table
document.getElementById("cupDesc").style.display = "block";
document.getElementById("addProductBtn").style.display = "block";
document.getElementById("cupSelect").style.display = "none";
});
}
Here's my previous post on here
Side note: This process is being used in a form. I'm wondering if it would be possible and easier to almost make it like a shopping cart. I've downloaded simplecart.js, but Javascript is NOT my strong-suit. Please help.
I have a div in which contents are displayed in ordered list with a checkbox for each. these are displayed by fetching from the database. now i need to display the content near to the selected check box. what i did so far is
1) only one check box can be selected at a time
2) get the id of the check box which is selected stored to variable ids
3) then paragraph content id = "p"+checkbox id
The code is:
$(document).ready(function(){
$(':checkbox').bind('change', function() {
var thisClass = $(this).attr('class');
if ($(this).attr('checked')) {
$(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
}
});
});
function edit_temp(prt){
var checkedAtLeastOne = false;
$('input[name="check_clinic"]').each(function() {
if ($(this).is(":checked")) {
checkedAtLeastOne = true;
ids = $(this).attr('id');
}
});
if(checkedAtLeastOne){
p_id ="p"+ids;
alert(p_id);
}
else{
alert('Please select any clinical Interpretation');
}
}
So far this is working perfectly. but now i need to display the content of the <p> tag with id p_id in a text area inside a popup window. and then edit the text and by clicking the update button of popup box that content must be updated in db.
can anyone help me to find a solution for this.
You need to create a php file that will receive the row id from database and prints it to textarea in a form. and when user clicks submit the form action will update the db. Here are the step by step guide what you need to do:
Add an "a" tag which opens popup.php?id=1 (where 1 is the id of the row)
Create the popup.php file, which fetch record from database
Add a form element with textarea and submit button in popup.php and populate your textarea with the value fetched in step 2
Either create a new file called update.php or check if the page has post request in popup php and update the value in db with the given id and textarea value.
Hope this will help you to finish.
for this custom select box, what needs to be done to display an image which is associated to an option value in the select box placeholder.
http://jsfiddle.net/6eCFz/
in this code, how to use the data-attribute, first, to show an image associated with an option value as the selected value and second, to display tick marks when dropdown is opened to indicate the selected value.
Additionally, there are minor bugs:
a code for unique selection, for two select box filled with same options, does not seem to work.
$("#c_id1").change(function(){
$("#c_id2 option:hidden").show();
if($(this).val().length ){
$("#c_id2 option[value=" + $(this).val() + "]").hide();
}
});
$("#c_id2").change(function(){
$("#c_id1 option:hidden").show();
if($(this).val().length ){
$("#c_id1 option[value=" + $(this).val() + "]").hide();
}
});
http://jsfiddle.net/73epV/ - (vanilla script as proof-of-concept)
also, it does not ensures uniqueness onLoad
after triggering the dropdown, if mouse is moved away without first hovering over the option list, the dropdown does not close.
lots of love for any help :)
thanks
I have a user input form with multiple drop downs that display based on user selection. When a user selects an option from the 2nd drop down I would like to append that selection to a url.
Here's what I am working with: http://jsfiddle.net/Sxz4R/142/
Here's the JS in question:
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://google.com/?q=" + encodeURIComponent(userInput);
lnk.innerHTML = lnk.href;
The issue is once the link is set it will not change again if a different option is selected from the first drop down menu.
Repro:
1) Select List of Colors
2) Select a color -- Link will change
Without refreshing...
1) Select "List of Numbers" from drop down
2) Select a number -- Link does not change
How do I get the link to change if the user decides to select a new option from the first menu?
IDs are unique but you're using the same one twice - that's a no-no. Use a class for it instead. You should also get rid of those HTML binds with javascript:.
Here's an updated fiddle.