Javascript question

[etienne_marais]

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 ?

 

[Hamster]

What's the actual error?

 

[etienne_marais]

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.

 

[etienne_marais]

What's the actual error?

No error, i'm on vi in linux directly on webserver, don't usually do web stuff. Clicking just does nothing.

 

[Hamster]

Does this front end developer have access to jQuery? Vanilla JavaScript should be able to do the same but:

$('<button onclick="clickFunc('+userID+')">Nom</button>');

..should work

 

[etienne_marais]

Does this front end developer have access to jQuery? Vanilla JavaScript should be able to do the same but:

$('<button onclick="clickFunc('+userID+')">Nom</button>');

..should work

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]

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...

Unless I misunderstoon, is that jQuery sample actually creating a new button as opposed to being a selector ?

 

[etienne_marais]

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.

 

[Hamster]

It's creating a new element. Adding the event to an existing button:

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

Typing from phone so maybe not 100%

 

[Hamster]

Maybe I misunderstood you

 

[etienne_marais]

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.

 

[etienne_marais]

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

 

[vic777]

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

 

[Hamster]

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

jQuery is prettier...

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

 

[GreGorGy]

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 ?

var btnLike=document.createElement("button");
btnLike.setAttribute("id" , 123);
var f = "javascript:ClickFunction(this.id);";
btnLike.setAttribute("onclick",f);

 

[etienne_marais]

Thanks everybody, going to stick with Hamster's jQuery

 

[etienne_marais]

var btnLike=document.createElement("button");
btnLike.setAttribute("id" , 123);
var f = "javascript:ClickFunction(this.id);";
btnLike.setAttribute("onclick",f);

Interesting, thanks.

 

[Gezza]

May I ask why you didn't use stackoverflow?

 

[Hamster]

May I ask why you didn't use stackoverflow?

Because we here at MyBroadband are smarter

 

[etienne_marais]

May I ask why you didn't use stackoverflow?

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.