0

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>

Edited by pritaeas: Moved.

2
Contributors
1
Reply
2
Views
4 Years
Discussion Span
Last Post by AleMonteiro
0

For what I see, you set an live click listener to the class 'modalDlg2' for loading the dialogs, but in nowhere you create a <a> with the class 'modalDlg2'.

Besides that, I can't help you much because your code isn't testable.

If you want help with your JS, I suggest that you post a code with only HTML, CSS and JS, so it can be tested.

Cheers.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.