jQuery Forum

Unexpected behavior from append()

in Using jQuery • 6 years ago

I want to add some elements when a button is pressed, but have strange results:

I set up a fiddle here: https://jsfiddle.net/vn65g5ve/3/

1) Why is it saying add_room() is not defined? This is of course not related to the question per say

2) Why is the text in the inspector coming up as "Price", "type: " etc ? So why the double quotes? This seems to be because a text node was appended, and again not really related to the main issue, which is:

3) Why is the appended code not interpreted as HTML?

Seems like only the first part is, before the first "+"

4) If I want to separate somehow HTML and JS, how could I do this? The above code forces me to have a lot of HTML in the js file.

Thanks for any info

Replies(17)

Re: Unexpected behavior from append()

6 years ago

Your quotes were off and you didn’t tell fiddle to put the script in the head.

https://jsfiddle.net/jakecigar/vn65g5ve/4/ uses backtick quotes and tells fiddle to put the script in the head.

JΛ̊KE

https://developer.mozilla.org/en-US/docs/JavaScript_templates

Re: Unexpected behavior from append()

6 years ago

If you want to separate HTML from JS, use a template solution. It is a good idea if you will be doing this a lot!

There are many libraries for this, or you can roll your own.

Typically, you would store templates in hidden divs. Then your own code or some library will fetch a template and pass it through some template engine.

Here's a good starting point:

Re: Unexpected behavior from append()

6 years ago

You had spaces between all of your < and tag names, except for the first one.

onclick is old-school, and not good current practice. Since you are interested in removing the HTML from your Javascript, you should also remove the Javascript from your HTML.

$('.room-add').click(function() { ...

Re: Unexpected behavior from append()

6 years ago

Agreed onclick sucks, but it allows me to deal with binding of the events to the elements that are added later on in a very easy way (.click would not work I think, and I need to use .on)

Re: Unexpected behavior from append()

6 years ago

Don't bind, then. Delegate:

$(document).on('click', '.room-add', function() { ...

The click events will bubble up to document (or you can use a closer parent if you wish) and so it does not matter if the elements exist or not at the time that the handler is registered.

Re: Unexpected behavior from append()

6 years ago

Thanks, yes, delegation is the key, but needs a bit more planning.

Inline onclick() is much easier to manipulate for the lazy.

I'll try to at least implement delegation if I cannot cope with the templateing system as well.

I had a quick read but seems a bit more complicated and the project needs to be finished quick, so no time to study new tricks.

Your help is very much appreciated though! I am appending a lot of HTML and I feel the need for a smarter approach.

Re: Re: Unexpected behavior from append()

6 years ago

Did you look at the solution I gave you at the top of the thread?

JΛ̊KE

Re: Unexpected behavior from append()

6 years ago

Actually, you don't need any templates, at least for this example. I saw your +s, and assumed you were plugging-in some variable data. You only used it make a long string without formatted a very long line.

Jake's backquote solution allows you to use multiple lines to populate a variable with text, without the need for either + or end-of-line continuations. And it will also avoid problems if you mix single and double quotations.

Since you have no variable substitution, you could just put the HTML in a hidden element, and clone that element and insert. It would make sense to place the hidden element at the top of your list, table, whatever where you will be adding copies.

I don't understand what "planning" is needed to use delegation. It is a 5-minute solution. Make sure to call event.preventDefault() to prevent the default click action.

See fiddle which uses a hidden div to store your HTML "template".

https://jsfiddle.net/39z0jv1L/

If you needed a real template (need to plug-in some variable data) then you would fetch the content of the hidden div and then make a call to your favorite template engine with a list of parameters before appending. (Or the library/plugin you choose might just go find the template for you given a selector.)

Re: Unexpected behavior from append()

6 years ago

@jakecigar, yes, thank you, I noticed you created one single quote instead of concatenating with "+". Is that something that I missed? (and you set jQuery to load "no wrap - in <head>")

@watusiware, thanks, that really helps me. Basically, I am using the same code in the HTML file and in the JS file, but, in the HTML file, of course all "vallue" attributes will hold the actual values from the DB.

As the JS is used to allow the user to add a new entry, the "value" attribute will be empty. Hope that makes sense.

Question about your fiddle: why do you start with "$(function() {" ?

Re: Unexpected behavior from append()

6 years ago

$(function() is the same as $(document).ready(). It runs the script provided as a parameter once the document is fully loaded. Without it, the script would not find the template, assuming the jQuery code is loaded in head, because at that point the HTML hasn't been parsed and added to the DOM yet.

The delegation doesn't necessarily have to be inside of a ready block. But it is necessary in order to use a cached jQuery for cloning the template.

Jake set jsFiddle for no wrap in <head> because that's where jQuery code should normally be put. In <head>, not in <body>. jsFiddle defaults to putting the JS in body.

The "single quote" is a "backquote" or "backtick". Look at it carefully. Javascript will read everything it sees until the next backquote into a string, and so you can freely use single or double-quotes.

Re: Unexpected behavior from append()

6 years ago

Template literals - JavaScript | MDN Is one of the new features in javaScript. It leads to cleaner and less buggy code.

There are quite a few uses. That page is how I learned to love the backtick.

JΛ̊KE

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Re: Unexpected behavior from append()

6 years ago

Unfortunately, it looks like template literals still have limited browser support. See the supported browsers at the end of the MDN article.

Template literals do support variable interpolation, though!

There are also now <template> elements.

It actually looks like they are better-supported by current browsers than Template Literals.

http://caniuse.com/#feat=template

(The MDN page is sketchy about support, so I checked CanIUse).

Re: Unexpected behavior from append()

6 years ago

I’ve used <template> several time, they are much more difficult to use than <div class="template"> and their efficiency is only marginally better.

JΛ̊KE

Re: Unexpected behavior from append()

6 years ago

https://jsfiddle.net/jakecigar/vn65g5ve/7/ is pretty much the same as the first one without backticks.
https://jsfiddle.net/jakecigar/vn65g5ve/8/ uses <template> and adds a tiny plugin to make them easy to use.

JΛ̊KE

Re: Unexpected behavior from append()

6 years ago

Wow, thanks, I didn't notice the backticks! Looked at the code 10 times but didn't. Seems like backticks are a new ES6 thing.

Regarding $(function), yes, seems like all below are the same thing:

$(function(){

});

jQuery(document).ready(function(){

});

$(document).ready(function(){

});

$(document).on('ready', function(){

})

Regarding delegation, I actually have a delete button on all rooms added, so delegation is a must, please see this: https://jsfiddle.net/vn65g5ve/9/

Thanks for the template element info, I had no idea it existed.

Regarding https://jsfiddle.net/jakecigar/vn65g5ve/7/ I found W3schools saying:

The \ method is not a ECMAScript (JavaScript) standard.
Some browsers do not allow spaces behind the \ character.

Is it safe?

.ready() | jQuery API Documentation

Re: Re: Unexpected behavior from append()

6 years ago

The first 3 variants of "ready" are all the same. #1 is shortest, so it wins. The 4th is strange.

https://jsfiddle.net/jakecigar/vn65g5ve/10/ delegates the delete.

Yes. If you put ANYTHING on the same line after the \. it doesn't work. So, just don’t do that. Even a space.

JΛ̊KE