Javascript Adding a href after form is loaded - javascript

I have 3 dropdowns. Only when Australia is selected from the country dropdown, I have to show a help hyperlink for the city dropdown. The user can read some guidelines when he selects Australia before he can select a city. For this I want to append the 'City' label with an a href. How can I achieve this? I tried the following but failed:
function ddCountryChange()
{
var ddCountry = document.getElementById("ddCountry");
var tbCity = document.getElementById("tbCity ");
if (ddCountry.value == "AUS"){
tbCity.innerHTML = '<div class="GXIRowTitle">[<u>Help</u>] <span style="font-weight:normal;">City : </span></div><div class="GXIRowControl"><div id="ctl02_ctl00_GXDivLeft_TbCity_TbBoxReadOnly" style="display: none;"> </div><span id="ctl02_ctl00_GXDivLeft_TbCity_TbBoxNonReadOnly" style="display: inline;"><input name="ctl02$ctl00$GXDivLeft$TbCity$TbBox" type="text" maxlength="64" id="ctl02_ctl00_GXDivLeft_TbCity_TbBox" autocomplete="off"><ul id="ctl02_ctl00_AcCity_completionListElem" class="GXAutoComplete_CompletionListElement" style="position: absolute;"></ul></span><input type="image" name="ctl02$ctl00$GXDivLeft$TbCity$Btn" id="ctl02_ctl00_GXDivLeft_TbCity_Btn" align="ABSMIDDLE" src="/ucommand/CRM/images/icn/DropDown.gif" alt="Show List" onclick="javascript:onAutoCompleteViewList("ctl02_ctl00_AcCity");return false;" style="border-width:0px;"></div>';
}
}
While debugging through Firebug, I see that the city label is appended with a 'Help', but once the process finishes, the 'Help' disappears.

Assuming ddCountry is the select element
// Detect when value is changed
ddCountry.addEventListener("change", function(e){
// Is its value now "AUS"?
if(this.value == "AUS"){
// Do stuff such as appending whatever label
}else{
// Hide stuff again?
}
});

Related

Syncfusion and Angularjs: find all the HTML Elements values present in each of the HTML Nodes

I am using the Syncfusion to create drag and drop fields. Each of the Dropped field (Node) is the HTML NODE and it has some of the HTML elements such as Select and input etc. After adding all the required nodes user can click on submit function after the click I would like to find all the nodes and values present in each of the HTML Elements of the nodes.
I am able to get the Nodes but unable to find the values present in them.
On the drag-and-drop of the element, I would like to add a different text to each of the node. How can I do that?
HTML:
<div>
<div id="ToolbarItem" ej-toolbar e-datasource="drawingToolsList" e-fields-tooltiptext="tooltiptext"
e-width="700px" e-height="33px" e-fields-id="id" e-fields-spritecssclass="spriteCss" e-click="onItemclick"
style="background-color: #ebeced; border-bottom-color: #bbbbbb; border-top-style: none; border-left-style: none; border-right-style: none">
</div>
<div>
<ej-diagram id="diagram" e-height="700px" e-width="100%" e-nodeclick="onClick">
</ej-diagram>
</div>
</div>
<div id="htmlTemplate" type="text/x-jsrender">
<div>
<select ng-model="Dynamic.optionValue" class="form-control">
<option class="dropdown-item" value="" selected> Choose Options</option>
<option class="dropdown-item" ng-repeat="option in options" value="{{ option.value }}"> {{ option.text }} </option>
</select>
<input type="text" ng-model="Dynamic.ObjectCount" placeholder="number of objects" class="form-control"></input>
</div>
</div>
<button id="AddNewField" ng-click="SubmitAllFields();" class="btn btn-success"> Submit </button>
Angularjs:
var drawingToolsList = [
{
id : "Html_Tool",
tooltiptext : "Html",
spriteCss : "icon-HTML toolBarIconStyle",
},
{
id : 'Connector_Tool',
tooltiptext : "Connector",
spriteCss : "icon-connector toolBarIconStyle",
}
];
//On item click drag and drop the elements to canvas
$scope.onItemclick = function(args){
var option = args.currentTarget.id;
switch (option) {
case "Html_Tool":
diagram.model.drawType = { type: "html", templateId: "htmlTemplate", textBlock:"Hello" };
$scope.counts.push(counter);
counter++;
$scope.$apply()
break;
case "Connector_Tool":
diagram.model.drawType = { type: "connector"};
break;
}
var tool = diagram.tool();
diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })
}
//On click of node find the values
$scope.onClick = function(){
console.log("FJFJF");
}
I am trying to follow the following link and execute:http://ngjq.syncfusion.com/#/diagram/drawingtools.
I am using only the HTML element and I have removed all other elements.
The page would look something like this:
By default, in the node , we only bind the node property values. We cannot bind the HTML content values used in the node. However, by using the node addInfo property you can store the text values. The addInfo property is used to store the additional or custom information of node. After edit the text box and click outside the text box, selectionChange event for the diagram gets fired. In that event get the value of the text box and bind it to the selected node addInfo property. Please refer the below code example
function selectionChange(args) {
if(args.state === 'changing' && args.changeType === 'remove') {
node = args.oldItems[0];
} else if (args.state === 'changed' && args.changeType === 'remove') {
debugger
node.addInfo = document.getElementById("text").value;
}
}
Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Selection-Change-694740211
After add the values in addInfo , you can get the values of the template through node addInfo property.
We have prepared a sample for your requirement. Please find the sample in below link
Sample: http://jsplayground.syncfusion.com/tawdhvwg

Implementing Javascript in Spotfire

I have a drop down list with two value ("START" & "END"). Conditionnality to this drop down value, I want to display a specific DIV or another.
I tried to implement the following code but it isn't working. When I change the value in my drop down input nothing's happen.
The drop down id is : 5e64c4918c4b473a8ed1c55264aca3d9 .
HTML code :
<P align=left><FONT size=2>Choice : <SpotfireControl id="5e64c4918c4b473a8ed1c55264aca3d9" /> </FONT>
<DIV id="div1"><FONT size=2>List 1 : </FONT> <SpotfireControl id="5f252f7f373d48debc33bfde6fd7dd65" /> </DIV>
<DIV id="div2"><FONT size=2>List 2 :</FONT> <SpotfireControl id="136584e6f10143c9ade2a82f5cf4fef0" /></DIV>
<P>
<P align=left> </P>
<P align=left> </P>
<P align=left> </P>
<P><SpotfireControl id="42a0fbc386184501903389b4c48155a5" /></P>
My Javascript code is the following :
//Triggering the script if Drop Down selection is varied
$("#5e64c4918c4b473a8ed1c55264aca3d9").change(function()
{
var value = $("#5e64c4918c4b473a8ed1c55264aca3d9").val(); //To capture the index
var vt = $("#5e64c4918c4b473a8ed1c55264aca3d9").text(); //To Capture the selected text
if(vt== "START") //If the Drop Down selected value is Start
{
$("#div1").show(); //Making the Input list visible
$("#div2").hide();
}
else
{
$("#div1").hide(); //Making the Input list element hidden
$("#div2").show();
}
}
);
I've also created an iron python script that I've linked to my drop down list :
Ironpython script :
from Spotfire.Dxp.Application.Visuals import HtmlTextArea
ta.As[HtmlTextArea]().HtmlContent += " "
where ta is an input of type "Visualization".
Could you help me?
Thanks in advance
As on.click isn't supported, I have deleted on.click statement and it's working !
//Triggering the script if Drop Down selection is varied
var value = $("#5e64c4918c4b473a8ed1c55264aca3d9").val();  //To capture the index
var vt = $("#5e64c4918c4b473a8ed1c55264aca3d9").text(); //To Capture the  selected text
if(vt== "START")   //If the Drop Down selected value is Enable
{
$("#div1").show(); //Making the Input Box visible 
$("#div2").hide();
}else{
$("#div1").hide(); //Making the Input box element hidden
$("#div2").show();
};

How to get the value of user text input of user created input, jQuery

I have created a button that lets the user create a new text input. I am trying to get the value of the text input of the newly created input.
HTML
<div class='pop-up-box-radio' Title="Edit Radios">
<div style="display: inline; float: left; margin-left: 5%;">
<div style="clear: both;">
<ul class="new-radios"></ul>
</div>
<p style="padding-top: 15px;">
<input type="button" class="add-radio" value="New Radio" />
</p>
<p>
<input type="button" class="values" value="Values" />
</p>
<p class="theValues"></p>
</div>
</div>
jQuery
// ADD RADIO
$('.add-radio').click(function(){
$("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
// GET VALUE OF INPUT
var newRadio = $('input.added-radio').val();
$('.values').click(function(){
$("p.theValues").append("<p>" + newRadio + "</p>");
});
// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
var clickedButton = $(this);
clickedButton.parent().remove();
});
When the value button is clicked, the only response I get is 'undefined'.
JSfiddle
You need a slight amendment to your JS to be able to find the new element you have found.
Firstly, var newRadio will run on browser load and not on the click function to create a new input. Your best option is to run it when clicking the .values button.
Secondly, .click() cannot find dynamically created elements. If you change this out be a .on('click' function, it will be able to find the dynamically added element.
Third and lastly, this will only find one element and not find all of them. If you make an each() function and loop through, you will be able to find all of the inputs.
// ADD RADIO
$('.add-radio').click(function() {
$("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
$('.values').on('click', function() {
var list = ''; // create list variable
$('input.added-radio').each(function() { // start each loop
var curRadio = $(this).val(); // get value of current item
list += curRadio + ' - '; // append it to the list
}); // end loop
$("p.theValues").append("<p>" + list + "</p>"); // append list to the page
});
// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
var clickedButton = $(this);
clickedButton.parent().remove();
});
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pop-up-box-radio' Title="Edit Radios">
<div style="display: inline; float: left; margin-left: 5%;">
<div style="clear: both;">
<ul class="new-radios"></ul>
</div>
<p style="padding-top: 15px;">
<input type="button" class="add-radio" value="New Radio" />
</p>
<p>
<input type="button" class="values" value="Values" />
</p>
<p class="theValues"></p>
</div>
</div>
Your newRadio var is grabbing the value of $('input.added-radio') on initial page load (undefined, as no new fields have been added yet).
Your JSFiddle works if you move the .val() update inside your click function
$('.values').click(function(){
// GET VALUE OF INPUT
var newRadio = $('input.added-radio').val();
$("p.theValues").append("<p>" + newRadio + "</p>");
});
Updated JSFiddle
As an aside, $('input.added-radio').val() will only grab the value from the first field if multiples exist
Get the current value of the first element in the set of matched elements...
(from the .val() api)
So if a user clicks New Radio twice and enters text in both fields, only the value from the first one will be appended when your Values button is clicked.
If the first field is closed by clicking the X to the right, then the value from the next field will be used.
Your current implementation is only going to give you the value from the first dynamically created input control. Therefore, you would need to iterate through each element.
$('.values').click(function(){
$('input.added-radio').each(function(i,op)
{
$("p.theValues").append("<p>" + $(this).val() + "</p>");
});
});
Fiddle : http://jsfiddle.net/91e4a7wy/30/

move selected values form textbox to dropdpwn

What I need: user insert a movie title in the textbox and as soon as he/she click the button "move to selectedlist", the movie title should be moved into dropdown list (which shows the movie titles that user has selected) and the textbox should be cleared.
I searched a lot, but whatever I found was the opposite (insert selected dropdown in the textbox! which is the opposite of what I need).
This is what I have tried but not work (It works for moving selected options of a dropdown into another dropdown, however it does not work for textbox:
<input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
<input type="button" value="Add to selected list" id="btnMove"/>
<select id="selectedItems" name="selectedItems[]" multiple="multiple" width="200px" size="10px">
</select>
$('#btnMove').on('click', function (d) {
var selected = $("#q").val();
if (selected.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#selectedItems').append($(selected));
$(selected).remove();
d.preventDefault();
});
Any help would be highly appreciated:)
Try it like this using jquery.
$('#btnMove').click(function (e) {
var selected = $("#q").val();
if (selected.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
else
$("#selectedItems").append(new Option(selected));
});
Hope this works.

jQuery / Javascript Prompt with Select inside

title seems clear enough, but we never know.
here's my problem, i got a serie of checkbox, each one is associated to a list of choices.
ie:
Checkbox1
=> Opt1
=> Opt2
Checkbox2
=> Opt1
=> Opt2
etc.., (with about a dozen options per checkbox)
what i need to do is:
when user check a box, a prompt appear with a Select inside and the result is send as the value of the checkbox.
i've tryed some plugins (ie:jQuery Impromptu) but they all auto-close my select tag wich output something like that
<select></select><option></option><option></option>
anyone got a solution?
HTML
<input type="checkbox" id="chk1"><select style="display: none;" id="sel1"><option>.........</select>
<input type="checkbox" id="chk2"><select style="display: none;" id="sel2"><option>.........</select>
<input type="checkbox" id="chk3"><select style="display: none;" id="sel3"><option>.........</select>
JS
$(document).ready(function()
{
$('input[type="checkbox"').click(function()
{
if($(this).checked)
{
$('#sel'+$(this).attr('id').toString().replace('chk', '')).show();
}
else
$('#sel'+$(this).attr('id').toString().replace('chk', '')).hide();
});
$('select').change(function(){
$('#chk' + $(this).attr('id').toString().replace('sel', '')).val($(this).val());
});
});
I hope this helps.

Categories