I'm using a select2 ajax based dropdown with a single select. This is working perfectly.
There is another input field also on the page and when this is interacted with, I would like to preload the select with a certain amount of options - say 4.
I am using the below to insert the options dynamically, but this is only presenting 1 selected option and when I click the dropdown I get the "please enter x characters" message and don't see what I've preloaded. Is this something that can be achieved?
var newOption = new Option(data.text, data.id, true, true);
$('#selectid').append(newOption).trigger('change');
Thanks,
David
Related
I am working on a project that has a form with a Select dropdown and an Input field with a disabled Submit button. I need the submit button to be disabled until both of these fields are filled and the the second input is a number. I am thinking of using event listener for both filed but do not know how to handle two changes in one function.
let select = document.querySelector("select#slect_items");
select.addEventListener('change', checkSelection);
let input = document.querySelector("input#number");
input.addEventListener("input", checkInput)
Next I am going to define both checkInput and Check selection.
I can get individual function working to dsiable the submit button but do not know how can I combine both eventlisteners together and enable submit button in a single function.
I saw one similar question asked using Jquery. However, I am a beginner and this project has to be coded in JavaScript.
Thanks for your time
I have a select option list and im using jQuery Mobile. My list is very long so Id like to give users the option of searching the list by typing in text.
Is there some native / jQuery Mobile way of adding a text search when you focus on the list? If not I guess instead on an input ill need to create a link to a new page with a filter list, and use javascript to populate the 'input' with the value selected.
http://jquerymobile.com/test/docs/lists/lists-search.html
The short answer is no, unless you want to go nuts editing the JQM code to add that feature to the select box. That being said, I also had this problem (with the select menus being way too long), and here's what I did:
For one scenario, I used an autocomplete search box (that had results drop down: http://jqueryui.com/demos/autocomplete/) in addition to the select menu, populated with the data in the select menu. That way the user could choose whether to use the select menu or search.
For a second scenario, I allowed the user to search for something, then brought up a menu (really a dialog plugin) with only the results that matched what they searched for.
Hope this helps.
Personally, I could not get the jqueryui autocomplete to work well with jQuery Mobile. But this autocomplete code from Andy Matthews worked well:
http://www.andymatthews.net/code/autocomplete/
Used in conjection with an input text field, it provides a way for users to type in a few characters and see a list of choices to select.
i have 2 <g:select> elements in my gsp and both allow multiple selection (listboxes). I wrote some javascript that adds the option clicked by the user to the other select.
I build an array of items in select2.
I also have a form, that consist of checkboxes and such and submit button.
My problem is that I need to send that javascript array along other form data ( when i press submit ), to the controller. I just can't figure out a way, to send it.
Select box will get serialized and send with other form components, if you set every option to "selected = true".
I am fairly new to JQuery and Javascript...
Currently I am using the following technique or code to populate input boxes from a JQuery UI autocomplete set of search results...
var PopulateFields = function(event, ui){
$('#Custid').val(ui.item.Custid);
$('#Alpha1').val(ui.item.Alpha1);
$('#Alpha2').val(ui.item.Alpha2);
$('#CustName').val(ui.item.CustName);
$('#Address1').val(ui.item.Address1);
$('#Address2').val(ui.item.Address2);
$('#City').val(ui.item.City);
$('#State').val(ui.item.State);
}
$( "#search-by-custname" ).autocomplete({
source: "cust_search_by_name.php",
minLength: 4,
select: PopulateFields
});
The php script is grabbing the info from a database and squirting it back via JSON in the following format:
[{"label":"A Tire Store","value":"A Tire Store","Custid":"10000","Alpha1":"COD123456","Alpha2":"TIRE","CustName":"A Tire Store","Address1":"123 Cherry Lane","Address2":"","City":"City of Bla","State":"FL","Zip":"555555"}]
This works wonderfully with input boxes.
However, if I wanted to make State a select box, how would I populate that Select box with the existing value in the customer record?
Or, is that impossible?
I am trying to create a data entry form, and one of the features I want to have is when they search for a customer record to edit, that their search will populate all fields on the form and then they can edit them.
I thought a select box for State would save me some data validation logic...
My other thought was to use a read only input box for the State (because I know JQuery UI autocomplete will populate that), and then create a "State Selector" Select box that would populate the read only input "State" box for re-submission.
Thoughts?
Are you saying you've tried this and it's failed? Because if you have a select similar to
<select id="State">
<option>AK</option>
<option>FL</option>
<option>WY</option>
</select>
then calling $("#State").val("FL") will work.
Questions on Rails 3.0.7, and JQuery 1.5.1
Overview
I'm trying to do the following thing. I have a web page with a form on one side that lets me create a category, and a list of items on the other side, with a checkbox for each item. I would like to be able to check the check box, for each item, so that when I submit the form to create the category, the newly created category also creates a has_many through association with each item.
So the association part works almost, I can submit a list of checked checkboxes, and Rails creates the association on the backend if I send the list of checked items.
Problem:
Here's what doesn't work:
I am trying to submit the form via Ajax, so I wanted to bind an event handle to the rails.js 'ajax:beforeSend' event, so that it would scan through my list of checked checkboxes and at the checked ids to a hidden form field.
The problem is: I try to get a list of all the checked boxes, and add them to the hidden field when the user clicks the Submit button. Therefore, I figured I'd place the code to do so in the ajax:beforeSend event handler. What I "THINK" I'm noticing however, is that rails.js has somehow already processed the form fields, and constructed the HTTP query before this handler fires. I notice this through the following behavior:
Observed Behavior
1) I can reload a fresh page, click the button to submit the form, the alert boxes from my handler pop up saying that no boxes are checked, and the created category in my db has no associated items (CORRECT BEHAVIOR)
2) I then click 1 checkbox, the alert boxes pop up showing which boxes are checked (CORRECT). But then when I submit thee form, the category in the DB still has no associate items. And I can see through firebug and the server logs that and HTTP query was sent containing the old parameter list, not the newer one. (WRONG)
3) I then submit the same form again, changing nothing, and it shows me the correct number of items.
So I get the impression that the parameter construction is lagging. I hope this wasn't too long, an someone can help me figure out what is going on.
My Question:
What event do I need to bind to, so that the form gets submitted with the correct parameters? Or is there another way to go about it completely?
Thanks
Here's my code below.
Thanks,
$('#my_form')
/* Now we need to configure the checkboxes to create an association between
* the items, and the interaction that is being created. First we will bind a
* function to the click event, and if the box is then checked, we will add
* the item id to the list of interaction items. If it is unchecked, we will
* remove the item from the list of interaction items.
*/
.live('ajax:beforeSend', function(event){
// First get a list of all the checked Items
var checked_items = new Array();
$('#items input[type="checkbox"]:checked').each(function(){
checked_items.push(this.getAttribute('data-item-id'));
});
// Then add this list of items to the new_interaction form to be submitted
$('#interaction_new_items').val(checked_items);
alert(checked_items);
alert($('#interaction_new_items').val());
})
Bind to the click event on the submit button itself. The click event will be processed before your ajax beforeSend event.
$('#my_form .submit').click(function() {
// rest of your code here
});
A more flexible solution (say, in case you wanted to submit the form with something other than a click) would be to bind to the form's submit event.
$('#my_form').submit(function() {
// Tweak your form data here
})