How to pass map from java to javascript? - javascript

I have a drop down list and an info tooltip icon beside it, when the user changes the value in the drop down then hover to the info icon, a description for the selection should appear ... as in figure :
Now I have a map of values in the backend where key is the drop down value and value is the description, I want this map to be available to the front end (javascript) , I have many options :
1- on each value change make an ajax call (not good since many calls to the backend with no need as the map is actually static)
2- pass the map as a json object to some html hidden element and then read it ... but the problem was in escaping quotes and other similar stuff in json before setting it to the html element
3- use data attribute .... but the framework I am working on does not support HYML5
4- make one ajax call after page load, read the json and putting it in javascript var .... but again a useless request to the back-end
5- make a global variable in my JSP (using declaration element) .... but this is not thread safe and will cause me to use scriplets
I went to the fifth solution because the map is static and has no much problem with concurrency .... more over the framework I am working on is entirely written with scriplets
Do any one has other recommendation from the solution I mentioned or any other solution ....

2- pass the map as a json object to some html hidden element and then read it ... but the problem was in escaping quotes and other similar stuff in json before setting it to the html element
You can easily solve this problem by using JSON.stringify() and later JSON.parse().
So I suggest to use that approach - stringify the json object and put it in an element, then you can just parse the data.
var obj = {foo: 'bar', arr: ['baz','foobar']};
var el = document.getElementById('jsonData');
// setting the value here -- you would do this in your jsp template
el.setAttribute('data-json', JSON.stringify(obj));
console.log(JSON.parse(el.getAttribute('data-json')));
<div style="display:none" id="jsonData"></div>

This is my approach.
Generate mirror DOM elements for each option.By default those are hidden.
When in the Onchange event of select box or mouse over event of tooltip icon process the message and show.
For JSP loop you can have again 2 approaches. Those are Value and index of select box.
1.you can use value field of combobox(dropdown list/html select) as : ${c.id}
2.you can use loop index as : ${cStatus.index}
<c:forEach items="${somethingList}" var="c" varStatus="cStatus">
<input type="hidden" id="hiddenToolTip${${cStatus.index}" value="you have selected XXX. XXX is blah blah blah">
</c:forEach>
After that in mouse over event of tooltip function:
You can read current selected option selected index or selected value and read value from hidden field
and display tooltip.
var tooltipText=document.getElementById("hiddenToolTip"+ document.getElementById("comboBoxId").value ).value;
alert("here is tooltip text="+tooltipText);

Related

Kendo UI bind drop down value from PopupEditor

I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here
Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.

How can I change the value of an Oracle APEX page item using JavaScript?

I created the links in the left-most column to target a JavaScript function and I can successfully pass through the value of the row ID to that function.
Once clicked, a modal pops up to present a form to update the fields. However, I need the fields in the modal to be populated with the information from the row clicked. I figured I could create a hidden page item (P2_SONG_SELECT) to store the row ID so that I can use the value in my query for the data. My problem is I haven't been able to assign the row ID value to the application item.
Here is my JavaScript:
Each 'Edit' button successfully uses this URL target:
javascript:viewEditSong$(#Row_ID#).val();
to call this function:
function viewEditSong(Row_ID) {
alert(Row_ID); // successfully alerts the Row ID
$("#P2_SONG_SELECT").val() = UA_ID; // fails to assign
$("#EditSongWindow").dialog('open'); // open the modal
}
How do I properly assign the page item the value passed in?
Elsewhere I use simliar syntax effectively:
ajaxRequest.add("P2_FILE_MAIN", $("#P2_FILE_MAIN").val()); // this works fine
By 'application item' I presume you meant 'page item' as per your question title, since you're prefixing with page number.
Use this to set a value on the browser.
$s('P2_SONG_SELECT', 'xyz')
http://docs.oracle.com/cd/E59726_01/doc.50/e39149/javascript_api.htm#AEAPI269
Scott's post effectively solves your problem by using the built in APEX set method, but as an aside, you are attempting to use the jQuery val() method in the wrong way.
Instead of:
$("#P2_SONG_SELECT").val() = UA_ID;
You should use:
$("#P2_SONG_SELECT").val(UA_ID);
Have a look at the documentation for val().
http://api.jquery.com/val/#val2
You can see that the usage of the function differs depending on whether you want to set or retrieve a value.

How to edit selectize input after calling selectize()

My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});

select options are not being shown using d3.js?

I am trying to show the names of few detectors in a combobox using d3.js. I used the following code to show the data.
d3.csv("Results_New.txt", function(data) {
//var data = d3.csv.parseRows(datatext);
d3.select("#road").selectAll("option")
.data(data).enter().append("option").text(function(d){return d.detector-id;}).attr("value",function(d){return d.detector-id;});
But the values are not being shown in the output combobox. Rather the combox options are showing blank space. Can anyone give me the idea how can the values be shown? Is it mandatory to put the combobox within a SVG?
I'm guessing your column in your csv file is named "detector-id"?
d.detector-id is not valid. That's translated as object variable d with property detector minus variable id.
Use return d["detector-id"]; instead.
Here's working code.
Is it mandatory to put the combobox within a SVG?
You actually aren't putting a combobox box in SVG. What I think you mean is "is it mandatory to build the combobox with d3?" The answer is no.

Get Updated HTML String After Clone with jQuery

I'm building an application which has a D&D editor and deal with layouts (based on bootstrap) and multiple widgets.
Each widget has various parameters which are editable with a modal after clicking on the corresponding widget edit link.
I pass in the html generating the form elements for these params, base64 encoded through a data attribute like this:
Edit
I grab that string, decode it and append it to the modal box which spits out the form. This all works perfectly fine. As a sidenote, before I was just spitting out the form elements in a hidden div within each widget container, then grabbing it from there. The result was 75K elements in dom with a very few number of widgets and a 3 second delay on any click event, plus a generally sluggish interface (as you can imagine).
Upon clicking the save button for the widget, I need to get the html of the form elements that were appended to the modal WITH the updated values, encode it and update the widget data attribute with the new string.
That part works fine, but what doesn't is upon clicking the save button, it clones the modal form elements. That object which contains the originally appended form markup has the correct, updated values for each form element.
For example:
var tab_general = $('#modal-widget-CSS-Params-tab_general');
var test_update_value = tab_general.find('input[name="widget-videofakeout[1371898762][content]"]').val();
console.log(test_update_value);
The result is the proper updated value, so I know the it has the proper data that I want inside.
But if I create a new dom element with the by cloning this object and attempt to use jQuery's html method to get the new, updated html string of said clone, like so:
console.log($('<div>').append(tab_general.clone(true, true)).remove().html());
All I get is the original appended html with the original input values.
So my question is, is there any way to get the html string of a cloned object with the updated input values? Or am I going about this all wrong?
Here's a very basic example of what I'm trying to do, but as per the first comment below, it seems I'm totally off-base: http://jsfiddle.net/6LyMK/2/

Categories