Question

I was having a problem loading a view into a page, I got it to work about 90%, but Im more wondering about the problem, like the why and such and was hoping for some enlightenment, Im trying to load a view into a div tag with the .load() function, but for some reason if the view has another div tag starting it, it won’t load. The view is

<div id="gameselectform" style="display: none">
    <form id = "selectgame" onsubmit = "loadForm(); return false;" method="get">
        <select name="game" id="gameselect" method="get">
            <option value="starcraftii">Starcraft II</option>
            <option value="worldofwarcraft">World of Warcraft</option>
            <option value="callofduty">Call of Duty</option>
        </select>
        <input type="submit" value="Add" >
    </form>
</div>

and if I remove the div tag, it loads. Im wondering why, and if there is a way around this? Thanks a lot in advanced! Im pretty new to javascript and jQuery, so don’t use too many big words! Haha

Edit:
The javascript function is:

function loadForm(game){
    game = game || $("#gameselect").val();
    var url = "<?php echo BASE_URL;?>Gameformload/"+game;
    $("#maindisplay").load(url);
}

Answer 1

It might be because of the display:none and the DOM?
Have you tried swapping the display property for visibility:hidden;