So my webapp has a problem. It seems that whenever I load content into
a div (i'm using the jquery tab ui), I'm not able to access any
changes to form elements that may occur.

For example:

I have a select box with 2 options:
<select name="suite_type" id="suite_type">
<option value="1">Residential</option>
<option value="2">Commercial</option>
</select>

This is loaded into my load div along with a bunch of other form
elements I won't bore you with.

Now I'm trying to basically post information to my database without a
page reload.. So I'm using the jquery post method to send it over, but
none of my values are updating.
document.getElementById('suite_type').value always returns 1, even if
I change it to the commercial option. If i try this on a text field it
just returns blank (I imagine its because it loaded with a blank
value.

I've tried adding a simple onchange alert to the select box which just
tells me its current value.. and Its always 1.

Do I have to reinitialize the DOM after the content it loaded or
something? This is driving me crazy since I really don't want the page
to reload on form submit.

Here's the code I'm using to load the form into the page:

function load_suite(suiteid){
        $("#loading").fadeIn("fast");
        $.post("/admin/admin.php", {process: "edit_suite", id: ""+suiteid
+""}, function(data){
                if(data.length > 1) {
                        $("#edit-suites .loaddiv").replaceWith("<div class 
=\"loaddiv
\">"+data+"</div>");
                }
        $("#loading").fadeOut("fast");
        //});
        return false;
}

And here's what I'm using to try and sent the info back:
function submit_suite(){
        $("#loading").fadeIn("fast");
        $.post("/admin/admin.php", {process:$('#process').val(),
available_date:$('#available_date').val(), suite_type:,
bedrooms:document.getElementById('bedrooms2').value,
bathrooms:document.getElementById('bathrooms2').value,
price:document.getElementById('price2').value, suite_description:$
('#suite_description').val(), suiteid:$('#suiteid').val()},
function(data){
                if(data.length > 1) {
                        $("#edit-suites .loaddiv").replaceWith("<div class 
=\"loaddiv
\">"+data+"</div>");
                }
        $("#loading").fadeOut("fast");
        });
        return false;
}

When I check the console log in firebug any of those values that loads
as empty initially, stay empty regardless of what I put in them.

Reply via email to