asked on

Problem to Popup

Hi,
I have these

$(function () {
    $("#Panel_Msg").dialog({
        autoOpen: false,
        autoResize: true,
        resizable: false,
        title: "Error",
        open: function (event, ui) {
            $(this).parent().appendTo("form");		//allow .Net buttons to post back
        }
    });

});

function closePopup0() {
    $("#Panel_Msg").dialog("close");
}

function openPopup0() {
    $("#Panel_Msg").dialog("open");
}
...
    <cc1:ToolkitScriptManager runat="server"></cc1:ToolkitScriptManager>
	<asp:panel id="Panel_Msg" runat="server">
		<asp:Literal id="L_Msg" runat="server"/>
		<br /><br />
        <div style="text-align:center;">
		    <asp:Button id="OKButton" OnClick="closePopupMsg" runat="server" Text="OK"/>
        </div>
	</asp:panel>
	...
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ...
                Panel_Msg.Style.Add("display", "none");

Open in new window

but the OK button of the Popup is displayed on top of the Web-page, when refreshing or displaying the page. Why?

James Bilous

If you view the source, are you sure its just the button or is it actually the whole panel being shown at the top of the page? Try adding css that makes the panel "display: none".

Karen

what CSS is already defined for the panel? it could possibly be overriding your code
e.g. if you have
div
{
display:block !important;
}
then that would make the panel + button show

Peter Chan

ASKER

Many thanks to all.

James,

Try adding css that makes the panel "display: none"

How?

James Bilous

<script type="text/css">
#Panel_Msg {
   display: none;
}
<script>

Open in new window

Peter Chan

ASKER

I put this

#Panel_Msg {
display: none;
}

to css file but I still get button shown on top of the page like

8e.png

Karen

try

#Panel_Msg {
display: none !important;
}

James Bilous

Is there any javascript broken on the page? Use the console in developer tools in chrome or firebug in firefox to see if there are errors. If there are, javascript may stop executing and you may see things not execute correctly.

Peter Chan

ASKER

Many thanks to all.
Snow,
I put

        #Panel_Msg {
           display: none !important;
        }

Open in new window

to the css file. It is strange that I only see OK button by IE while it is fine on Firefox. How to resolve the problem on IE?

Here is the URL
http://my-friend.co/Own_rec3/Default.aspx?userid=NEW

James,
When I press F12, I see other problem related to password.

Karen

you also have an "OK" button in Panel4, are you sure it is not that one that is showing?
which version of IE is it happening on?

Peter Chan

ASKER

The current OK button does belong to Panel_Msg, right? It is IE 11.

Karen

I cannot see the button on my IE
the only error I can see is
HTML1524: Invalid DOCTYPE. The shortest valid doctype is "<!DOCTYPE html>".
Try changing your DOCTYPE and see if that helps. It may be that IE does not know how to render the page properly.

Peter Chan

ASKER

HTML1524: Invalid DOCTYPE. The shortest valid doctype is "<!DOCTYPE html>".

But I already have such line below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...

Open in new window

Karen

yes it is saying that is an invalid doctype.
Try changing it to
<!DOCTYPE html>
and see if the button still shows.

Peter Chan

ASKER

Even if I change this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Open in new window

<!DOCTYPE html>

Open in new window

I still see OK button on IE.

Peter Chan

ASKER

Any other help?

Karen

#Panel_Msg { display: none; }
will not work because the ID will not be Panel_Msg. Since it is an asp:Panel control the ID will be something like container1_container2_Panel_Msg.

So try changing your code

protected void Page_Load(object sender, EventArgs e)
...
Panel_Msg.Style.Add("display", "none !important");

James Bilous

I'll check out your updates and get back to you tomorrow, sorry for the delay

Peter Chan

ASKER

Many thanks to all.

Karen.
Why can't I show the Popup by these codes?

$(function () {
    $("#Panel_Msg").dialog({
        autoOpen: false,
        autoResize: true,
        resizable: false,
        title: "Error",
        open: function (event, ui) {
            $(this).parent().appendTo("form");		//allow .Net buttons to post back
        }
    });

});

function closePopup0() {
    $("#Panel_Msg").dialog("close");
}

function openPopup0() {
    $("#Panel_Msg").dialog("open");
}
...
	<asp:panel id="Panel_Msg" runat="server">
		<asp:Literal id="L_Msg" runat="server"/>
		<br /><br />
        <div style="text-align:center;">
		    <asp:Button id="OKButton" OnClick="closePopupMsg" runat="server" Text="OK"/>
        </div>
	</asp:panel>
	...
                    ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "call", "$(function () {openPopup0();});", true);

Open in new window

when I'm to further display it.

Karen

It will not work because the ID is not Panel_Msg.

You will need to do something like

$(function () {
    $("div[id$='Panel_Msg']").dialog({
        autoOpen: false,
        autoResize: true,
        resizable: false,
        title: "Error",
        open: function (event, ui) {
            $(this).parent().appendTo("form");		//allow .Net buttons to post back
        }
    });

});

function closePopup0() {
    $("div[id$='Panel_Msg']").dialog("close");
}

function openPopup0() {
    $("div[id$='Panel_Msg']").dialog("open");
}

Open in new window

and you may have to do

function openPopup0() {
    $("div[id$='Panel_Msg']").removeAttr("style");
    $("div[id$='Panel_Msg']").dialog("open");
}

Open in new window

Peter Chan

ASKER

Sorry, using these

$(function () {
    $("div[id$='Panel_Msg']").dialog({
        autoOpen: false,
        autoResize: true,
        resizable: false,
        title: "Error",
        open: function (event, ui) {
            $(this).parent().appendTo("form");		//allow .Net buttons to post back
        }
    });

});

function closePopup0() {
    $("div[id$='Panel_Msg']").dialog("close");
}

function openPopup0() {
    $("div[id$='Panel_Msg']").dialog("open");
}

Open in new window

I still cannot show the Popup, using this

                    ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "call", "$(function () {openPopup0();});", true);

Open in new window

even if I've put

function openPopup0() {
    $("div[id$='Panel_Msg']").removeAttr("style");
    $("div[id$='Panel_Msg']").dialog("open");
}

Open in new window

Karen

What triggers the call to
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "call", "$(function () {openPopup0();});", true);

Is your Panel_Msg within an update panel?

I don't think ScriptManager.RegisterClientScriptBlock works with a page, it only works in an update panel.
Try using

ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(this.GetType(), "call", "$(function () {openPopup0();});", true);

Open in new window

Peter Chan

ASKER

Many thanks Karen.
I already have one Panel like

    <cc1:ToolkitScriptManager runat="server"></cc1:ToolkitScriptManager>
	<asp:panel id="Panel_Msg" runat="server">
		<asp:Literal id="L_Msg" runat="server"/>
		<br /><br />
        <div style="text-align:center;">
		    <asp:Button id="OKButton" OnClick="closePopupMsg" runat="server" Text="OK"/>
        </div>
	</asp:panel>

Open in new window

and the similar way did work in the past for other Panels. Even if I've put these

                    ClientScriptManager cs = Page.ClientScript;
                    cs.RegisterClientScriptBlock(this.GetType(), "call", "$(function () {openPopup0();});", true);

Open in new window

instead, I still cannot show the Popup.

Karen

I suspect the popup is there but you just cannot see it.
try applying some CSS
<asp:panel id="Panel_Msg" style="height: 1000px; background-color: red;" runat="server">

Is your latest code in
http://my-friend.co/Own_rec3/Default.aspx?userid=NEW
If so, how do I trigger it so this code is called?

Karen

Also check your code to ensure you are not setting Panel_Msg.visible = false anywhere

Peter Chan

ASKER

Many thanks Karen.

I've tried to put height and Background color to the color but I still show the Popup using the codes I showed to you.

You can try to input

User name
Religion
Country
City
Job Category
Job group
Job title
Choose a .jpg/.png file

and then try to press Save button. For this, I expect to show message to mention that User ID should have been entered!

SOLUTION

Karen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

Hi,
I remove this part

        #Panel_Msg {
           display: none !important;
        }

Open in new window

from css file, and try to do the same. However, the Popup does not come out as expected.

Karen

Are you sure you have done a full refresh of the page, so the new CSS file is loaded? Because I can see the message now on your site.

Peter Chan

ASKER

I put these

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
            	Panel_Msg.Style.Add("display", "none");

Open in new window

why still is the Popup being shown when displaying the Web page?

I only want to show the relevant Error message by this Popup panel!

Karen

I do not know why you think it isn't working. It looks like it is working to me.

SOLUTION

Karen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

I put this

$(function () {
    $("div[id$='Panel_Msg']").dialog({
        autoOpen: false,
        autoResize: true,
        resizable: false,
        title: "Error",
        appendTo: "form"
        //open: function (event, ui) {
        //    $(this).parent().appendTo("form");		//allow .Net buttons to post back
        //}
    });

});

Open in new window

and have re-deployed the project but the Popup is still being shown, when displaying the web-page.

ASKER CERTIFIED SOLUTION

Karen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

I have these

$(function () {
    $("div[id$='Panel_Msg']").dialog({
        autoOpen: false,
        autoResize: true,
        resizable: false,
        title: "Error",
        appendTo: "form"
        //open: function (event, ui) {
        //    $(this).parent().appendTo("form");		//allow .Net buttons to post back
        //}
    });

});

function closePopup0() {
    $("div[id$='Panel_Msg']").dialog("close");
}

function openPopup0() {
    $("div[id$='Panel_Msg']").dialog("open");
}

    <cc1:ToolkitScriptManager runat="server"></cc1:ToolkitScriptManager>
	<asp:panel id="Panel_Msg" style="display:none;" runat="server">
		<asp:Literal id="L_Msg" runat="server"/>
		<br /><br />
        <div style="text-align:center;">
		    <asp:Button id="OKButton" OnClick="closePopupMsg" runat="server" Text="OK"/>
        </div>
	</asp:panel>

                    L_Msg.Text = "Please enter user abbreviation.";

                    ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "call", "$(function () {openPopup0();});", true);

Open in new window

I then re-deploy the project but I still cannot show the Popup, right after data input.

Karen

what do you mean, right after data input? it shows after you click the save button

Peter Chan

ASKER

Did you get the message, after clicking Save button, using Chrome or Firefox? I get no Popup when clicking Save button, using IE 11.

Karen

yes, it works in IE 10, Firefox, Safari and Chrome
Are you sure you have reloaded the javascript file - press F5 to do a full refresh on the page