I have code like

function populate...() {
    var user = $.storage.get("particulars");

    if (user) {
        console.log($("#frmRegister")); // returns [] why? 
        $("#frmRegister").find("input[name=name]").val(user.name).end()
        .find("input[name=email]").val(user.email).end()
        .find("input[name=contact]").val(user.contact).end()
        .find("input[name=faculty]").val(user.faculty).end()
        .find("input[name=course]").val(user.course).end()
        .find("input[name=year]").val(user.year).end();
    }
    console.log("out")
}

$(function() {
    eventsViewModel.populateRegistrationForm();
})

Full code

I wonder why $("#frmRegister") returns null in the log, while in chrome when I use the console to do $("#frmRegister") I get the form

Does Knockout.js interfere with such things? My form looks like:

<form action="" 
  method="POST"
  data-bind="submit: $root.submitRegistration, visible: !registered()"
  id="frmRegister"
>

UPDATE

See / for the code. The line in question is line 154. (unless I change it. If so you could probably search for $("#frmRegister").find("input[name=name]") or maybe $("#frmRegister

I have code like

function populate...() {
    var user = $.storage.get("particulars");

    if (user) {
        console.log($("#frmRegister")); // returns [] why? 
        $("#frmRegister").find("input[name=name]").val(user.name).end()
        .find("input[name=email]").val(user.email).end()
        .find("input[name=contact]").val(user.contact).end()
        .find("input[name=faculty]").val(user.faculty).end()
        .find("input[name=course]").val(user.course).end()
        .find("input[name=year]").val(user.year).end();
    }
    console.log("out")
}

$(function() {
    eventsViewModel.populateRegistrationForm();
})

Full code

I wonder why $("#frmRegister") returns null in the log, while in chrome when I use the console to do $("#frmRegister") I get the form

Does Knockout.js interfere with such things? My form looks like:

<form action="" 
  method="POST"
  data-bind="submit: $root.submitRegistration, visible: !registered()"
  id="frmRegister"
>

UPDATE

See http://octopus.phpfogapp./ for the code. The line in question is line 154. (unless I change it. If so you could probably search for $("#frmRegister").find("input[name=name]") or maybe $("#frmRegister

• javascript
• jquery
• knockout.js

• So in chrome it is returning the form and in other browsers it is not? – Brian Warfield Commented Mar 24, 2012 at 15:25
• Stop chaining -- that's only how hipsters write code and probably the cause of your issue. Also, post the relevant html, I can only guess what the problem is without it. – Incognito Commented Mar 24, 2012 at 15:26
• 1 Are you adding the form dynamically or is it already in the HTML file? – JJJ Commented Mar 24, 2012 at 15:28
• It seems to work fine here: jsfiddle/jfriend00/7snJD. – jfriend00 Commented Mar 24, 2012 at 15:30
• 1 @JiewMeng The problem seems to be that applyBindings changes the DOM. Set a breakpoint right before applyBindings and one right after it, go to the console and type $('#frmRegister') before applyBindings ran. You will get your element. Now, press play again and hit the next breakpoint. You will see that now the return will be [] and in fact the form is removed from the DOM at this point. – Christoph Commented Apr 1, 2012 at 18:39

6 Answers 6

Instead of writing your Form like this...

 <form action="" method="POST" data-bind="submit: $root.submitRegistration, visible: !registered()" id="frmRegister">
...

Write it like this:

 <form action="/give/a/url.here" method="POST" id="frmRegister">

The jQuery has a whole bunch of issues like use of storage and data-bind as super globals, but your specific issue is:

    if (user.name != "") {
        $("#frmRegister").find("input[name=name]").val(user.name).end()
        .find("input[name=email]").val(user.email).end()
        .find("input[name=contact]").val(user.contact).end()
        .find("input[name=faculty]").val(user.faculty).end()
        .find("input[name=course]").val(user.course).end()
        .find("input[name=year]").val(user.year).end();
    }

Can be written as:

    if (user.name != "") {
        $("#frmRegister input").val(user.[$(this).prop('name')]).end()
    }

• Stop super-chaining, you create your own problems when you do it.
• jQuery is ugly, the code I've shown you is terrible
• There's other problems in your code, I highly encourage you to learn beyond whatever your school is teaching you. A good starting place is the JavaScript tag wiki on our site.
• I haven't actually tested what I posted, I'm running out the door to work right now.

When I load eg http://octopus.phpfogapp./#15 and set a breakpoint at the place you've indicated, the form hasn't been added to the DOM yet; an AJAX request was made from loadUping (from inside the same ready handler), which will create the form when it returns, but its response callback hasn't run yet.

You need to move the call to something that runs in or after loadUping's response callback.

First of all, I'd start by fixing the javascript errors. You get user from storage:

var user = $.storage.get("particulars");

but intially this value is not set and is only set once the submitRegistration function runs.

Line 152 reads:

if (user.name != "") {

but errors as initially user is undefined. Therefore, add an additional check:

if (user && user.name != "") {

Fix this and then see if this helps with your other issues.

You are changing the content of the DOM dynamically, So if you need jquery to work on dynamically created elements you need to use livequery

The problem is not jquery finding your form. The problem is user is null. change line 150 to

if (user == null) {

That should fix it

If you are using knockoutjs, why not data-bind the form elements to the view model and let knockoutjs do the rest like it is supposed to?

If not possible for some reason, you have to wait for the DOM like @jimrandomh states, here's an example:

// wait for the DOM to be loaded
$(document).ready(function(){
    eventsViewModel.populateRegistrationForm(); 
}