Javascript DOM onclick - javascript

This is fixed! Already have a correct answer.
("<div class='script' onclick='" + 'open_script(' + data + ', ' + data_name_found + ')' + "'>" + data_name_found + "</div> ")
What is wrong with the above code? I am making a project, and am assigning a variable that information to store inside of a div. The variable data is all the data, and data_name_found is the specified name is all the names with other info inside the data variable. The open_script function is supposed to open a div with information about the given script. Sort of like an edit menu, if at all possible, I would prefer not to give out any more code from my project.
Thanks for the help in advance!
EDIT--> The problem is that it won't even trigger the other function. I have been working on this problem for quite a while and can't find out why. May be cause I'm tired, sorry if it's a silly mistake!

It's hard to tell without more code, but the offending piece of code seems to be:
+ 'open_script(' + data + ', ' + data_name_found + ')'
If data and data_name_found are strings, they're being outputted into the HTML without quotation marks. Assuming that's the problem, this should fix it:
+ 'open_script("' + data + '", "' + data_name_found + '")'

Related

Pass HTML as a parameter to a javascript function from c# WCF

I'm creating my HTML code from WCF (c#), when creating the button action I'm passing several parameters one of them will be an HTML code. The issue that I'm facing when the HTML is containing a double quote " the HTML page thinks that the parameters finish there.
I tried to use Encoded html but when sending it from WCF to HTML it decode it automatically
for example javascript
function generateDocumentMenu(screenName,mainItemId,taskId,subItem, documentMenu)
{
createPopup(decodeURI(documentMenu) ,"","20%","20%","60%","60%");
}
C#
screen.Append("<a href='#' id='documentGeneration' class='button popup-toolbar-button document-generation' onclick='generateDocumentMenu(\"" + screenName + "\",\""
+ mainItemId.ToString() + "\",\"" + taskId.ToString() + "\",\"" + subItem + "\", \""+documentMenu +"\");'>");
The issue that i'm facing is with documentMenu for example:
generateDocumentMenu("user","123","123","user","<div onclick='fn("param");'>aze</div>")
in this example the quotes surrounding param will make a problem i thought about encoding documentMenu variable but it didn't work for me
Try to scape the literal quotes inserting backslash before
"<div onclick='fn(\"param\");'>aze</div>")
If your param is a variable, you could write your js as follows:
"<div onclick=\"fn('" + param + "');\">aze</div>"

Calling zone.run in leaflet popup within Angular5 app

We have an angular5 application with an embedded leaflet map. This map binds a popup to various points which in turn open a details component. This convoluted process works fine in chrome and firefox but is failing with an enigmatic "Syntax error" in Internet Explorer. You can view the app at:
http://ptappdev.gisdata.mn.gov/ptappt
Click on any of the map markers and then click "view details".
In case it is a problem with javascript nested quotes I have tried a whole range of escaping patters. Still no luck. The code generating this popup is:
layer.bindPopup('<p>' + feature.properties[Object.keys(feature.properties)[0]] + '<br /><a target="_blank" href="' + feature.properties['park_home_page_url']
+ '">open website</a><br /><a href="javascript:void(0);" '
+ 'OnClick = "'
//+ 'alert(&apos;test&apos;);'
+ 'window[&apos;angularComponentRef&apos;].zone.run(() => {window[&apos;angularComponentRef&apos;].component.showResultDtlViaMapTip('
+ '"' + feature.properties['name'] + '",'
+ '"' + feature.properties['id'] + '",'
+ '"' + feature.properties['park_admin_id'] + '"'
+ ');})'
+ '" style="cursor: pointer; cursor: hand; ">view details</a></p>'); // 1 initial load
}
}).addTo(this.map)//.on('click', this.onMarkerClick);
The resulting html is:
view details
Any ideas on whether this is a syntax error with zone or a problem with my nested quotes. Or perhaps something else entirely? I would be grateful for any assistance.
Arrow functions have been introduced in ES2015 and are not supported in Internet Explorer.
Your expression looks compatible with the use of a normal function, so simply replacing your arrow function by a normal one should solve your syntax error while preserving functionality.
Thanks for the fix suggestion. For reference, here is the new functional rewritten code, not using arrow functions:
<span onclick="window['angularComponentRef'].zone.run(function() {return window['angularComponentRef'].component.showResultDtlViaMapTip('Hill-Annex Mine State Park','210','spk00176')});">view details</span>

Jquery Appended Button Not Displaying Correctly

I am working with Jquery/javascript/html. I am trying to display a button inside of tags in my table. I am appending the information into/onto a section on my html page. Code is as follows:
<html>
<body>
<p id="report_area"></p>
</body>
</html>
Javascript file below
$('#report_area').append('<table>');
$('#report_area').append('<tr>');
$('#report_area').append('<th>' + view + '</th><th>' + col_1 + '</th><th>' + col_2 + '</th><th>' + col_3 + '</th>');
$('#report_area').append('</tr>');
var btn=$('<button/>');
btn.text('View');
btn.val=item.SURVEY_JOB_ID;
btn.id=item.SURVEY_JOB_ID;
// recently added code - start
btn.click(function()
{
window.localStorage.setItem("MyFirstItem", 10);
window.location = 'GoToThisOtherPage.htm'
}
// recently added code - end
$('#report_area').append('<tr><td>'+ btn +'</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');
THis seems to work correctly however, the button is not showing up correctly. It shows up as an object. All the other data displays correctlyMy table row is displayed as :
[object Object] 12 New Job Title 0
[object Object} 30 Title Help Me 1
I'm not sure why it is displaying as [object Object]. When I do something as simple as:
$('#report_area').append(btn);
the button shows up on the page correctly. Any help on this would be greatly appreciated. Thanks in advance.
To understand why this does not work, you have to look at the documentation for append.
Type: htmlString or Element or Array or jQuery
append is able to except any of those types, and handle each of them differently, so when you pass it an element (actually jQuery collection), it is able to intelligently convert it into the desired html.
However, in your case, you are passing it a string, so it will naively treat the string as html. The reason that this produces [object Object], is because it is relying on native JavaScript to convert the element into a string. You'll produce the same output with console.log(btn).
// append recieves a jQuery collection, calls appropriate methods to obtain html
$('#report_area').append(btn);
// append receives a string, blindly assumes that it is already the desired html
$('#report_area').append(btn + '');
Solution 1 - Append separately
From your comments on other answers, it doesn't seem like this solution works. I think this is because append will automatically add the close tags for the tr and td when appending, causing the button to be added afterwards. You could check if this was the case by looking at the html produced in the developer tools of your browser.
$('#report_area').append('<tr><td>', [btn, '</tr></td>'])
Solution 2 - Convert to string properly
$('#report_area').append('<tr><td>'+ btn[0].outerHTML +'</td><td>')
Solution 3 - Constructing everything as jQuery collections
I think the main problem you have been having is to do with mixing elements and strings. I've written a working jsfiddle solution that constructs everything as jQuery collections.
var table = $('<table>');
var btnRow = $('<tr>');
var btnCell = $('<td>');
var btn=$('<button>');
btn.text('View');
btn.val('val');
btn.attr('id', 'id');
btn.on('click', function()
{
window.alert('Click');
});
btnCell.append(btn);
btnRow.append(btnCell);
table.append(btnRow);
btnRow.append('<td>1</td><td>2</td><td>3</td>');
$('#report_area').append(table);
JavaScript is converting btn to a string because you're concatenating several strings to it.
It should work if you do this.
$('#report_area').append('<tr><td>');
$('#report_area').append(btn);
$('#report_area').append('</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');
You're attempting to set native DOM properties on a jQuery object. Remember, a jQuery object is a superset of a native DOM object. Alter your code to use the .val() and .attr() jQuery methods like so:
var btn=$('<button/>');
btn.text('View');
btn.val(item.SURVEY_JOB_ID);
btn.attr('id', item.SURVEY_JOB_ID);
Alternately, you can chain these methods together for convenience:
var btn= $('<button/>')
.text('View')
.attr('id', item.SURVEY_JOB_ID)
.val(item.SURVEY_JOB_ID);
Finally, alter your use of the .append() method to append the content like so:
$('#report_area').append(
'<tr><td>',
[
btn,
'</td><td>' + item.JOB_NUMBER + '</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr></table>'
]);

changing links doesnt work with jquery

I have got this link:
Visit imLive.com
I want to use this code to add/change different url parameters:
$("a.sitelink_external.imlive").each(function(){
$params=getUrlVars(document.URL);
var promocode_addition='';
if('INFO'==$params['ref']){
promocode_addition='LCI';
}
$(this).attr("href", 'http://im.com/wmaster.ashx?WID=124904080515&cbname=limdeaive&LinkID=701&queryid=138&promocode=LCDIMLRV" + i + promocode_addition+"&"FRefID=" + FRefID + "&FRefP=" + FRefP + "&FRefQS=" + FRefQS');
});
The problem is that that jquery code doesnt work..I tried to move it to document ready..but it doesnt work there too..
The thing that jumps out at me is that you're mixing your double and single quotes on this line:
$(this).attr("href", 'http://im.com/wmaster.ashx?WID=124904080515&cbname=limdeaive&LinkID=701&queryid=138&promocode=LCDIMLRV" + i + promocode_addition+"&FRefID=" + FRefID + "&FRefP=" + FRefP + "&FRefQS=" + FRefQS');
Try changing them all to double quotes, and remove the extra " from after the ampersand in "&"FRefID=" - like this:
$(this).attr("href", "http://im.com/wmaster.ashx?WID=124904080515&cbname=limdeaive&LinkID=701&queryid=138&promocode=LCDIMLRV" + i + promocode_addition+"&FRefID=" + FRefID + "&FRefP=" + FRefP + "&FRefQS=" + FRefQS);
The way you had it was a single string containing stuff that looked like code. The way I've changed it is several strings and variables being concatenated together... (Note the difference with StackOverflow's syntax highlighting.)
Note also that the following code:
$params=getUrlVars(document.URL);
var promocode_addition='';
if('INFO'==$params['ref']){
promocode_addition='LCI';
}
...can be moved to before the .each() loop, since it operates only on the document and thus will produce the same results on every iteration.
(Of course there could be other problems since you reference several variables that aren't shown.)

parsefloat('string' + var) syntax issue

I have a string that equals 'Res' described by:
ResEmp = drpdwn.id.substring(3,6)
If I wanted the following code:
parseFloat(AppResYrs.value)
to get 'Res' from the ResEmp variable, what syntax would I use?
I've tried parseFloat('App' + ResEmp + 'Yrs.value') and parseFloat(('App' + ResEmp + 'Yrs').value) and they don't work. Thank you!
Edit: The following code: alert(ResEmp); alert(parseFloat(AppResYrs.value)); alert(parseFloat('App' + ResEmp + 'Yrs').value); returns 'Res', '0' and 'undefined'. The first two are correct. I want the last one to return 0 also, because I want it to mean the same thing as the second.
Assuming it's the ID of a DOM element, you'd do;
parseFloat(document.getElementById("App" + ResEmp + "Yrs").value);
If it's a global object with value attribute, you could cheat and do;
parseFloat(window["App" + ResEmp + "Yrs"].value));
Otherwise you can't access it.

Categories

Resources