I have a form done with semantic-ui and one of the elements is a dropdown that has values pulled from a remote url. It works fine for adding things but how do I set a value for the dropdown when editing.
If a user searched for a country and submitted the form with United Kingdom how do I display the selected value when the user wants to edit the object?
$('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
Found the answer after some digging:
var dd = $('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
dd.dropdown('set text', 'yahoo');
dd.dropdown('set value', 'google');
I was having a similar issue but with a dropdown that was multiple, searchable, and remote data. For me, the solution was to seed ONLY the <option> tag(s) that corresponds with the default value. So, using your code sample:
$('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
// Assuming defaultValue = '1';
<select class="ui dropdown country_select">
<option value="1" selected>Default Value Item</option>
</select>
Then the dropdown should overwrite the options with the remote source after initialization.
Related
This is my first post here. I am not a developer but have learned a bit about CSS the last few months. I have a basic Mediawiki site which has raw HTML enabled on the site which is a secure site and only a very limited number of users with edit privilege's.
I am trying to make it so that when a user clicks the "Submit" button on the HTML form for the cascading dropdown, it will take them to a specific section on a page, based on what they have chosen in all the drop down boxes. I have used the w3schools site to borrow some code snippets.
Here is my form:
<html>
<form name="form1" id="form1" action="Front-end#CSS#Backgrounds">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</html>
And here is the java script I am using.
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
In my form example above I hard coded the action= portion to say Front-end#CSS#Backgrounds
When I click the submit button it launches or takes me to this URL:
https://mysitename.com/myenvironment/index.php/Front-end?subject=Front-end&topic=CSS&chapter=Backgrounds#CSS#Backgrounds
In the example subject = my page name, in this case Front-end, topic = my Heading 1 section, in my case CSS, and chapter = my Heading 2 section, in my case Backgrounds.
But it's not working fully. When I click submit it takes me to the "Front-end" page on my Mediawiki site but it doesn't recognize or do anything with the Heading 1 and Heading 2 parts.
The way this will be used is to allow the user to select the page and section of a page they will be going to. So that in a form using three cascading dropdowns, the user will first pick the subject, which is actually the name of the page on my Mediawiki site, the second drop down will be the Heading 1 section, and the third drop down will be the Heading 2 section which is where I want the user to end up on the page.
The Mediawiki page sort of looks like this:
Page name is "Front-end"
Table of contents is for example:
## CSS ##
### Borders ###
### Margins ###
### Backgrounds ###
### Float ###
I will have the HTML cascading dropdown forms setup with three boxes. In my example, the user picks Front-end -- CSS -- Backgrounds and when they hit submit they go directly to the Heading 2 section on my page for "Backgrounds" Obviously, I need to code it so that whatever combination the user picks I take them to the right page section.
Any ideas on how I can do this? I would like to stick with the simple HTML form and Java Script example above as it is easy for me. Any advice is appreciated! Thanks in advance and sorry for the long post.
GJ231
Well many things to check.. First of all.. https://mysitename.com/myenvironment/index.php/Front-end?subject=Front-end&topic=CSS&chapter=Backgrounds#CSS#Backgrounds
An url can jump to one Anchor. not two. So am I guessing you will need some more JavaScript on checking the Post url and figure out where to go to on the page depending on the Post url.
The content of the page would need to have Anchor links inside them, something like #-- e.g. #Front-End-CSS-Backgrounds
Then before you post, you should change the url to something like : https://mysitename.com/myenvironment/index.php/Front-end#Front-End-CSS-Backgrounds
That will bring the person to the right spot.
If you cannot create anchor links on the page, perhaps you can create divs with the same format Id's ? or Something similar. Then have JavaScript jump to the relevant ID based on the url.
I'm learning how to use Symfony and I'm stuck on a form.
I have a drop-down list, and depending on the choice, I would like to display an input.
I have been looking for a solution for more than 4 days, but I can't find anything, so I come here to ask for your help
When I select "Lycéen.ne" in this dropdown list : dropdownList,
I would like to display the input "Lycée" : inputLycee
I know there are FormEvent, but I don't really understand how it works and how to use JS to show or hide inputs
Thanks for your help =)
You can keep use Symfony to render the entire form and then use a bit of JS and CSS to hide or show the field that should be shown dynamically. Here's an example using plain JS:
let foo = document.getElementById("foo");
let bar = document.getElementById("bar");
foo.addEventListener('change', (event) => {
if (event.target.value === 'two') {
bar.style.display = 'inline'; // Show the element.
} else {
bar.style.display = 'none'; // Hide the element.
}
});
#bar {
display: none; // Hide the element initially.
}
<select name="foo" id="foo">
<option value="one">Do not show</option>
<option value="two">Show</option>
</select>
<input name="bar" id="bar" value="" placeholder="type something here..." >
I'm not sure if this is really doable with symfony, I think its more of a jquery question :
$('#listid').change(function(event){
$('#inputid').toggle($(this).val() == 'Lycéen.ne');
});
I loaded several templates at startup,
Once the page is loaded the user can select several items that will define the content of another template. That's where I am stuck.
How after the call of my method and store the result in my session I can send it to the other Template.
I have looked at Deps.Dependency I sure it is very simple in fact.
Suppose on the first template you had a select element you wanted to save the result of :
<template name="foodSelect">
<select id="favorite-food"> <option> Taco </option> <option> Burrito </option> </select>
</template>
In the helper for that template you can check for an event on that type of input :
Template.foodSelect.events({
"change #favorite-food" : function(event, template) {
var input = $(event.target).val();
Session.set('favorite_food', input);
}
});
In your other template you can access this by using Session.get('favorite_food') and change the content accordingly.
I'm building a Durandal app, and the view I'm currently working on has two <select> boxes. I've got both of them bound to a ko.observableArray and their value to another ko.observable as follows:
<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: slectedBuyer"></select>
The second one is dependent on the value of the first one, so I'm populating them at different times. For the first, I'm querying my data source during the activate() call and then passing the data to a separate method to populate the array the data (in the form of simple JS objects) when the promise returned by the request is resolved:
var populateDateOptions = function(dates) {
$.each(dates, function() {
dateOptions.push({
display: dateToString(this.pbDateOpt),
date: this.pbDateOpt
});
});
};
That works fine - the <select> has values ready for me when the view is rendered. But, after that, I can't get either <select> to respond to changes in their respective observable arrays. The next <select> is populated in a nearly-identical fashion once a value is selected in the first <select>, and I can verify that the buyerOptions array is indeed being populated, but the <select> doesn't change. I also tried adding a value to the first <select> by pushing an object into its array via dev tools and get the same result: the array is updated, but the UI doesn't change.
I've used the "options" binding in several other apps and never had this issue before, but this is my first Durandal app so I'm wondering if maybe there's something I'm missing?
Thanks!
Update
I added some more bound elements to the view and none of them are working, so there must be something weird going on with the composer. Not sure where to start looking for an issue (the viewmodel and view are very similar in structure to another pair that is working fine). Any tips?
Just as a reference, this isn't a Durandal issue - this is a Knockout issue.
Also, a way that I have found most efficient to do this is the following the same way you have it -
<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: selectedBuyer"></select>
but in your view model make the buyerOptions dependent directly on the dateOptions like so -
var buyerOptions = ko.computed(function () {
var opts = ko.observableArray();
if (!selectedDate()) { opts.push(display: '<Select a Date>'); }
else { opts(getBuyersOptions(selectedDate().id()); }
return opts;
});
This way if your selectedDate observable is empty (one hasn't been selected) then no buyerOptions appear, but if you select a date it will populate it based off some value in selectedDate, like Id. It will also automatically update whenever a new date is chosen, without you having to explicitly tell it to with JavaScript or w/e
Turning on Durandal's debug mode by setting system.debug(true) in main.js helped me discover some code errors that weren't presenting themselves via console warnings. With those resolved, everything bound/worked correctly.
Lesson learned - leave debug mode on when you're in development!
Is there a simple way to bind the textbox of a div to change based on the text value of the selected option in a dropdown on the same page?
<div data-bind="text: dropdownValue"></div>
<select>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
Please note, I don't want to put the values into the select element using javascript. I'd like to bind to the value straight from the HTML. I can also include jQuery to make it work.
I was looking for similar functionality in something I was throwing together yesterday and couldn't find it, so I ended up just changing what I was storing in the value attributes. Sometimes that's the simplest solution.
Here's a quick and kind of ugly solution to the problem using jQuery:
HTML
<div data-bind="text: dropdownText"></div>
<select data-bind="value: dropdownValue" id="dropdown">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
JS
function ViewModel() {
var self = this;
this.dropdownValue = ko.observable();
this.dropdownText = ko.computed(function() {
return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
});
};
ko.applyBindings(new ViewModel());
Live example: http://jsfiddle.net/5PkBF/
If you were looking to do this in multiple places, it'd probably be best to write a custom binding, e.g.:
HTML
<div data-bind="text: dropdownValue"></div>
<select data-bind="selectedText: dropdownValue">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
JS
ko.bindingHandlers.selectedText = {
init: function(element, valueAccessor) {
var value = valueAccessor();
value($("option:selected", element).text());
$(element).change(function() {
value($("option:selected", this).text());
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
}
};
function ViewModel() {
this.dropdownValue = ko.observable();
};
ko.applyBindings(new ViewModel());
Live example: http://jsfiddle.net/5PkBF/1/
This is how I implemented a similar feature. I had an observable defined in my model called 'dropDownValue'. I also had an observable array called 'dropDownValues'. My HTML looked something like:
<span data-bind="text: dropDownValue"></span>
<select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>
Note that I used the same field for optionValues and optionsText (not sure optionsText is really needed in this case). In my particular app 'dropDownValue' was pre-populated elsewhere, so when I opened a dialog box with the above select in it I wanted it to default to the previously populated value, and also bind it so that if the user changed it, I could reflect that change back in the database.