How to add a JavaScript function to an HmlGenericControl from codebehind - javascript

From server side, I'm injecting an input and button element dynamically to client side. I also would like to inject a JavaScript function into each. The input's function should be triggered onchange and for the button's, should be onclick
This is what I've done so far:
//js definition
string script = #"<script>";
script += #" function OnCroquis0BtnClick()
{
var fileUp = $('#File');
fileUp.trigger('click');
}";
script += #"function OnCroquis0FileSelected()
{
txtBx = document.getElementById('MainContent_txtBx');
var fileUpload = document.getElementById('File');
txtBx.value = fileUpload.files[0].name;
}";
script += #"</script>";
ClientScript.RegisterClientScriptBlock(GetType(), "testScript0" ,
script);
//html elemets definition
HtmlGenericControl input = new HtmlGenericControl(),
btn = new HtmlGenericControl();
input.TagName = "input";
input.ID = lbl.Text + "File";
input.Attributes["onchange"] = "OnCroquis0Fileselected()";
input.Attributes["style"] = "display: none;";
docRequeridosMainDiv.Controls.Add(input);
btn.TagName = "button";
btn.ID = "btn";
btn.InnerText = "Anejar";
btn.Attributes["onclick"] = "OnCroquis0BtnClick(); return false";
btn.Attributes["style"] = "margin-right:2%;";
docRequeridosMainDiv.Controls.Add(btn);
They are visible and style's are being applied, but js isn't. I figured since any html attribute is added through Attributes["attri"] maybe a js function could be too.
Thanks, in advance.

Try using RegisterStartupScript instead of RegisterClientScriptBlock
Page.ClientScript.RegisterStartupScript(this.GetType(), "testscript0", script, false);
this enforces that script is executed after all the elements in the page gets loaded.

Managed to get it working. On my version, I had function names misplaced :P

Related

Cannot get the number of var using javascript

I have this certain problem where I cannot get the number value of 'currentStock' var data inside an HTML file using JavaScript. I have this on my HTML file in script tag:
By the way, due to the HTML being too large, and also it was not originally my script, but from a friend who was asking for some help on adding some features in it, I can't upload the whole script as it will be going to be too long. The whole HTML script has 14076 characters with 289 lines.
I have only studied java and not javascript with HTML, so I need help with this one.
<script>
window.onload = function() {
var goDown = document.getElementById('uniqueNav');
var goRight = document.querySelector('.clothesNav');
var goUp = document.querySelector('.shrink');
goDown.style.marginTop = "0px";
goRight.style.marginLeft = "5px";
goUp.style.height = "0px";
}
$('document').ready(function(){
var name = "Ombre Printed Shirt";
var price = "P499.00";
var initialStock = 0;
var currentStock = initialStock;
document.querySelector('#clothTitle').innerHTML = "" +name;
document.querySelector('#clothPrice').innerHTML = "Price: " +price;
document.querySelector('#PITitle').innerHTML = "" +name;
document.querySelector('#PIPrice').innerHTML = "Price: " +price;
document.querySelector('#currentStock').innerHTML = "CurrentStocks: " +currentStock;
}); //------------------------Change This Every Document ----------------------------//
</script>
then this in my JavaScript File:
var cStocks = document.getElementById('currentStock').data;
alert(typeof cStocks);
alert("Data in cStocks = " + cStocks);
if (!cStocks) {cStocks = 0; alert("cStocks, not a valid number");}
if ((cStocks <= 0) == true)
{
document.querySelector('.clothButton').style.display='none';
document.querySelector('.clothButtonDisabled').style.display='flex';
}
else
{
document.querySelector('.clothButton').style.display='flex';
document.querySelector('.clothButtonDisabled').style.display='none';
}
upon loading the page, the alert says thaat the data type is undefined. I don't know what's happening with my code. did I miss something?
By the way, I have JQuery on my HTML page. it says JQuery v3.3.1 as a version
It doesn't look to me like #currentStock will have a data attribute, or value attribute (which is for inputs), so of course the js returns undefined. Right now it looks like #currentStock is having the innerHTML set on the document.ready to Current Stocks: 0
You do have an accessible variable, currentStock, which is defined during document.ready. Why aren't you accessing it directly? It will have the numeric value in it already. All you can get from #currentStock is the html you generated on document.ready, and you'd have to parse the number out of it, when it's available in raw form in the js variable currentStock.

Javascript - Slashes are replaced by spaces

I am trying to create an li element in my html code via javascript. This li will have an onclick function. The problem is that trying to pass a file path as an argument in the loadDoc2() function, some problems occur. I am including the code.
function myFunction(){
var x = "NEW";
var file = "'/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml'";
lis = "<li><a onclick='loadXMLDoc2(" + file + ")'>" + x + "</a></li>";
document.getElementById("demo").innerHTML = lis;
}
This gives me <a onclick="loadXMLDoc2(" static brands perla new col xml files new col.xml')'>NEW</a>. The slashes are replaced by spaces and letters are low case. The result that I need is <a onclick="loadXMLDoc2('/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml')">NEW</a>
I have tried many things such as .replace("\", "//") but it didn't work.
This happens because you start your onclick with ' and file has a ' at the start, so it closes the onclick attribute. So it looks like
<li><a onclick='loadXMLDoc2('/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml')'>NEW</a></li>
I suggest you use javascript to bind the event, it's gonna be way easier.
function myFunction(){
var x = "NEW";
var file = "/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml";
var li = document.createElement('li');
var a = document.createElement('a');
a.innerHTML = x;
a.onclick = function(){
loadXMLDoc2(file);
}
li.appendChild(a);
document.getElementById("demo").appendChild(li);
}
<div id="container"></div>
<script>
var container = document.getElementById('container');
var li = document.createElement('li');
li.innerText = "Im a list item";
li.onclick = function(){
console.log('I was clicked');
}
container.appendChild(li);
</script>
you appear to have conflicting quotes.
lis === "<li><a onclick='loadXMLDoc2('/static/BRANDS/PERLA/NEW-COL/XML-Files/NEW COL.xml')'>NEW</a></li>"
note that k='loadXMLDoc2('/ will open then close the quotes. fixed by changing single to double quotes:
var x = "NEW";
var file = "'/static/BRANDS/PERLA/NEW-COL/XML-Files/NEW COL.xml'";
lis = `<li><a onclick="loadXMLDoc2(${file})">${x}</a></li>`;
document.body.innerHTML = lis;

Dynamically generated HTML selectedIndex returns null

I am trying to refactor old code without completely redoing the program.
I have objects that are strategically named to be a value of the string from vendor. (vendor = "Ansys" or vendor = "Cadence")
var Ansys = {key:'ansyskeys', loaded:0, display: "none", otherkey: 'anotherkey'};
var Cadence = {key:"cdskeys", loaded:0, display: "none", otherkey: 'cotherkey'};
My previous HTML code that was static and had many entries that looked like:
<div id="ansyskeys" style="display:none">
<select id="anotherkey" size="5" onchange="selectOther('anotherkey')"></select>
</div>
To replace this, I made a function -ignore the use of eval, security is no concern:
function createDiv()
{
var vendorKey = eval(vendor).key;
var otherVendorKey = eval(vendor).otherkey;
var myDiv = document.createElement('div');
var html = '<select id="' + otherVendorKey + '" size="4" onchange="selectOther('+ otherVendorKey + ')"></select>';
myDiv.innerHTML = html;
myDiv.id = vendorKey;
document.body.appendChild(myDiv);
}
I am recieving my desired result, however, when I try to use selectedIndex in the function selectOther, it appears that mk is null.
function selectOther(wid)
{
var mk = document.getElementById(wid);
alert(mk);
var index = mk.selectedIndex;
key = mk.options[index].value;
setKey ();
getKeyStats ();
}
The HTML seems to be working, but doesnt seem to recognize the id from wid. Any help would be much appreciated.

Create a link in javascript to set value of public render parameter

I'm trying to create a link within javascript, which when clicked, sets the value of a public render parameter within WebSphere Portal.
For some reason I see actual code in the generated href instead of value thats suppose to be passed in.
Heres how I create the link within javascript ..
var a = document.createElement('a');
var linkText = document.createTextNode('This is a link');
a.appendChild(linkText);
a.title = 'This is a link';
a.href = '[Plugin:RenderURL pr1.mode="set" pr1.type="public" pr1.key="sources" pr1.value=' + JSON.parse(http.responseText).uniqueID + ']';
This is what I see in the Firefox Inspector devtools ..
This is a link
I understand this is likely an escaping issue, but i've tried so many variations, how should I properly create the href for my link?
Sample for setting prp using a form, same idea as anchor above ..
// create form to set PRP
var f = document.createElement('form');
f.setAttribute('method', 'GET');
f.setAttribute('action', '[Plugin:RenderURL copyCurrentParams="true"]');
var filters = document.createElement('input');
filters.setAttribute('type', 'hidden');
filters.setAttribute('name', 'sorting');
filters.value = 'This is my new value!';
var s = document.createElement('input'); //input element, Submit button
s.setAttribute('type', 'submit');
s.setAttribute('value', 'Set');
f.appendChild(filters);
f.appendChild(s);
document.body.appendChild(f);
f.submit();

Generate input button with onClick function using JavaScript DOM

I use JavaScript to generate form input fields on my page. Everything works fine, except the button. I came across some problems generation the button's onClick function using DOM. You can see the code below, but on my page, there is no the onClick function as the attribute of the input button tag:
n = 1;
function generate() {
var radiomore = document.createElement("input");
radiomore.type = "button";
radiomore.name = "opt[" + n + "]";
radiomore.value = "Add more options";
radiomore.setAttribute = ('onClick',addradiomore);
var div = document.createElement("div");
div.innerHTML = "Op: " + radiomore.outerHTML + "<br/>";
document.getElementById("mydiv").appendChild(div);
n++;
}
function addradiomore() {
//here goes the function code
}
And this is what it generates on my page:
<input type="button" name="opt[1]" value="Add more options">
There is no function?!?!
P.S.
Even if I use like this it doesn't work:
radiomore.onclick = addradiomore();
You should use this:
radiomore.onclick = addradiomore;
DEMO
What about:
radiomore.onclick = function () {
addradiomore();
};

Categories