Updating the value of a Brazos Input Text control client side - javascript

We have a CSHS with a Data Table and Global Filter exposed. After entering a value in the filter and limiting the table, they want to be able to click a button that opens a modal and have it available in an input text in the modal and, by doing so, have it bound to a local variable in the CSHS so it can be used in scripts.
I am able to get the value to show up in the modal (code a bit kludgy but it works) but the input text on the modal doesn’t seem to think it has changed and isn’t binding the value to the variable bound to the input text. Suggestions?
Here’s the code I’m using to get the Global Filter text to display on the modal input text: (added a class name of “searchValue” to the input text in the modal – only one data table on the CSHS so I can use the [0] index of getElementsByClassName)
var el = document.getElementsByClassName('searchValue')[0];
el.getElementsByTagName('Input')[0].value = document.getElementsByClassName("dataTables_filter")[0].firstChild.firstChild.nextSibling.value;

Try calling the jQuery .change() on the input text field after changing the value.
For example:
$("#input_div_1_1_1").val("test").change()

Related

Typeahead value won't persist when updated with Javascript

Using twitter's typeahead library https://twitter.github.io, if you attempt to update an inputs value with javascript (or jQuery), the value is reset to its original value when the input is selected, and then you click away.
See this gif below
https://gfycat.com/tautsphericalirishdraughthorse
As you can see the typeahead form (with id team2) first contains the string randomstring
When updated with $("#team2").val("test") the change can be seen in the input, but when you select the input and then click away it resets.
Values only seem to persist if you select the box and type in the value.
I need a way where I can alter the value through a js command.

I'm stumped - setting the value of a form field but it's not displaying

I have a form with 3 text inputs to edit records from a table. The values for the 3 fields for all records are stored in javascript arrays. I have a SELECT that displays the name field for all the records in the table. When I select an OPTION, javascript populates the 3 form field "values" with that record's values, for the user to edit.The 3 INPUTs are contained in identical DIV containers, and the attributes of the 3 INPUTs are identical (other than ids and names).
After the javascript runs, the first field would display its assigned value, but the other two continued to display their placeholders. I can watch the values change in the DOM in the developer tools as I make selections, but nothing shows in the form fields. I am assuming my code is populating the INPUT values because the DOM is changing as expected.
I tried changing the order of the fields in the form, and now all 3 fields are failing to display their value, while the DOM still shows the elements with the values. Putting the field order back to how it was did not help.
The behavior is the same in Chrome and FireFox.
document.getElementById("accountname").innerHTML = selectedname
document.getElementById("accountdescription").innerHTML = jdescriptions[jnames.indexOf(selectedname)]
document.getElementById("accountcode").innerHTML = jcodes[jnames.indexOf(selectedname)]
This screendump image shows how the FORM and the DOM are different
Frankly I'm stumped. Any ideas appreciated.
you should set the value attribute of the input element, you cannot use innerHTML because we don't write anything between input tag.
Since you are setting the innerHTML of input tag, your screenshot is displaying ANOTHER ACCOUNT between <input></input> but this is not the value which will be displayed for the input element.
The property innerHTML is used for elements like Div.
document.getElementById("accountname").value = selectedname;
It's me, of course! I should be assigning the values to .value, not .innerHTML.
All sorted.

Sitecore - Field not detected as modified. How to force the save prompt to show?

We are using the Taxonomy module for Sitecore: https://marketplace.sitecore.net/Modules/T/Taxonomy.aspx?sc_lang=en
The module works fine 90% of the time. The only catch is that when in a taxonomy field you select a value from the auto-complete options, the field doesn't seem to be marked as changed. This creates the occasional confusion with editors as when they publish the "Do you want to save?" prompt doesn't show and the content is published without tags.
If instead of selecting from the auto-complete we use the dialog box, everything works fine.
I looked at the markup, JavaScript and C# code and couldn't find a solution.
I even tried to set Sitecore.Context.ClientPage.Modified = true but it doesn't seem to do anything.
How can I force the save prompt to show?
I had a similar issue, I was updating a field using js and the experience editor wasnt detecting the change.
I got this working by doing the following using js:-
There is a save button state object saved in a view state field. You can grab by doing window.parent.document.getElementById("__SAVEBUTTONSTATE"). I then did the following:-
var saveButtonState = window.parent.document.getElementById("__SAVEBUTTONSTATE");
saveButtonState.value = 1;
saveButtonState.onchange();
This will make the save button enabled
In the experience editor, Sitecore wraps your sitecore item fields in an span element, which contain a unique id. (These are the fields you interact with in the experience editor). However, its not these values which Sitecore receives when you hit Save button. Sitecore actually stores values of your item fields in hidden inputs, so when you interact with the span element, in the background, these hidden inputs are being updated. So in order for Sitecore to receive your changes, you must update the corresponding hidden input. If you open Inspect element in the experience editor and search "scFieldValues", you will see these hidden inputs. I updated the field by using jquery:-
$('#scFieldValues').children('input').each(function () {
if (id.indexOf($(this).attr('id')) >= 0) {
$(this).val(value);
}
});
The id object is the id of the span element. The contents of that id is used in the id of the hidden input. This is why I use "id.IndexOf" to find correct input element. So when I update the span element value, I grab that value and update the corresponding input.
Hope this helps

Ext JS 3.4 - Update Display field of a combobox without losing hidden value

So I have a combobox list populated with icons then a small description. Originally when I would select one item it would then put the html into the display as a raw value. Obviously having RAW html in the display wasn't what i wanted so i tried stripping the image tag and using the other information as the raw value.
This worked for display but the display and the value are different. (using a hiddenName field etc) and setting the raw value not only updates the display field but also updates the value. This is not acceptable.
On selecting an item I parse out the image tag and would like to ONLY update the display field. The problem here is there is no method i can find to ONLY update the display field and leave the hidden value alone.
How can i update the display field without messing with the hidden value field?
Update: I tried this....so close but no cigar...
select: function() {
console.log(this.el.dom.value);
this.el.dom.value = 'test';
}
This updated the display field to be 'test' but then for some magical reason when i click off of the combobox it sets my hidden value equal to my display value....any ideas?
Update 2: I have also tried suspending all events on the combobox by putting this.suspendEvents() at the end of the select listener....still no go. I cannot for the life of me figure out why the hidden value gets changed upon box blur. I have tried returning false in blue and change listener events.....preventDefault has no effect.
if you take a look at this link:
http://docs.sencha.com/extjs/4.2.1/source/ComboBox.html#Ext-form-field-ComboBox
there is function **setValue: function(value, doSelect) {...**
it has below lines somewhere::
me.setHiddenValue(processedValue);
me.setRawValue(me.getDisplayValue());
These lines are doing a magical stuff which you mentioned.
Now, to solve your problem, I guess you can do this:
select: function() {
console.log(this.el.dom.value);
var actualValue = this.el.dom.value;
this.el.dom.value = 'test';
this.setRawValue(actualValue );
this.setHiddenValue(actualValue);
}
Hope this helps, I have not tested the code though!

How to get value of 'this' inputbox?

I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.
Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38
Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.
Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();
You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})

Categories