I need to make a site, but I'm stuck... cause I only really know how to work with php and html...
trough research I understood that it's impossible to do this without javascript because php only does pre-processing...
my problem:
I want the user to be able to click on a option in the select box and that the chosen option changes the next select box.
meaning: my first select box gets filled by information from my database... depending on the choice made in the first select box the second select box needs be filled with new variabels which he also gets from the database. and the choice in the second makes the options in the third and so on.
I need this cause my database is a tree...
meaning: I have categories (which I would post in the first select box) and only giving the sub categories of the chosen categorie in the second select box and so on...
the use of this:
the user needs to be able to add a new object in the database trough selecting where he wants it and clicking on the +-button to tell me where he wants to add it... the user isn't bound to get down the whole tree and should be able to add an object in the categories, subcategories or even further on...
I hope my explaination makes sence =s so that someone can help me, cause I really don't get javascript at all =s I already searched for 1week and yet I haven't found anything... It's pretty hard searching for something where you don't know the name for... so please somebody help. thx in advance
I would use jQuery and do an ajax request whenever your select box is changed, something like
$(function(){
$('input#theDropDown').change(function(){
var theValue = $(this).val();
$.ajax({
type: "GET",
url: "getData.php",
data: "TheValue=" + theValue,
success: function(response) {
// I would think 'response' would be a json string or something which contains the values the next dropdown should have
}
});
});
Where the dropdown is an input element with id=theDropDown.
Here's more info:
http://api.jquery.com/jQuery.ajax/
Related
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>`);
In ExtJS I have something rather weird with my combobox.
The combobox is populated but in some cases, all but the 2 first entries are removed.
If I stay on the same page and process a new item on this screen (thus the all fields and thus the combobox would be reloaded), the combobox is now completely populated however the remove function is runned.
The weird thing is that all items are in the combobox, but the only the items that didn't get removed are in fact selectable and clickable. If I would click any other item that is visible in the list, it just wouldn't do anything (even the combobox wouldn't collapse).
What could be the cause of this?
I know you guys want code but it's simple impossible to post code because the code at the company I work at is so huge and complex that there would be too much to paste in here. I'm just wondering if any of you guys have had something similar.
Also, a textbox is above the combobox. If you would fill in the textbox with a value from the combobox, the combobox would jump to the correct value. With the 2nd run (which I described above), if I would type a value that is visible in the combobox but unselectable, it would not jump to that value in the combobox. It seems that these values are only visible but that's it.
EDIT:
Some other weird behavior: if I click in the combobox (so you can actually type text) and press any button, the combobox will be magically transformed to the correct form. By this I mean that only the 2 first items are now visible. I do not have any listener that would do this on my combobox...
Perhaps a "refresh" of that combobox would be enough? However, this doesn't explain then why the combobox behaved that way in the first place. Got it in FF and IE.
Without the code, you say you cannot provide, I can only guess: See if you have idProperty defined for the model and if the idProperty matches one of the fields, if valueField of the combo is same as the value of idProperty and last if you receive records with unique ids from the server. The combo config should look similar to this:
Ext.define('ComboModel',{
extend:'Ext.data.Model'
,idProperty:'custId'
,fields:[
{name:'custId', type:'int'}
,{name:'custName', type:'string'}
]
});
Ext.define('ComboStore',{
extend:'Ext.data.Store'
,model:'ComboModel'
});
Ext.create('Ext.form.field.ComboBox',{
store:Ext.create('ComboStore')
,valueField:'custId'
,displayField:'custName'
});
Of course you would most likely need additional config options for the above classes. And custId must be unique for all combo store records.
In the end I got it solved by binding the store again to it's combobox. While debugging with Firebug, I saw that there were only 2 items in the store, and not all those that were visible.
A short example below:
var ddl = Ext.getCmp('DDL');
var ddlStore = ddl.store;
...
//some manipulation of the data here
...
ddlDocType.bindStore(ddlDocTypeStore);
The bindStore() function is not documented in the official docs...
I need a search field on my site allowing users to search for their location (for a local weather forecast).
I have a html list of locations - each location is clickable (with href to the relevant weather forecast page).
The user should start typing a location in the search field - and as the location name is typed, a match function should start and autofill the search field.
The user should not see the list - only the search field.
Once the match function has autofilled the search field, user should press go or return - and the link to the relevant weather forecast be activated.
I know some html and javascript, but this one is above my level.
I found this code on stackoverflow Filter search for <ul>. It's something like that - but user must not see the list.
You would have shared a bit info with us:
You know some HTML, but don't wanna show it? We would have helped you better if you just sent us some code! :)
What you'll need
Ok, here is the thing.
First create an input field such as:
<input type="text" name="text" id="text" value="" onkeyup="search()"/>
Then use a function as:
function search () {
var value_field = $('#text').val();
$.ajax({
// create an ajax request here..and get the value
success: function (data) {
$('#div').html(data);
}
});
}
<div id="div"></div>
This will be the div where all the data from ajax would come and display.
Where all the thing is happening
Now the main thing is from the other page. You need to control it to show the data or hide it or whatever you want it to do. That's going to happen on the other page the page where request is going.
You can try to show the data only when there is a perfect match else write this:
$('#div').html('Keep writing, you can match');
And make the user write some more words, who know what he mind match!
User will never see the list
Untill or unless you let him go to the page, untill then he will just see the results you are viewing him! So you should use a Database to show the data when the request is Ajax only, otherwise don't create a connection to the database. This way user would never ever see the list, unless its you! :D
Summary:
And the thing is same, the main process is:
You create a function in the input field to search when there is any word added. Forget the backspace right now.
You will send the value to the next page for processing, get the data, set it to the type you want the user to see.
Display it using `$('selecter').html(data);
Good luck.
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
$("#county_id").change(function() {
$("#vice_county_id").html("<option value=\"\">-- Select One --</option>");
var co_id = $(this).val();
if(co_id != 0) {
$.getJSON('./php/includes/vice_county_web_service.php?co_id=' + co_id,function(data) {
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
});
});
}
});
Hi Guys,
I have the above code for loading options in one drop down based on the selection in another. It works fine but to finish this up I am trying to get it to be sticky. I.e. if the form is posted and county has a value already selected then the vice county pre loads with the relevant options. Basically fire the .change functionality on load. I have tried the .load and triggerhandler functionality but it does not seem to work. Any Ideas?? Thanks.
As far as I am aware, in order to prepopulate a form, you'll need to use server-side code. You say that the user posts his code somewhere, but you don't say how the form post is being handled.
I use ASP.net where I work, so I would have a server-side property for the value of each drop-down list. Then, when the page renders, I print the value of the property to my JavaScript code. You'll need to make your JavaScript code add the attribute selected='selected' to the option that you want to be selected when the page loads.
Update:
It sounds like you're saying that you select drop-down 1, and then the options for drop-down 2 are automatically populated. It sounds like the problem is that drop-down 2 cannot be preserved after the postback because its options are populated after the page loads (via AJAX). I believe that the solution to your problem is going to be to set the selected attribute inside code that runs when you successfully get the drop-down options via AJAX.
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
//Check if the option being added was previously selected.
});
Use the Cookies to store the value of the drop down change event.
and when the form loads use the same cookie to retrieve the value and display the user what ever he selected.
But maintaining cookie for this task is not recommeneded.
You can use the JSTL if its a JSP page.
Cookie creating guidlines
http://www.quirksmode.org/js/cookies.html