After loading control into page via Web service nothing works onthe page

Question

i just uploaded a control into a page using Ajax and nothing works anymore.

i mean links, dropdown, buttons are all dead.

when i look at the page source i can not even see the source for the uploaded control.

Only if i select an item i can see its source

This is the button handler i use

enter <button id="ButtonStart" onclick="javascript:BlackJack.Services.DisplayDetailsBox(DisplayDetailsBox)" class="ButtonStart" title="Start" type="button"></button>here

which calls the following service

[WebMethod(EnableSession = true)]
    public string DisplayDetailsBox()
    {
        return ViewManager.RenderView("~/UserControls/DetailsBox.ascx", null);
    }

which returns the following string

<div><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUBMGRkqTQJiq2ZaCdOHYQoNeVUcMtSIyo=" /></div><script language="javascript" type="text/javascript">
//Validates the texbox values
function GetTextBoxUsernames() {
    var values = [];
    $("input[type=text]").each(function() {
        if (!isEmpty(this.value)) {
            values.push(this.value);
        }
    });
    if (values.length == GetNumberOfPlayers()) {
        BlackJack.Services.StartGame(values, StartGame);
    } else {

        document.getElementById('Label').innerHTML = '<label class=\'ErrorLabel\'>All the names are required!</label>';
    }
}

function StartGame(result) {
    document.getElementById('Game').innerHTML = result;
}

//Used to display and hide panels
function HidePanel(panelToDisplay, panelToHide) {
    jQuery(document).ready(function() {
        jQuery("#" + panelToDisplay).css("display", "block")
        jQuery("#" + panelToHide).css("display", "none")
    });
}

//Handles the ButtonBack clik
function Back() {
    HidePanel('Startbox', 'DetailsBox');
    document.getElementById('ButtonNumberPlayers').className = 'ButtonNext';
    document.getElementById('ButtonNext').className = 'Hidden';
}

//Checks is a string is empty
function isEmpty(inputStr) { return !(inputStr && inputStr.length) }

//Gets the number of players from the DropDownPlayersNo       
function GetNumberOfPlayers() {
    return document.getElementById('DropDownPlayersNo').selectedIndex;
}



//If the number of players is selected from the DropDownPlayersNo displayes 
//the UsersList control to the page
function BindUserList(result) {
    var label = document.getElementById('UsersList');
    if (isEmpty(result)) {
        label.innerHTML = '<label class=\'ErrorLabel\'>Please Select the Number of Players!</label>';
    } else {
        document.getElementById('DropDownPlayersNo').className = 'Hidden';
        document.getElementById('ButtonNumberPlayers').className = 'Hidden';
        document.getElementById('ButtonNext').className = 'ButtonNext';
        label.innerHTML = result;
    }
}


function DisplayDetailsBox(result) {
    HidePanel('Details', 'Startbox');
    document.getElementById('Details').innerHTML = result;
}
</script>

Select the Number of players

Select the number of Players

- Select - 1 2 3 4 5




">

the string returned is binded to the page like this

 function DisplayDetailsBox(result) {
         HidePanel('Details', 'Startbox');
         document.getElementById('Details').innerHTML = result;
     }

to a simple

<div id="Details"></div>

thanks for your help