Unexpected JS behavior when clearing input field value - STCombobox - javascript

I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?

You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)

By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');

Related

JavaScript: Multi-Line Selection on <textarea> field

Hellow,
Mozilla's Firefox Browser allows doing multi-line selections on the default HTML <textarea> field, using the common way by pressing CTRL while selecting some text using the mouse.
My question: Is it possible to receive the respective selection data?
I already tried using the getSelection() method on the global window object, but this contains just nothing. The selectionStart and selectionEnd properties on the HTMLTextAreaElement itself also just contains the last selection made and I also didn't found any other - may Firefox own - attributes or functions which allows me to get access to them.
Of course, it is also possible to create an own listener using the select event on the respective <textarea> field. However, I guess this is a horrible idea and leads to incorrect information if not all possible procedures, which manipulates or changes the selections in any way, are really covered and on track.
Thanks.
Is this what you're looking for?
First you get the whole value of the textarea. Then you take the substring between the selectionStart and selectionEnd - which is the selected portion of the content.
// Create a reference to the textarea object for simpler code after this
var textarea = document.getElementById('textareaId');
// Get the part of the value that is selected
var selected = textarea.value.substring(textarea.selectionStart,
textarea.selectionEnd);

Show not working from OnClick event

I have a javascript function Display(args...) that modifies the content of a modal window depending on which button is pressed. The function contains other attributes that are hidden or displayed (depending on the arguments that are being passed). Where I am going crazy is that a particular div section refuses to hide/display. Let's say that initially I set it up to be hidden/display:none, then onClick is suppose to be display it; even if I invert the initial state the expected behavior does not occur. I set up the debugger and I see that is trying:
if ($('#SectionRefusingToShow').is(":visible") == false) {
$('#SectionRefusingToShow').show();
}
I see it enters the if statement but still not shown. Inspecting the DOM, its element attribute display:none was not removed. For other classes and ids the hidden are properly removed/added. I am using .show for this one given that hidden state for it did not work either!
I have had a similar problem before, and it turned out that I had multiple elements with the same ID value. Have you checked for that? jQuery can get a little fussy when you select elements by ID, and the ID is not unique (which is technically invalid, so it get's fussy for a good reason).

Passing TextBox Value to a unique label?

I am just getting into Jquery and I am stuck on a little bit of a bug. In my HTML I generate some H tags and Labels. These H tags and Labels have an on click function that will take that element whether it be an H tag or Label and pass it off to a method (setProperties(this)).
This method will capture what was written inside the input field and assign it to that element. My bug is that after I click on 2 elements it will change to whatever was in the input on both. I am assuming the elements are now listening to the input field and assigning there text value to what was inside the input field. I am curious on how I could rearrange my code to make what ever you element you click on. That field will be the unique field to change.
Variables :
Element is the element I click on such as a H tag or Label
the id ChangeText is the input element where you type to change the label or H tags value.
function inputfield(element){
$("#changeText").on("blur",function(){
$(element).text($("#changeText").val());
});
}
Here is a Jfiddle of what my problem is. If you click on two of the test texts and then change the value of the input. It will change both. I am looking to change only one.
http://jsfiddle.net/QMsQq/5/
It appears that when the inputfield function is called, you are setting the onblur to fire.
The on function will last after the inputfield function call. Try calling "off" to remove prior set on events from changeText.
function inputfield(element){
$("#changeText").off().on("blur",function(){
$(element).text($("#changeText").val());
});
}
Warning: untested code.
http://jsfiddle.net/QMsQq/6/ Updated your fiddle to show my solution
Assign the element to a variable.
var $elem = $('whatever');
and pass that as the argument. And I think you want to fire on focus of an element (click).
Also, here is a VERY simple vanilla js example of what I think you're getting at:
http://jsfiddle.net/Lqf25/3/
Hopefully that helps a smidge.
Edit:
ok, for your fiddle:
Your input syntax is jacked. (missing '>' and you don't need '/input' anyway)
Don't use (onClick) in html. Separate your concerns - javascript goes in the script file, not inline. See my fiddle for an example. Although, from reading your latest posts I don't think it's quite what you want - I'm actually a little confused on what exactly you're trying to do...
Edit 2:
Try this: http://jsfiddle.net/w88xr/3/
I think that's what you're looking for.

Chosen jquery plugin modification

Hi I want to change dropdown value by click on a tag. I made a function it is changing the the dropdown value but the highlighted class remain on the last previously selected tag. so my question is when we change value the class should highlight appropriate option.
Okay, not really sure if this is what you're asking for, but I gave it a try.
See if this is what you want.
http://jsfiddle.net/7vkLv/3/
I added
closest('div.chzn-container').addClass('chzn-container-active');
to the span you're changing data in.

Set value to hidden column with jquery

I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.

Categories

Resources