We help IT Professionals succeed at work.

Jquery syntax

Moti Mashiah
Moti Mashiah asked
on
163 Views
Last Modified: 2017-05-17
Hi guys,

I'm trying to inject element to the dom with jquery html method, and have event handler with this event which get variable.

Here is what I'm doing:
 var ilc = 100;
 $("myid").html("<a onclick='myfunction(" + ilc + ")'</a>");

Open in new window


In the example above I'm getting syntax error, but if I take the parameter out and just run the function then it works.

can somebody help and send me the right syntax for this.

thanks,
Comment
Watch Question

Commented:
$("myid").html needs a quantifier to a class or an ID

e.g.
$("#myid").html // for an id

or

$(".myid").html // for a class
Moti Mashiah.NET Developer

Author

Commented:
thank you for paying attention.

it was just missed typo when I copy my code, but this is wasn't my question.

here is the full code with the #
 var ilc = 100;
 $("#myid").html("<a onclick='myfunction(" + ilc + ")'</a>"); // in my case it is id.

Please can you answer my question above.

thank you soo much.
NorieAnalyst Assistant
CERTIFIED EXPERT

Commented:
Does it work if you hard-code the ilc value?
 $("#myid").html("<a onclick='myfunction(100)'</a>"); // in my case it is id.

Open in new window

Moti Mashiah.NET Developer

Author

Commented:
I can try.
let me try and get back to you on it.
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Moti Mashiah.NET Developer

Author

Commented:
thank you that works,

your syntax was correct.

thanks soo much.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
This is arguably a more correct way of doing it. If you are going to create the element with javascript then might as well attach the click handler directly when you create it.

	$("#myid").append(
	   $('<a/>').click(myfunction(lic))
	)

Open in new window

Note tag is empty - so not sure what you will be clicking on.
Moti Mashiah.NET Developer

Author

Commented:
Hi Julian thank you for your answer.
Can I send you my full script I really scratch my head how to pass this string parameter through html jquery method.

Here is my story:
what I'm trying to do is to inject html into dom in this way:
Note: it is just an example:
function EditDeleteOrqtyChange() {
        var ilc = "COLE 946016618-RL";
        var qty = 20
        var itmparentid = 234;
        $("#push_edit_parentid").show();
        $("#push_edit_parentid").html('<div class="col-md-6 alert alert-info"><div class="row"><div class="col-md-12"><div class="col-md-8"><span>' + ilc + '</span></div>'
                                      + '<div class="col-md-4"><a onclick="deleteParent('+ ilc + ')">Delete</a></div></div></div>'
                                      + '<br /><div class="row"><div class="col-md-12"><div class="col-md-8">'
                                      + '<input type="number" value="' + qty + '"/></div><div class="col-md-4"><a onclick="changeQtyforparent(' + itmparentid + ')"><strong>Change</strong></a>'
                                      + '</div></div></div></div>')
    }

Open in new window


Now after run this method it is in the dom.
so what I'm trying to do now is to click on "delete" and initiate the method "deleteParent" method and send string to this method:

 function deleteParent(ilc) {
        console.log(ilc)
    }

Open in new window


Note: if I pass number it works like onclick="deleteParent(345)

Please help dear Julian.

I was trying your example but it didn't work for me.
Moti Mashiah.NET Developer

Author

Commented:
Hi Julian,

I got it ...so I don't need help.

Thank you anyways.

onclick="deleteParent(\'' + ilc + '\') //apparently this is the way to send string.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
That will work - my example was trying to illustrate the difference between passing html to .html() method as opposed to creating the elements and setting their attributes.

The html approach may seem easier but it is easy to get lost in the string concatenation and escaped characters (quotes).

Another aspect of the example was to highlight the practice of attaching event handlers to elements rather than implementing them as attributes on the elements (element.click vs onclick)

In cases where complex HTML is required - you could consider using a template that you load with JavaScript and then modify as needed.

Having said that you appear to have a solution - my comments where intended more as background information for you and anyone else who might be reading this thread.
Moti Mashiah.NET Developer

Author

Commented:
Dear Julian,

I got another issue with my code(like the same code I post earlier).

Just to remind you this is my code:
$("#push_edit_parentid").html('<div class="col-md-6 alert alert-info"><div class="row"><div class="col-md-12"><div class="col-md-8"><span>' + ilc + '</span></div>'
                                          + '<div class="col-md-4"><a onclick="deleteParent(\'' + ilc + '\')">Delete</a></div></div></div>'
                                          + '<br /><div class="row"><div class="col-md-12"><div class="col-md-8">'
                                          + '<input type="number" id="qtychid"/></div><div class="col-md-4"><a onclick="changeQtyforparent(\'' + $("#qtychid").val() + '\')"><strong>Change</strong></a>'
                                          + '</div></div></div></div>')

Open in new window


What I'm trying to do now is - after the input (id="qtychid") created I have this element with  onclick even on it see below:
onclick="changeQtyforparent(\'' +$("#qtychid").val() + '\')"><strong>Change</strong></a>

Open in new window


Now I want to take whatever user put into this input box and send it to another method. the issue I experience now is that the variable comes as undefined.

Please, let me know your idea.

Thanks,
Moti Mashiah.NET Developer

Author

Commented:
Hi Julian,

I figured it out again LOL...

but thank you again..

anyway all I had to do is to create the variable in the next method to make it readable.

Thanks,

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.