i have a combo box that needs to append on button click, how can i execute the code $(document).ready(function(){$('.combobox').combobox();}); in the appended combo box if it is a ready function?
Thank you in advance.
from this site.
https://github.com/danielfarrell/bootstrap-combobox/
You will need to call $('.combobox').combobox();} after appending the new select--it will only run on elements in the dom.
For example:
$(document).ready(function(){
// convert selects already on the page at dom load
$('select.form-control').combobox();
//add selects
$('#addSelect').click(function(e){
//create select
$('<select class="form-control"/>').append('<option>1</option><option>2</option>')
//add to dom
.appendTo('#addHere')
//convert to combobox
.combobox();
});
});
See this demo bootply for a functioning example
Related
I am trying to implement a simple update functionality for the values in my table. I have an edit button, which triggers a modal where I edit the values and save them. In order the values to be immediately update in the DOM I am using the following jquery code on save:
$('#lblEditDeleteProducts').find("tr .nameDom").text("new val");
$('#lblEditDeleteProducts').find("tr .brandDom").text("new val");
$('#lblEditDeleteProducts').find("tr .priceDom").text("new val");
The problem is that with this code intead of one row in my table all the rows get updated with the "new value". I am very new to jquery and I am out of ideas how to solve this, so any help will be appreciated.
Here is my table structure :
As there is not much information of your HTML code
var selectedTR;
$("#lblEditDeleteProducts tr").click(function(){
selectedTR=$(this);
//init your modal pop up here or do it globally
})
Let assume the ID of save button is #save
$("#save").click(function(){
selectedTR.find(".nameDom").text("new val"); // get relative value from the mdoal input
selectedTR.find(".brandDom").text("new val");
selectedTR.find(".priceDom").text("new val");
})
If you are interested you can use this plugin also (advanced feature) datatable inline edit
The selectors that find is using are too general, so they're selecting all matching rows.
$('#lblEditDeleteProducts').find("tr .nameDom").text("new val");
Here's what jQuery is doing with that particular line of code (the same thing applies to all the others, too):
Get lblEditDeleteProducts by ID
Using that node, find() all descendant elements that match the selector tr .nameDom
Update the text of all nodes that it finds.
In your case, that selector matches every element in every row because they're all descendants of #lblEditDeleteProducts; there's no way to filter out just those you want with the code that you've written.
You'll need a way of explicitly determining which row to update.
Based on your comment that the edit button is in the each row, you can reference the corresponding row with closest
$("EDIT BUTTON SELECTOR").click(function(){
var $btn = $(this);
var $row = $btn.closest("tr");
$("DIALOG SELECTOR").dialog({
buttons:{
Save: function(){
//bunch of stuff
$row.find("td.nameDom").text("new val");
}
}
});
});
I have some input created dynamically in a web page and every input need an autocomplete options with ajax request.
Every input have same class.
I created that for one input but when other inputs created by user the autocomplete not working for them.
I use something like below:
$('.class').autocomplete(options);
How can correct this problem?
Function .live() is deprecated now.
var options = {
source: ["ActionScript", "AppleScript"],
minLength: 2
};
var selector = 'input.searchInput';
$(document).on('keydown.autocomplete', selector, function() {
$(this).autocomplete(options);
});
Just add this in your ajax code after the code where you're adding new element
$('.newElement').autocomplete(options);
You need to initialize autocomplete the each dynamically added element.
I am using some jQuery to populate various dropdowns. I was able to get the jquery to show current value as the first option.
However, I need it to not only show as the first option, but as the currently selected option so that the selection doesn't appear twice in the dropdown.
As shown in the images below, you see the current value is Target. But after clicking the dropdown button, Target is listed twice:
Here is what the current jQuery looks like:
$(function()
{
$eexist = $(this).attr('data-exist');
$('#eexist option:first').val($eexist).text($eexist);
}
Which goes into this modal form dropdown select:
<div id="editCustModal">
<form id="editCustForm" name="editCustForm">
<label for="eexist">Existing/Target</label>
<select class="form-control" id="eexist" name="eexist">
<option></option> // keeping this or not does nothing
</select>
</form>
</div>
The value and the text are the words Target and Existing.
To reiterate, if the current value is Target, then when you click on the dropdown, you should only see Target as the currently selected item AND only see it once.
If you want to select first option then below is the code:
$('select option:first-child').attr("selected", "selected");
But if you want to select the current value then below is the code:
$('#eexist option:first').val($eexist);
this should only work if $eexist exists as value in dropdown
Since you didn't provide much so it's hard to tell..At least provide a jsfiddle link when you ask a question
Do it this way...
$(document).ready(function(){
$("#myselect").change(function(){
var toR = $('<div>').append($('#myselect option:selected').clone()).html();
console.log(toR);
$("#myselect option:selected").remove();
$("#myselect").html(toR+$("#myselect").html());
});
});
Working Fiddle
I'm trying to create form for printing with dynamically generated inputs.
Contents of the fields is shown later in PreviewDiv.
It works fine as long as I specify where they should be, for example:
$('#Prw_CapacityA_1').text($('#CapacityA_1').val());
$('#Prw_CapacityB_1').text($('#CapacityB_1').val());
$('#Prw_CapacityC_1').text($('#CapacityC_1').val());
But if the user creates 100 fields this would be a lot of code to write.
There must be other methods to fix this dynamically, for example:
$('#Prw_CapacityA_'+ counter).text($('#CapacityA_'+ counter).val());
Here's the js fiddle
You could try using attribute starts with selector to select the elements starting with the specific id's and then loop through them using the each() function.
There is no need to have html within your preview table. You can generate it when the user clicks on preview. Modified fiddle
$('#PreviewButton').click(function(){
var capB = $('td input[id^=CapacityB_]');
var capC = $('td input[id^=CapacityC_]');
var table = $("#AddFieldsToPreviewDiv");
table.empty(); //build table everytime user previews so that previously appended values are removed
table.append('<tr><td>ID</td><td>Text 1</td><td>Text 2</td><td>Text 3</td></tr>');
$('td input[id^=CapacityA_]').each(function(i){
table.append('<tr><td>#'+(i + 1)
+'</td><td>'+$(this).val()
+'</td><td>'+$(capB[i]).val()
+'</td><td>'+$(capC[i]).val()
+'</td></tr>');
});
// Show PreviewDiv and hide FormDiv if PreviewButton clicked
$('#PreviewDiv').show();
$('#FormDiv').hide();
});
You could try giving them a unique class (Normally I'd suggest ID but you're using one) say a class of "getinfo"
You could then try the .each() function
https://api.jquery.com/each/
$( ".getinfo" ).each(function( index ) {
var text = $(this).val();
alert(text);
});
This will make an alert box for every element it finds with the class 'getinfo' and then retrieve the value and display it, I hope this gives you a better idea.
If the amount of inputs can change from one page load to the next then you need to use a loop, rather than pulling all the values by 'hand', More code will help better understand what you're trying to achieve and from what.
I'm dynamically populating several select boxes via ajax calls when my app first opens. When the page loads however, what I am noticing is my select boxes start out empty and then once populated they adjust their size accordingly. This is annoying and a bit of a UI distraction.
I do have the population methods within my document.ready method, but perhaps I am approaching this incorrectly?
$(document).ready( function(){
populateOptions(); // Populate our select box upon page load.
});
// Builds a select list and binds it to a class
function populateOptions(){
var optionList = getOptions();
var myList = "";
// Loop over our returned result set and build our options
for(i=0; optionList.length; i++){
myList += "<option>"+optionList[i][1]+"</option>";
}
// Now take our myList and append it to our select
$("#myOptionList").append(myList);
}
Options: <select id="myOptionList"></select>
you can set a width to the select by css
Add a dummy option to show while Loading via AJAX:
<select id="myOptionList">
<option>Loading...</option>
</select>
Clear "loading" option and add new list once available
$("#myOptionList").html('');
$("#myOptionList").append(myList);
to set width with css:
#myOptionList{
width:150px;
}
One simple solution would be to create your child directly when your ajax function is called.
Before finishing your populateOptions() function, append the select to your .
I remember having this issue, it is possible to solve it but this is a very simple way to handle it.
Hope this help.