Javascript question

etienne_marais

etienne_marais

Honorary Master
Joined
Mar 16, 2008
Messages
16,250
Reaction score
19,740
Location
Centurion
In php/html you can do something like this:

in a loop:
<input type="button" onclick="javascript:ClickFunction(<?php echo $id; ?>);" />

If using javascript

var btnLike=document.createElement("button");
var f = "javascript:ClickFunction();";
btnLike.setAttribute("onclick",f); // successfully invokes ClickFunction when button is pressed

but

var btnLike=document.createElement("button");
var f = "javascript:ClickFunction("+userid+");";
btnLike.setAttribute("onclick",f); // invoke ClickFunction fails

What is the correct approach for adding parameters to ClickFunction ? As f is a string I assumed it would assign the onclick property in much the same way as onclick is defined in html ?
 
Any other suggestions perhaps ?

The goal is to provide the frontend developer with an API, calling a javascript API function invokes ajax behind the scenes with json data returned. The frontend developer must then populate the the page dynamically by parsing the json and using the resulting object array.
 
Does this front end developer have access to jQuery? Vanilla JavaScript should be able to do the same but:

Code: 
$('<button onclick="clickFunc('+userID+')">Nom</button>');
..should work
 
Hamster said:
Does this front end developer have access to jQuery? Vanilla JavaScript should be able to do the same but:

Code: 
$('<button onclick="clickFunc('+userID+')">Nom</button>');
..should work
Click to expand...

Yes, access to jQuery. But now you have a pre-existing button tag as opposed to a dynamically created one with document.createElement, problem is I don't think I can add the newly created button (say with an id property set), add it to the DOM and then do jQuery by id because of the sequence of steps and the looping process...
 
etienne_marais said:
Yes, access to jQuery. But now you have a pre-existing button tag as opposed to a dynamically created one with document.createElement, problem is I don't think I can add the newly created button (say with an id property set), add it to the DOM and then do jQuery by id because of the sequence of steps and the looping process...
Click to expand...

Unless I misunderstoon, is that jQuery sample actually creating a new button as opposed to being a selector ?
 
jQuery does not seem to like it either. I am guessing there is some type of evaluation of what follows onclick before being assigned as property.
 
It's creating a new element. Adding the event to an existing button:

Code: 
$('#btn').click(function(){
  alert('hi');
});

Typing from phone so maybe not 100%
 
Nah, was me. It works, thanks a million, I was mixing jQuery and javascript's appendChild, the latter does not seem to like elements created by jQuery... going to do it all in jQuery now, pure gold.
 
Seems the elegant solution is anonymous functions, which does away with double-quote, single-quote and character-escaping nightmares:

var button=document.createElement("button");
button.innerHTML="ClickMe";
button.addEventListener('click', function(){
ClickFunction(userid);
});

Still using jQuery for the rest though
 
I know you probably don't have the luxury, since you said you are editing on the server using vi, but the developer console in Chrome is really great for Javascript issues. It even has step debugging - Javascript has notoriously bad error messages and the developer console has saved me many hours
 
etienne_marais said:
Seems the elegant solution is anonymous functions, which does away with double-quote, single-quote and character-escaping nightmares:

var button=document.createElement("button");
button.innerHTML="ClickMe";
button.addEventListener('click', function(){
ClickFunction(userid);
});

Still using jQuery for the rest though
Click to expand...

jQuery is prettier...
Code: 
var button = $('<button>Click Me</button>');
button.data("userid", userid);

button.click(function() {
  console.log($(this).data("userid"));
});

Here: https://codepen.io/HappyPills/pen/OgeXVg
 
Last edited:
etienne_marais said:
In php/html you can do something like this:

in a loop:
<input type="button" onclick="javascript:ClickFunction(<?php echo $id; ?>);" />

If using javascript

var btnLike=document.createElement("button");
var f = "javascript:ClickFunction();";
btnLike.setAttribute("onclick",f); // successfully invokes ClickFunction when button is pressed

but

var btnLike=document.createElement("button");
var f = "javascript:ClickFunction("+userid+");";
btnLike.setAttribute("onclick",f); // invoke ClickFunction fails

What is the correct approach for adding parameters to ClickFunction ? As f is a string I assumed it would assign the onclick property in much the same way as onclick is defined in html ?
Click to expand...

var btnLike=document.createElement("button");
btnLike.setAttribute("id" , 123);
var f = "javascript:ClickFunction(this.id);";
btnLike.setAttribute("onclick",f);
 
Gezza said:
May I ask why you didn't use stackoverflow?
Click to expand...

You mean to check for answers before posting here ? I did.
If you mean to post the question on S.O., because it's a schlep.

Plus, I'm actually more interested in why my original approach (to which S.O. hinted) did not work than an actual solution.
 
Last edited:
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X