[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 191
  • Last Modified:

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?
1
HuaMinChen
Asked:
HuaMinChen
  • 17
  • 16
  • 4
3 Solutions
 
James BilousSoftware EngineerCommented:
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".
0
 
KarenAnalyst programmerCommented:
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
0
 
HuaMinChenSystem managerAuthor Commented:
Many thanks to all.

James,
Try adding css that makes the panel "display: none"
How?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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

Open in new window

0
 
HuaMinChenSystem managerAuthor Commented:
I put this

        #Panel_Msg {
           display: none;
        }

to css file but I still get button shown on top of the page like
8e.png8e.png
0
 
KarenAnalyst programmerCommented:
try

        #Panel_Msg {
           display: none !important;
        }
0
 
James BilousSoftware EngineerCommented:
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.
0
 
HuaMinChenSystem managerAuthor Commented:
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.
0
 
KarenAnalyst programmerCommented:
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?
0
 
HuaMinChenSystem managerAuthor Commented:
The current OK button does belong to Panel_Msg, right? It is IE 11.
0
 
KarenAnalyst programmerCommented:
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.
0
 
HuaMinChenSystem managerAuthor Commented:
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

0
 
KarenAnalyst programmerCommented:
yes it is saying that is an invalid doctype.
Try changing it to
<!DOCTYPE html>
and see if the button still shows.
0
 
HuaMinChenSystem managerAuthor Commented:
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


to
<!DOCTYPE html>

Open in new window


I still see OK button on IE.
0
 
HuaMinChenSystem managerAuthor Commented:
Any other help?
0
 
KarenAnalyst programmerCommented:
#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");
1
 
James BilousSoftware EngineerCommented:
I'll check out your updates and get back to you tomorrow, sorry for the delay
0
 
HuaMinChenSystem managerAuthor Commented:
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.
0
 
KarenAnalyst programmerCommented:
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

0
 
HuaMinChenSystem managerAuthor Commented:
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

0
 
KarenAnalyst programmerCommented:
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

0
 
HuaMinChenSystem managerAuthor Commented:
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.
0
 
KarenAnalyst programmerCommented:
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?
0
 
KarenAnalyst programmerCommented:
Also check your code to ensure you are not setting Panel_Msg.visible = false anywhere
0
 
HuaMinChenSystem managerAuthor Commented:
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!
0
 
KarenAnalyst programmerCommented:
You need to completely remove the following from your CSS file

#Panel_Msg {
           display: none !important;
        }
0
 
HuaMinChenSystem managerAuthor Commented:
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.
0
 
KarenAnalyst programmerCommented:
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.
0
 
HuaMinChenSystem managerAuthor Commented:
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!
0
 
KarenAnalyst programmerCommented:
I do not know why you think it isn't working. It looks like it is working to me.
0
 
KarenAnalyst programmerCommented:
try changing your initialisation to 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

0
 
HuaMinChenSystem managerAuthor Commented:
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.
0
 
KarenAnalyst programmerCommented:
The change is not in
http://my-friend.co/Own_rec3/Javascript1.js
so are you sure you tried it?

try adding the style def to the panel so it always loads with it hidden until you change it, i.e.:

<asp:panel id="Panel_Msg" style="display: none" runat="server">

Open in new window

and in the code-behind remove where you set it, i.e.:

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

Open in new window

0
 
HuaMinChenSystem managerAuthor Commented:
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.
0
 
KarenAnalyst programmerCommented:
what do you mean, right after data input? it shows after you click the save button
0
 
HuaMinChenSystem managerAuthor Commented:
Did you get the message, after clicking Save button, using Chrome or Firefox? I get no Popup when clicking Save button, using IE 11.
0
 
KarenAnalyst programmerCommented:
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
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 17
  • 16
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now