I want to open a jQuery UI Dialog from a asp.net page with master page. In a page within master page the code works fine but with master page doesn't work.
The code is:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/privado/master/interior.master" CodeBehind="WebForm3.aspx.vb" Inherits="ProyectoDemo.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headInterior" runat="server">
<link type="text/css" href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link href="Styles/addhunters.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui- 1.8.16.custom.min.js"></script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contenidoInterior" runat="server">
<script type="text/javascript">
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
height: 400,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancelar": function () {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#Boton').click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
<div id="uno">
<h2 class="demoHeaders">Dialog</h2>
<asp:TextBox ID="TextBox1" runat="server" Text="prueba" ></asp:TextBox>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<asp:LinkButton ID="Boton" runat="server">LinkButton</asp:LinkButton>
<asp:Button ID="Button1" runat="server" Text="Button" />
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Dialog text</p>
</div>
</div>
I think the problem is how to refer to "dialog" within placeholder. I tried with several ways but I don't find the solution.
Anybody knows how to solve this issue?
Thank you in advance!
Javier
There are several things that you need to consider:
window["common"] = {
liveDialog: function(btnId) {
$(btnId).live(click,common.showDialog);
return false;
},
showDialog() : function(){
$('#dialog').dialog({
autoOpen: false,
width: 600,
height: 400,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancelar": function () {
$(this).dialog("close");
}
}
});
}
}
public void RegisterDialog(clientBtnId)
{
this.page.ClientScript.RegisterStartupScript(this.Page.GetType(),"__registerDialg","common.liveDialog('"+clientBtnId+"');",true);
}
--edited example --
For example your master page class name is CustomSiteMaster, you can write ((CustomSiteMaster)this.Master).RegisterDialog(button1.ClientID);
-- end of edit --
It will work without problem
Add to LinkButton OnClientClick property as below:
<asp:LinkButton ID="Boton" runat="server"
OnClientClick="$('#dialog').dialog('open'); return false;" >LinkButton</asp:LinkButton>
Also, if you want to select server-side control by id use following selector syntax:
$("#<%= ControlID.ClientID %>")
要在内容占位符中找到任何控件,请确保使用如下语法:
$('#ContentPlaceHolderId_ControlId')
jQuery UI is not being loaded because your src
attribute has a additional space in it:
<script type="text/javascript" src="js/jquery-ui- 1.8.16.custom.min.js"></script>
Just change to:
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
And jQuery UI might load fine and you will stop receiving "the object does not support this property or method"
messages.
I have the solution to the "mistery". The problem is very simple. The references to .js files of jQuery-UI are in Conten1 placeholder, I put this two lines in Conten2 placeholder, this content has a javascript function in order to open the dialog.
The complete and working code is the following:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/privado/master/interior.master" CodeBehind="WebForm3.aspx.vb" Inherits="ProyectoDemo.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headInterior" runat="server">
<link type="text/css" href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link href="Styles/addhunters.css" rel="stylesheet" type="text/css" />
<%--<%@ MasterType VirtualPath="~/privado/master/Interior.master"%>--%>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contenidoInterior" runat="server">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui- 1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('hola');
$('#dialog').dialog({
autoOpen: false,
width: 600,
height: 400,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancelar": function () {
$(this).dialog("close");
}
}
});
$('#MainContent_contenidoInterior_Boton').click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
<div id="uno" >
<h2 class="demoHeaders">Dialog</h2>
<asp:TextBox ID="TextBox1" runat="server" Text="prueba" ></asp:TextBox>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<asp:LinkButton ID="Boton" runat="server">LinkButton</asp:LinkButton>
<asp:Button ID="Button1" runat="server" Text="Button" />
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Dialog text</p>
</div>
</div>
Thank you for your answers.
Javier
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.