JQuery does not select element even after document preparation
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();
})
I wonder why it $("#frmRegister")
returns null in the log, while in chrome when I use the console to execute $("#frmRegister")
I get the form
Does Knockout.js affect things like this? My form looks like this:
<form action=""
method="POST"
data-bind="submit: $root.submitRegistration, visible: !registered()"
id="frmRegister"
>
UPDATE
See http://octopus.phpfogapp.com/ for code. The line in question is line 154. (unless I change it). If possible, you can find $("#frmRegister").find("input[name=name]")
or perhaps$("#frmRegister
source to share
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">
There are a whole bunch of problems with jQuery like using storage and data binding as supergliable, but your specific problem 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();
}
It can be written as:
if (user.name != "") {
$("#frmRegister input").val(user.[$(this).prop('name')]).end()
}
- Stop super-catching, you will create your own problems when you do.
- jQuery is ugly, the code I showed you is terrible.
- There are other problems in your code, I highly recommend that you learn beyond what your school teaches you. A good place to start is the JavaScript wiki tag on our site .
- I haven't actually verified what I posted, I'm at work right now.
source to share
When I load for example http://octopus.phpfogapp.com/#15 and set a breakpoint at the location you specified, the form has not been added to the DOM yet; the AJAX request was made from loadUpcoming (from within the same ready-made handler) that will create the form when it returns, but the response callback hasn't been fired yet.
You need to move the call to whatever is being executed in the loadUpcoming callback.
source to share
First of all, I'll fix JavaScript errors. You get user
from the repository:
var user = $.storage.get("particulars");
but in principle this value is not set and is set only after the function is started submitRegistration
.
Line 152 reads:
if (user.name != "") {
but errors as initially the user is undefined. So add an extra check:
if (user && user.name != "") {
Fix it and then see if it helps other problems.
source to share
If you are using knockoutjs, why not bind data to form elements to the view model and let knockouts do the rest as they are supposed to?
If for some reason this is not possible, you need to wait for the DOM, for example @jimrandomh's state, here is an example:
// wait for the DOM to be loaded
$(document).ready(function(){
eventsViewModel.populateRegistrationForm();
}
source to share