带有Asp.NET代码的JQuery消息

Question

Don't have much knowledge on JQuery/CSS and would be helpful if someone could help me here.

The idea is to show a client side message box using JQuery while grabbing some data from code behind. The data from server is dynamic and will be assigned to the function parameter on button click in code behind.

Issue: It is working as expected only once. Second time onwards, I am able to see the message pops up but no contents ( anything I defined within message div)

Script:

 function ShowPopup(message) { $(function () { $("#dialog").dialog({ height: 400, width: 500, modal: true, position: { my: 'top', at: 'top+350' }, title: message, buttons: { Close: function () { $(this).dialog("close"); } } } ); }); }; 

Html:

  <div id="dialog" class="ui-helper-hidden"> <div id="tabs"> <ul> <li><a href="#tabs-1" >Proin elit arcu</a></li> <li><a href="#tabs-2">Rutrum commodo</a></li> </ul> <div id="tabs-1"> <p>Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> 

Code behind:

 protected void BtnMoreInfo_OnClick(object sender, EventArgs e)
    {
        string message = "Message from server side";
        ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
    }

Answer 1

can you please use the dialog code inside a button click, and i assume your request was not Jquery AJax. so on page load/or Dynamically after page Load place our message in HTML DOM and take that message on button click, something like this,

    $(function () {
    $('.yourButton').click(function () {
        var message = $('#messageDiv').attr('data-message');
        $("#dialog").dialog({
            height: 400,
            width: 500,
            modal: true,
            position: {my: 'top', at: 'top+350'},
            title: message,
            buttons: {
                Close: function () {
                    $(this).dialog("close");

                }
            }
        }
        );
    });
});

then place your message in html DOM, i prefer it as data attribute.

html

<div id="messageDiv" data-message="yourMessage"></div>

thank you and let me know if it works as expected.

Answer 2

if you dont have ScriptManager in your page, you can create a function in C# code, and then call this function each time you want to show the message. This is my example:

protected void Message(string str)
{
  StringBuilder stringBuilder = new StringBuilder();
  stringBuilder.Append("<script type = 'text/javascript'>");
  stringBuilder.Append("window.onload=function(){");
  stringBuilder.Append("alert('");
  stringBuilder.Append(str);
  stringBuilder.Append("')};");
  stringBuilder.Append("</script>");
  this.ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", stringBuilder.ToString());
}

Hope this works for you.

Answer 3

It turnout to be a duplicating Div, which was part of master page. Mentioning unique name solved this issue. Sorry being an ignorant.