Popup not working on server side, but works locally

Question

I'm using a jQuery popup where users will save data from. When I run the application from my local machine (web project) the popups displays and everything works, but as soon as I try and do the same functions on server side it doesn't display the popup on the form.

I'm using the following jscript:

<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery-ui-1.8.17.custom.min.js"></script>

My script to show the modal popup is as follows:

<script type="text/javascript">
function showdialogServiceType() {
    $(function () {
        $("#dialogServiceType").dialog("open");
    });
    return false;
}

$(function () {
    $("#dialogServiceType").dialog("destroy");
    var dlgServiceType = $("#dialogServiceType").dialog({
        title: "Service Type",
        autoOpen: false,
        modal: true,
        resizable: true,
        width: 'auto',
        buttons: {
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
    dlgServiceType.parent().appendTo(jQuery("form:first"));
});
</script>

To show the above query I'm using an imagebutton in a gridview. I'm calling this popup as follows:

protected void SelectVehicleReg_Click(object sender, EventArgs e)
{
    ImageButton lb = sender as ImageButton;
    GridViewRow row = (GridViewRow)lb.NamingContainer;
    txtRowID.Text = row.Cells[0].Text;
    txtVehicleReg.Text = row.Cells[1].Text;

    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popServiceType", "showdialogServiceType();", true);
}

I have also tried just a simple messagebox with jquery, but that doesn't work (it works on other projects on server side though). The popups just doesn't want to work in this web project after it's published.

My message dialog for test:

$(function () {
    $("#dialog").dialog("destroy");
    $("#dialog").dialog({
        title: "Message",
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});
function showMessage() {
    $(function () {
        $("#dialog").dialog("open");
    });

    return false;
} 

<div id="dialog" style="display: none">     
    <asp:Label ID="lbljQMessage" runat="server" Text=""></asp:Label>
</div>

protected void Button1_Click(object sender, EventArgs e)
{
    lbljQMessage.Text = "Test";
    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showMessage();", true);
}

Have I done something wrong?

Answer 1

Are you sure that you reference jquery correctly? I mean server will have different path than your local machine. Use build in debugger (F12) in your browser to see if js files are included correctly (if so they will be displayed as link and you can open it). You can check too if script is executed in same debugger. If you used chrome go to source tab and select you r site. Than you can place breakpoints inside your script. Then you will see if script is executed or maybe there are some error.