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

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();

Related

window.open createElement('form') with submit input type is not calling the action

I am trying to open a new window with a custom form in javascript
In the form I am having some fields and action along with the submit input (please note that the element should be of input type=submit
However, when clicking the submit button in the popup window, the submit action is not performed.
var map = window.open("","editormap",'width=600,height=600,scrollbars=no,resizable=no');
var mapForm = map.document.createElement('form');
mapForm.target = "editormap";
mapForm.id="inpForm";
mapForm.method = "POST";
mapForm.action = "/dashboard/save/"+val1+"/"+val2;
var mapInput3 = map.document.createElement('input');
mapInput3.type = 'submit';
mapInput3.name = 'submit';
mapInput3.value = 'Submit';
mapForm.appendChild(mapInput3);
var mapInput = map.document.createElement('input');
mapInput.type = "button";
mapInput.name = "cancel";
mapInput.value = "Cancel";
mapInput.onclick=map.close;
mapForm.appendChild(mapInput);
var mapInput1 = map.document.createElement("textarea");
mapInput1.name = "code";
mapInput1.value = repoValues;
mapForm.appendChild(mapInput1);
var mapInput2 = map.document.createElement("input");
mapInput2.type = "hidden";
mapInput2.name = "filename";
mapInput2.value = 'some data';
mapForm.appendChild(mapInput2);
map.document.body.appendChild(mapForm);
I have also tried bind like below
var parentForm = document.createElement.bind(document);
var mapForm = parentForm('form');
still the submit is not performing the requested action.
Please help or guide in the right direction.
Since the window has an empty location, relative URLs have no base URL to be interpreted relative to. So you need to provide the full URL in the action URL.
mapForm.action = "https://www.example.com/dashboard/save/"+val1+"/"+val2;
DEMO
(Stack Snippets don't allow popup windows, so I had to use jsfiddle for the demo.)

Replace with html tag in javascript

I want to replace any text like this in input: [www.Link-to-be-shortened.com]following link(cut)
I want to replace it with following linkby javascript
I have tried this code :
var UserString = " Hi <br>This article is good , Please visit the following link [www.Link-to-be-shortened.com]following link(cut)";
var SystemString = UserString.replace("[", "");
SystemString = SystemString.replace("]following link(cut)", "");
var a = document.createElement('a');
var linkText = document.createTextNode("following link");
a.appendChild(linkText);
a.title = "following link";
a.href = "http://cuer.esy.es/?f="+SystemString;
document.body.appendChild(a);
But this code does not work well
Here's a simple example of how to do this with a regular expression:
var UserString = "[www.Link-to-be-shortened.com]Click here(cut)";
var link = UserString.replace(/\[([^\[]+)\]([^(]+)\(cut\)/g, '$2');
console.log(link);
HOWEVER, this will not work in all possible cases. You could use this if only trusted people are submitting links.

How to split a string and then embed the second string (link) into the first string?

I'm fairly new to JavaScript and I have this RSS Feed I'm working with currently.
When I retrieve an item from the RSS feed, the following is displayed
Google Home Page http://www.google.com
How can I split this string, so that I can embed the second part of it (http://www.google.com) into the first part(Google Home Page)?
First - exclude the link by using following RegEx pattern (searches for string which starts with http://).
/http:\/\/.*[^\W+]/g
The matched value (Array) is being stored into url, now we are able to create the anchor element. (the value of href is the element 0 inside our matches array).
The link content is being generated by replacing the URL with empty space inside the retrievedResult. trim() is optional, I've used it just to remove remaining space.
retrievedResult.replace(url[0], "").trim()
Finally you can append the built anchor element.
var retrievedResult = "Google Home Page http://www.google.com";
var re = /http:\/\/.*[^\W+]/g;
var url = retrievedResult.match(re);
var anchor = '' + retrievedResult.replace(url[0], "").trim() + '';
$('body').append(anchor);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Okay, so this will be the string:
var string = "Google Home Page http://www.google.com";
Then we split it:
var split = string.split('http'); // ['Google Home Page ', '://www.google.com']
Then we create an a element:
var a = document.createElement('a');
Then we add the link as the href attribute of your anchor element:
a.href = 'http' + split[1];
And then we add the text as textContent of your anchor element:
a.textContent = split[0];
And finally we add the element to the body:
document.body.appendChild(a);
Here an example:
var string = "Google Home Page http://www.google.com";
var split = string.split('http');
var a = document.createElement('a');
a.href = 'http' + split[1];
a.textContent = split[0];
document.body.appendChild(a);
You can use jquery to get to your result
Working Example:
//This is HTML part
<div id="linkcontainer"></div>
<input id="str" value='Google Home Page http://www.google.com'>
<a id="createlink">CreateLink</a>
//This is js part
$('#createlink').click(function(){
createLink();
});
//function that makes link
function createLink(){
var str = $('#str').val();
var http = str.indexOf('http');
var url = str.substring(http);
var text = str.substring(0,http);
$('#linkcontainer').html(''+text+'');
}
Try this code on jsfiddle

How to add a JavaScript function to an HmlGenericControl from codebehind

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

How can I include a 'file' type input in a form created through JavaScript?

I would like to ask a question about creating an HTML form through JavaScript, populating data in it(including file types) and submitting it right after.
I somehow managed to have three different forms in a page and I need to concurrently submit them all together and open the new page where I submit my data. Because we cannot have nested forms in a page, I found out that I can create a new form through JavaScript, copy the data in the new created form and then send them. So far so good(if I only had text data), but I also need to copy(and send) a file(image) type and there is where something seems to not work.
Below I'm providing the JavaScript code only, mentioning the important point where I believe the problem is:
function viewpreview(){
Elements = new Array();
counter =0;
$('input[name="ElementValues[]"]').each(function() {
Elements[counter]=$(this).val();
counter+=1;
});
Title = $('#Title').val();
Picture = $('#Picture').val();
EditorText = $('#editor1').val();
var theForm, newInput1, newInput2, newInput3, newInput4;
theForm = document.createElement('form');
theForm.action = 'preview.php';
theForm.method = 'post';
theForm.enctype ='multipart/form-data';
theForm.target = '_blank';
newInput1 = document.createElement('input');
newInput1.type = 'hidden';
newInput1.name = 'Elements[]';
newInput1.value = Elements;
newInput2 = document.createElement('input');
newInput2.type = 'hidden';
newInput2.name = 'Title';
newInput2.value = Title;
newInput3 = document.createElement('input');
newInput3.type = 'file'; // <-- Important point here. If I make it a 'hidden' input type, it sends only the text-name of the file. If I make it a 'file' type, it does not work at all.
newInput3.name = 'Picture';
newInput3.value = Picture;
newInput4 = document.createElement('input');
newInput4.type = 'hidden';
newInput4.name = 'EditorText';
newInput4.value = EditorText;
theForm.appendChild(newInput1);
theForm.appendChild(newInput2);
theForm.appendChild(newInput3);
theForm.appendChild(newInput4);
document.getElementById('hidden_form_container').appendChild(theForm);
theForm.submit();
}
Is there someone who have dealt with that issue before or is able to find a solution to this?
If necessary, I can also accept a new workaround to this, as far as we can keep the 3 forms in the page.
Thank you very much in advance.

Categories