Member Avatar for McLaren

Hello,

I am following this series

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-5/

and everything ws fine when was working with just javascrtript and html.

But now I want to put it together with php fraework and I cannnot get it to work.

It does not draw select box first of all. And does not draw contacts. Maybe if I would get the idea why it is not drawing select box, then I would undestand other things.

I commented out the code to figure out in which place things stop working.

js
http://pastebin.com/VLUdrJUE

html
http://pastebin.com/PNRKcbTD

I tried even this:

$('#filter').html('sasd');
this.$el.find("#filter").append('why this does not work?????');

but does not show any changes. But when I console.log that element it is found. So element selected but does not show any text/html. Why is this?

  • 2 Contributors
  • 3 Replies
  • 270 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

Short answer: the two wrappers are not equivalent for timing. As found, the version that ran only after the DOM was ready made the difference; the immediately-invoked wrapper executed before the page DOM existed, so the view’s element selection ended up empty and all DOM updates targeted that empty object. ’s question about this.$el is the right direction — that property is the view’s cached jQuery element, and if it’s created while the target node is missing, appending or replacing content won’t touch the real page.

A few practical rules to avoid the same trap:

  • Ensure the app is instantiated after the markup exists (move the app script tag after the HTML or instantiate when the DOM is ready).
  • Don’t capture a jQuery object for el before the DOM is available; either create the view after the DOM exists or set the element later.
  • Prefer scoped lookups (this.$(...) / the view’s element methods) so work happens inside the view’s element rather than relying on global selectors.

Quick debug checklist:

  • Confirm load order: jQuery then Backbone/Underscore then the app script; avoid multiple jQuery copies.
  • Inspect the view at runtime to see if its element is present and has length; an empty selection is the usual sign of a timing issue.
  • Check for noConflict/AMD wrappers that might change $ or delay resolution.

Bottom line: this was a timing/scope problem, not Backbone magic. Instantiating the view only after the DOM node exists (or moving the script to after the markup) reliably fixes the symptom while keeping an IIFE for $ safety if desired.

Recommended Answers

All 3 Replies

Member Avatar for CGSMCMLXXV

Because of this:

this.$el

What is the intend of $el?

Member Avatar for McLaren

What is the intend of $el?

el: $("#contacts"),

I don't know what this

this.$el

means, I usually don't use such expessions, but as from tutorial there were sentences about catching or something like that - jquery cached version. I am not sure.

Member Avatar for McLaren

looks like I found the problem :D

but I don't get why is that. Nothing worked, so I eneded up deleting all html and all javascript because it has to start working at some point. So I have empty files.
Just made div #contacts, included jquery and app.js which I am wrinting.

in app.js only put the code

$(function() {
    // Stuff to do as soon as the DOM is ready;
        $('#contacts').html('sudas'); 
});

and finally it started to work :D wow. IF this would not have worked then I really would not understand.

So I Ctrl + Z both html and app.js files to get back where I was.

And I see the difference.

Original document ready was like this:

(function ($) {
...
} (jQuery));

But my wokring code was as you saw

 $(function() {

And this difeerence made it work. FML.

Can somebody explain what is the difference? I thoguht its the same document ready.
ANd how this could work earlier? I mean

(function ($) {

O, did quick google search
http://jquery-howto.blogspot.com/2008/12/what-heck-is-function-jquery.html

so it is for the reason to work with other libarries. But still why it could stop working for me?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.