back again! been a while.
So this is my question.
I have a datatable set up that gets the information from the database and shows this in a modal (bootstrap4).
That works fine by the way, but now I wan't to add a dropdown option.
This dropdown needs to have information that is stored in the database (just one table with all the rows).
success:function(data){
$('#Modal').modal('show');
$('#Id').val(data.id);
$('.number').html("<select><option>".val(data.number)"</option></select>");
$('#skills').val(data.skills);
$('.modal-title').html("<i class='edit'></i> Edit ");
$('#action').val('Data');
$('#save').val('Save');
}
as you can see I tried to do this little trick but sadly it didn't take so I was wondering if something like this is even possible?
Thanks so much for the help/info.
Assuming that your modal already contains a select box in a .number div with several options in it then the following would add the extra option into it, generated from the data object:
$('.number select').append(`<option value="${data.number}">${data.number}"</option>`);
Related
I am using Xcrud Version 1.7
https://www.xcrud.net/
And would like use a button to search/filter for a predefined keyword and column. In the Xcrud Documentation I found buttons with tasks like edit and modal but nothing with search.
the idea is something like this
<button onclick="Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{task:'search',field:keyword}))">Filter Keyword</button>
The documentation has some button functions but I cant get something work with search.
https://www.xcrud.net/demos/index.php?page=js_tricks&theme=default
I need somehow a solution to filter the table data without reloading the entire page and their for use the js function from xcrud instead of loading the entire page again. Maybe somebody worked with xcrud already and has an idea.
thank you in advance
I solved it myself with my own little function. It might not be the slickest solution but it works well and like this you can have direct any buttons or menu entries with automatic search in specific columns or all column for phrases.
You then connect your button/link with a simple onclick or like this:
search_xcrud('phrase','colname');
Here the function:
function search_xcrud(phrase, col=''){
console.log('Xcrud Search Started: ' + phrase+ ' Col: ' + col);
$('input[name ="phrase"]').val(phrase);
$('select[name ="column"]').val(col);
$( '.search-go' ).trigger( "click" );
}
You can use the function without "col" and than the function searches in all columns.
If you search for a specific column you need to enter the name of the table with the exact label as used in $xcrud->columns!
Example:
If you use for example table "clients" with the columns id,name,age.
$xcrud->table('Clients');
$xcrud->columns('id, name, age');
You would call the function like this:
search_xcrud('myphrase','Clients.name'); // incl. tablename and colname!
If you have doubts about the right column check your source code and look for the select box with the name "column" for all your options in this situation. This depends on the use of relations etc. and might change in this cases.
I hope this helps others since I was looking since quite some time for a easy solution without somehow touching the original Xcrud code. PS: Xcrud is fantastic!
if you have any questions let me know.
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps
I have a fiddle that has some slight demo code: http://jsfiddle.net/mwoods98/MHrJJ/
I have a request that is being sent via ajax and it's returning some values via JSON.
With that, I'm taking what is returned and filling in a form. I'm filling in the form
with the other values but I can't quite figure out how to set the dropdown to a value that is returned.
$('#PosTitle').find('option:eq(PosVar)').val().prop('selected', true);
I have tired this and it doesn't work. PosVar is a variable that I'm setting to a number that is returned from ajax.
UPDATE: Thanks for both of the answers, I have discovered something.
I'm using this code to make the drop downs look better but also I need a drop down that can have multimple lines of HTML.
http://www.marghoobsuleman.com/jquery-image-dropdown
When I remove this js, the form fills in.
I'm open to using another library that gives me the ability to use multiple rows in a select dropdown and pass HTML to it.
Thanks for the answers.
All you need is:
var PosVar = 9;
$('#PosTitle').val(PosVar);
jsFiddle example
Remove the .val()
$('#PosTitle').find('option:eq(PosVar)').prop('selected', true);
.val() will not return this object .. So you cannot chain it further..
jsFiddle
I've attached a vertical screen shot of some crazy stuff going on. Am I right to expect j$('[id$=Model_List]').children().remove(); to remove all items in a select list? For some reason the list is still holding on to the old selected value while clearing out the rest of the items.
I'm using the <Apex:selectlist in the html block, just not in the jQuery.
VG930M should be V243H as seen in hte console log...
Hopefully the screenshot gives you a better idea of what I'm talking about...
Any assistance would be greatly appreciated!
You need to remove all values from the drop down and reset the selected value.
j$("select[id$=Model_List] > option").remove();
j$("select[id$=Model_List]").val('');
You also need to clear the selected value:
$('[id$=Model_List]').val('');
I think, that salesforce selectList can not be filled out or cleared with jQuery (sure, you can do it but controller will not take the value).
Try to make it like in this example, with a hidden field:
Command button in Visualforce can't read selected item from dynamic drop down list
I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.
EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.