Solved

Problem to Popup

Posted on 2016-10-03
37
80 Views
Last Modified: 2016-10-11
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?
0
Comment
Question by:HuaMinChen
  • 17
  • 16
  • 4
37 Comments
 
LVL 7

Expert Comment

by:James Bilous
ID: 41828184
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
 
LVL 9

Expert Comment

by:Karen
ID: 41828991
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41829088
Many thanks to all.

James,
Try adding css that makes the panel "display: none"
How?
0
 
LVL 7

Expert Comment

by:James Bilous
ID: 41829111
<script type="text/css">
#Panel_Msg {
   display: none;
}
<script>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41829166
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
 
LVL 9

Expert Comment

by:Karen
ID: 41829179
try

        #Panel_Msg {
           display: none !important;
        }
0
 
LVL 7

Expert Comment

by:James Bilous
ID: 41829180
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41829219
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
 
LVL 9

Expert Comment

by:Karen
ID: 41829235
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41829246
The current OK button does belong to Panel_Msg, right? It is IE 11.
0
 
LVL 9

Expert Comment

by:Karen
ID: 41829264
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41829287
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
 
LVL 9

Expert Comment

by:Karen
ID: 41829289
yes it is saying that is an invalid doctype.
Try changing it to
<!DOCTYPE html>
and see if the button still shows.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41829321
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41831080
Any other help?
0
 
LVL 9

Expert Comment

by:Karen
ID: 41831117
#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
 
LVL 7

Expert Comment

by:James Bilous
ID: 41831118
I'll check out your updates and get back to you tomorrow, sorry for the delay
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41831152
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 9

Expert Comment

by:Karen
ID: 41831169
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41831243
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
 
LVL 9

Expert Comment

by:Karen
ID: 41832960
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41833188
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
 
LVL 9

Expert Comment

by:Karen
ID: 41836292
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
 
LVL 9

Expert Comment

by:Karen
ID: 41836295
Also check your code to ensure you are not setting Panel_Msg.visible = false anywhere
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41837034
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
 
LVL 9

Assisted Solution

by:Karen
Karen earned 500 total points
ID: 41837782
You need to completely remove the following from your CSS file

#Panel_Msg {
           display: none !important;
        }
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41837818
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
 
LVL 9

Expert Comment

by:Karen
ID: 41837823
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41837835
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
 
LVL 9

Expert Comment

by:Karen
ID: 41837839
I do not know why you think it isn't working. It looks like it is working to me.
0
 
LVL 9

Assisted Solution

by:Karen
Karen earned 500 total points
ID: 41837843
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41837917
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
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41839362
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
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41839395
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
 
LVL 9

Expert Comment

by:Karen
ID: 41839409
what do you mean, right after data input? it shows after you click the save button
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41839427
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
 
LVL 9

Expert Comment

by:Karen
ID: 41839469
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now