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 🚀

Appending a tail-select option maintaining the functionality

Created a select tag using jquery tail module: https://github.com/pytesNET/tail.select
I want to append a new option input taken from the user.
Using nodejs for this local server to automate file movement.
tail.select(".selectBox_custom",{placeholder:"Add custom"});
$("#idofselect")[0].options.add("New Option",true);
I expect to see the newly added option post this action. Whereas, the html source shows the new option but is not visible on tail select element on browser. Also, I don't believe that the functionality of multiple select is also added if somehow I could get the element to be displayed.
Also tried with following documentation, but could not get a clear demo:
https://github.com/pytesNET/tail.select/wiki/public-methods#addkey-value-group-selected-disabled-description-rebuild

As can be seen in documention you had provided:
This function will NOT rebuild the dropdown field, unless you pass
true as last argument!
So. it means that you have to provide true to your add() method call. Smth like this:
$("#idofselect")[0].options.add("New Option",true, false, false, false, '', true);
---==== EDIT ===---
I was able to add new option to tail select following documentation you had provided. I would suggest you to use for all select manipulations instance variable, it is going to save your debugging time and your code became more cleaner and readable. Here the sample fiddle.

Hellow,
It's not documented, but it's highly recommended to fill in the first both arguments on the options.add() method (so the key and value, even if it is the same). To update the dropdown field, you can use the tail.select.query() method on your own.
I wrote a small CodePen to demonstrate this.
Sincerely,
Sam, Developer of tail.select.

Get validation to work in form where fields have been removed

I'm gonna try to keep this one as simple as possible, sorry if it's messy..
I've built (don't ask why) a custom validation for a form on a wordpress site with jQuery/JS.
The generall idea is I have an array with ID's of input fields that it should check. So the list goes:
toValidate=new Array();
toValidate[0]="#name";
toValidate[1]="#location";
toValidate[2]="#method";
and it loops them with $.each(toValidate) and then if they're empty gives a popup and does some other stuff like add red borders to the fields. Now all of this works fine. But I have another problem. I have a couple of fields that are always required, but I also have a checkbox, when they check it, a TR is supposed to be removed, that TR has a couple of fields in it that are required IF visible.
Now the problem is that even if I click the checkbox, hence remove the TR, I can't get it to work so that the required fields of that remove TR are no longer required. I've tried multiple ways but keep getting different problems depending on what solution I try.
What I've tried for an example is to change the array so that if they check the box, it removes a couple of the array objects (those that are in the row that is removed). But it doesn't work, it just acts as if they're still there.
Sorry for making this long but what I'm trying to ask is what would be best practice to do here? What would YOU do? I don't want code, just a general idea of how I should plan it this as I'm stuck..
Edit: I forgot to mention, my way with the array may be a worthless idea too, so any ideas on how to improve it and make it work are appreciated.

Rather than adding/removing visibility in javascript, do it in css. It'll simplify your selectors when validating.
css:
table tr.ignore {
visibility: hidden;
}
javascript:
$('input.hide_thing').click(function() {
$('tr.whatever_tr').toggleClass('ignore', !$(this).checked)
});
validator:
$('tr:not(.ignore)').validate();

You could preface your validation by checking if the element is visible.
$.each(toValidate, function(index, element) {
if (!$(element).is(':visible')) return;
// ... proceed to validate
});

Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH

First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?

I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs

How to hide a field in SharePoint Display Form based on the field name (jQuery)?

I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.

Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});

I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();

Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});

It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.

If its just the Default Display Form, How about just creating a view and making it default?

The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.