Looking for assistance with JQuery/CSS as I'm not very knowledgeable in these areas.
I want to display a client-side message box using JQuery while fetching some data from the code behind. The data from the server is dynamic and will be passed as a function parameter when a button is clicked in the code behind.
Problem: The message box works correctly the first time, but on subsequent attempts, the message pops up without displaying any contents (as defined within the 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);
}