Hello can anyone help me with the following problem?
Here goes...
I have the following in my js file:
$(function () {
$('a.modalDlg2').live("click", function (event) { loadDialog(this, event, '#User Details'); });
}); /* end document.ready() */
function loadDialog(tag, event, target) {
event.preventDefault();
var $loading = $('<img src="../../Content/assets/images/nivo-loader.gif" alt="loading" class="ui-loading-icon">');
var $url = $(tag).attr('href');
var $title = $(tag).attr('title');
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, title: $title
, width: 600
, modal: true
, minHeight: 200
, show: 'fade'
, hide: 'fade'
});
});
$dialog.dialog('open');
};
// this is the code for the buttons
$(function () {
$(".demo buttoninbox").button({
icons: {
primary: "ui-icon-mail-open"
}
});
$(".demo buttonarchive").button({
icons: {
primary: "ui-icon-locked"
}
});
$(".demo buttonall").button({
icons: {
primary: "ui-icon-folder-open"
}
});
$(".demo buttonnew").button({
icons:
{
primary: 'ui-icon-plusthick'
}
});
$(".demo buttonuser").button({
icons:
{
primary: 'ui-icon-plusthick'
}
});
$(".demo buttonfav").button({
icons:
{
primary: 'ui-icon-star'
}
});
});
// this is the submit handler
$("#userLines").submit(
function (event) {
/* Prevent default action submit */
event.preventDefault();
/* Get data from input fields*/
var $form = $(this),
// User
userName = $form.find('input[name="UserName"]').val(),
// Email
email = $form.find('input[name="ReceiptModels.UserEmail"]').val(),
url = $form.attr('action');
/* Post data to server side to be processed */
$.post(url,
{ "UserModel.UserName": userName, "UserModel.UserEmail": email},
function (data) {
$('fieldset#createUser').empty();
//$('fieldset.createUser').append('<fieldset id="addedUser"><legend>User</legend><p>Name:'+userName+'</p><p>Email:'+email+'</p></fieldset>');
submited = 1;
}
);
});
and in my index page, something like bellow, were i have the button that calls the loaddialog, every time it is pressed it enlarges and instead of opening one unique modal dialog it opens the number of times i clicked multiplied by 2, example if pressed it 2 times it opens 4 modal dialog windows and the button sizes grows to 4x its normal size...
And this is the index page...
@model MyProject.Models.UserModels
@{
ViewBag.Title = "Início";
}
<head>
<meta charset="utf-8" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.23.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/indexjava.js")" type="text/javascript"></script>
<style type="text/css">
ul.icons
{
margin: 0;
padding: 0;
}
ul.icons li
{
margin: 2px;
position: relative;
padding: 2px 0;
cursor: pointer;
float: right;
list-style: none;
}
ul.icons span.ui-icon
{
float: left;
margin: 0 4px;
}
.acc-content
{
position: relative;
}
.icon-group
{
top: 0px;
right: 2px;
z-index: 9999;
cursor: pointer;
}
</style>
</head>
<body>
<div class="demo">
<ul style="padding: 10px;">
<h3>
Vault</h3>
<li style="padding: 0 0 5px 0">
<buttoninbox style="width: 150px; text-align: left">@Html.ActionLink("Caixa de Entrada", "Index", new { type = "Index" })</buttoninbox>
</li>
<li style="padding: 0 0 5px 0">
<buttonarchive style="width: 150px; text-align: left">@Html.ActionLink("Arquivo", "Index", new { type = "Archived" })</buttonarchive>
</li>
<li style="padding: 0 0 5px 0">
<buttonall style="width: 150px; text-align: left">@Html.ActionLink("Contas", "Index", new { type = "All" })</buttonall>
</li>
<li style="padding: 0 0 5px 0">
<buttonuser style="width: 150px; text-align: left">@Html.ActionLink("Adicionar novo email", "Create", "EmailAccount", new { @class = "modalDlg", title = "Novo email" })</buttonuser>
</li>
@*<li style="padding: 0 0 5px 0">
<buttonfav style="width: 150px; text-align: left">@Html.ActionLink("Favorite", "Index")</buttonfav>
</li>*@
</ul>
</div>
<body>
