We Keep Coding

Passing argument to on click event of dynamically generated element

I am trying to pass arguments to onclick event of dynamically generated element. I have already seen the existing stackoveflow questions but it didn't answer my specific need.In this existing question , they are trying to access data using $(this).text(); but I can't use this in my example.
Click event doesn't work on dynamically generated elements
In below code snippet, I am trying to pass program and macroVal to onclick event but it doesn't work.
onClickTest = function(text, type) {
if(text != ""){
// The HTML that will be returned
var program = this.buffer.program;
var out = "<span class=\"";
out += type + " consolas-text";
if (type === "macro" && program) {
var macroVal = text.substring(1, text.length-1);
out += " macro1 program='" + program + "' macroVal='" + macroVal + "'";
}
out += "\">";
out += text;
out += "</span>";
console.log("out " + out);
$("p").on("click" , "span.macro1" , function(e)
{
BqlUtil.myFunction(program, macroVal);
});
}else{
var out = text;
}
return out;
};
console.log of out give me this
<span class="macro consolas-text macro1 program='test1' macroVal='test2'">{TEST}</span>
I have tried both this.program and program but it doesn't work.

Obtain values of span element attributes, since you include them in html:
$("p").on("click" , "span.macro" , function(e)
{
BqlUtil.myFunction(this.getAttribute("program"),
this.getAttribute("macroVal"));
});
There are, however, several things wrong in your code.
you specify class attribute twice in html assigned to out,
single quotes you use are not correct (use ', not ’),
quotes of attribute values are messed up: consistently use either single or double quotes for attribute values
var out = "<span class='";
...
out += "' class='macro' program='" + program + "' macroVal='" + macroVal + ;
...
out += "'>";
depending on how many times you plan to call onClickTest, you may end up with multiple click event handlers for p span.macro.

hyperlink alternate text replacement

At the moment i've got this code, which replaces a span class whith a hyperlink. The hyperlink includes a abbreviation and the alternate texxt for the hyperlink includes the same abbreviation. Now what i want to do is, to somehow replace the second abbreviation in the alternate text of the hyperlink. So that there isn't "click here to visit + 'name of'abbreviation" but instead an alias. So if the abbreviaton is ggl, the alias should be google. But the hyperlink shouldn't use this alias. Can sb help me? thx
(function($) {
var number = "1234567";
function linkBuilder(abbreviation) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation + "</a>";
}
function linkBuilder2(abbreviation2) {
return "<a href='https://www.test.com/" + abbreviation2 + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation2 + "</a>";
}
jQuery(document).ready(function() {
var fl = $(".first-link");
if (fl.length > 0) {
fl.html(linkBuilder(fl.data("abbreviation")));
}
var sl = $(".second-link");
if (sl.length > 0) {
sl.html(linkBuilder2(sl.data("abbreviation2")));
}
});
})(jQuery);

Here is a working jsfiddle:
https://jsfiddle.net/e7qdx031/1/
linkBuilder() should be re-usable, as kalsowerus mentioned.
Another thing that should be mentioned is that the following code returns a collection of elements, not just a single element.
var fl = $(".first-link");
...
var sl = $(".second-link");
The code you have provided will not function properly if there are multiple .first-link classes on the page. So instead I would iterate over each element using $.each() and run the linkBuilder() function on them individually.
As for the linkBuilder function I would modify it to accept the element object, then read the properties to retrieve alias and name. Full name is something that you seemed to indicate you need, but was not present in the code.
(function($) {
var number = "123456";
function linkBuilder($obj) {
var abbreviation = $obj.data('abbreviation');
var name = $obj.data('name');
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + name + "</a>";
}
jQuery(document).ready(function() {
$('.first-link, .second-link').each(function(index, obj){
$(obj).html(linkBuilder($(obj)));
});
});
})(jQuery);

What you probably want is something like this:
function linkBuilder(abbreviation, alias) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + alias + "</a>";
}
Just pass the display-name you want for your link as the second argument.

JQuery string printout disappears

I am new to JQuery.
Trying to create a blog page. When user enters name, country and comment, i want to print it out underneath the HTML form.
The script i'm using is as follows:
<script>
$(document).ready(function() {
$(".addButton").click(function() {
var name = $("input[name=name]").val();
var country = $("select[name=countries]").val();
var comment = $("textarea[name=comment]").val();
$(".comments").append("<div class='new-comment'>" + name + " (" + country + "):</br>" + comment + "</div>");
});
});
This prints out my variables but only for a fracture of a second and they disappear. Any explanation would be highly appreciated.
Thank you.

<button> tags will submit the form, causing the page to reload. Use Event.preventDefault() to stop the form submission.
$(document).ready(function() {
$(".addButton").click(function(e) {
e.preventDefault();
var name = $("input[name=name]").val();
var country = $("select[name=countries]").val();
var comment = $("textarea[name=comment]").val();
$(".comments").append("<div class='new-comment'>" + name + " (" + country + "):</br>" + comment + "</div>");
});
});

Can't work out why this function doesn't work. Loading content via ajax/jquery and it doesn't load

It's probably something stupid I've done but I can't work it out. Heres the function:
function loadguides(softwareid){
var $softwareid = $('#'+softwareid);
$softwareid.load("devices/" + phoneid + firmwareid + ".html " + "#" + softwareid);
}
loadguides('ms1');
loadguides('ms2');
loadguides('ms3');
loadguides('ms4');
loadguides('ms5');
loadguides('ps1');
loadguides('ps2');
loadguides('ps3');
If you need more of the code just ask which parts. To give a comparison, this works:
loadtab('mac');
loadtab('pc');
loadtab('linux');
loadtab('safari');
loadtab('redsn0wM');
loadtab('redsn0wP');
loadtab('pwnagetool');
loadtab('limera1n');
loadtab('greenpois0n');
loadtab('spiritM');
loadtab('spiritP');
loadtab('sn0wbreeze');
function loadtab(tab){
var $tab = $('#'+tab);
$tab.hide();
$tab.load("devices/" + phoneid + firmwareid + ".html " + "#" + tab,
function(){
var tabcontent = $("#"+tab).text();
if (tabcontent == "1"){
$tab.show();
}
else{
$tab.hide();
}
});
}

It's not clear on what the problem is. Are you getting an error? Does it just simply not load?
It does not appear that you have phoneid or firmwareid JS variables defined.
BTW, you can post your full code on: http://jsfiddle.net
I would install/use Firebug and look at the console to determine if there is a javascript or network error.

should your function declaration go above where you are calling it? For example:
function loadtab(tab){
var $tab = $('#'+tab);
$tab.hide();
$tab.load("devices/" + phoneid + firmwareid + ".html " + "#" + tab,
function(){
var tabcontent = $("#"+tab).text();
if (tabcontent == "1"){
$tab.show();
}
else{
$tab.hide();
}
});
}
loadtab('mac');
loadtab('pc');
loadtab('linux');
loadtab('safari');
loadtab('redsn0wM');
loadtab('redsn0wP');
loadtab('pwnagetool');
loadtab('limera1n');
loadtab('greenpois0n');
loadtab('spiritM');
loadtab('spiritP');
loadtab('sn0wbreeze');

Javascript copy to clipboard only gets the first record

I have a button that is generated for each record from a search.
The buttons function is to copy the file number of that record to the clipboard, however no matter which button is clicked it only copies the first records file number?
<imgage alt="Copy File No. <%=ShowFileNo%><delim> to clipboard" name="<%=ShowFileNo%>" src="Style/Copy2.png" onclick="copy('CopyImage');" id="CopyImage" />
function copy(controlId) {
var control = document.getElementById(controlId);
if (control) {
var controlValue = control.name + '<delim>';
window.clipboardData.setData('Text', controlValue);
alert("'" + controlValue + "'" + ' copied to clipboard')
window.close();
}
}
Thanks
Darren

IDs must be unique. This intrinsic to both HTML and XML.
You can change your onclick to this: onclick="copy(this);"
And change your reference as such:
function copy(control) {
// var control = document.getElementById(controlId);
if (control) {
var controlValue = control.name + '<delim>';
window.clipboardData.setData('Text', controlValue);
alert("'" + controlValue + "'" + ' copied to clipboard')
window.close();
}
}