从AJAX调用中加载knock中的knockout.js形式

Question

I'm attempting to load some HTML stored as text for a knockout.js form. A customer's server will use an AJAX GET call to my server which will then return the HTML for the table. Right now, the table is being returned, however it's formatted like knockout.js hasn't been loaded but I'm not receiving any errors (dropdown not populated, foreach loop for a table is displaying a blank row, a secondary div is displayed when it should only be displayed once a submit button has been pressed).

When I have the HTML on this page it works, so I'm pretty sure it's not incorrect code in the form. The only thing I can think of is that knockout is picky about single and double quotes, although I feel like that would rsult in errors. Right now I'm testing on my server so same origin policy shouldn't be an issue at the moment.

Here is the page that initially loads

//main.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

<!-- I also tried to include the knockout file includes here but made no difference -->

<script>
<!-- call to get HTML for knockout form -->
$.ajax({
        type: 'GET',
        url: '/orders/return_form',
        data: "true",
        success: function(response) { // on success..
            $('#order_div').html(response); // update the DIV
        }
    })
</script>

<div id = "order_div">
        <!-- returned knockout form goes here -->
</div>


<script src="knockout.js"></script>
<script src="knockout_info.js"></script>  <!-- MVVM file -->
<script src = "Knockout-Validation/Src/knockout.validation"</script>

Here is the code to return the code for the table

//orders/return_form

if($_GET['true']){

     echo "table code here ";  
     //I tried to encode this before but got all kinds of extra markup due to whitespace and other misc. characters

    //or

    $form = new stdClass;
    $form->table = "<form method='post'>
                    <input type='textbox' name='text'/>
                    <input type='submit' name='textsubmit'/>
                </form>";
    echo $form->table;


}

If I include the table instead of calling for the code it works. However, it's a pretty lengthy form and considering this code will be on someone else's server calling to mine, I'd like to keep their code to a minimum.

Answer 1

You're not doing any binding.

success: function(response) { // on success..
    $('#order_div').html(response); // update the DIV
    ko.applyBindings(myModel); // rebind
}