Develop Reference

How to clear all selected items in a dropdpwn?

My question is related to Angular and Typescript. My problem is quite tricky. I've created a dropdown menu with 3 items. But I'm not creating it using select tag of HTML. I'm using my company's toolkit. Which is just a wrapper around primeng components with our font and our color scheme. They call it PLK toolkit. Their code have a bug. It is not clearing the previously selected item. Here is their sample dropdown code (i feel it is ok to share the code because it is few lines of plain html only and that too written by me):
Note: In below code, plk-dropdown is like select tag, while plk-option is like option tag. There's nothing special about it.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
So, when I click it first time it is good.But after first click it keeps on selecting the other options along with previous. I looked into their code:
dropdown.js
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.selectOptionByValue(value);
}
};
and I fixed this bug by adding 1 line of code:
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.clearSelectedOptions(); // THIS I ADDED
this.selectOptionByValue(value);
}
};
Now the compoenent is working but the problem is that I can't make changes to their js file. Firstly, I'm not supposed to do so. Secondly, if in future we update our repositories, that bug will come back.
Is there any way I can fix this with my typescript code. I cant implement jquery in between. I tried this:
How to clear all selected items in a SELECT input using jQuery?
Please help me. I'm blocked because of this. I really need help.

I use a null option so when the dropdown has no values unselected option is selected , I thing it 's related to primeng the set the first option as selected even the value don't match with ngModel property I have create a demo to show this but so far that how we solve abd this will give to the use an option to undo the selection in case this was not required.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="null">Unselected</plk-option>
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
demo 🚀

Clearing select field using jquery but with rendering problems

I have a select field with the id being node_service_area_city. I wish to clear this dropdown using jquery. For the same I have the following code:
$("#node_service_area_city").empty();
When this line is commented I can chose any of the options in the dropdown. When the code is run with this line included then the options in the dropdown are STILL THERE but I cannot chose any of them. Nothing happens if I click on any of the options.
As such I feel that the dropdown menu is empty but somehow the dropdown items are still showing so I might have to refresh the page. Someone please guide me as to why this is happening and what can I do about it.

can you try this :
$('button').click(function () {
$("#node_service_area_city > option:first-child").prop("selected","true")
});

Combobox Items unselectable

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...

Change displayed price based on a button click

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

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)

Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div

Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax