jQuery的通用code [英] jQuery generic code

查看:82
本文介绍了jQuery的通用code的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

结果
我使用我的应用程序的jQuery模态对话框来处理正常的CRUD操作。在某些情况下,我连开两个堆叠模式对话框。


I am using jQuery modal dialogs in my app to handle normal CRUD operations. In some cases I have even two stacked modal dialogs open.

我已经然后在外部JavaScript文件分别处理显示和CRUD形式提交创建两个通用的功能。

I have then created two generic function in an external javascript file to handle respectively the showing and the submit of CRUD forms.

要显示模式对话框我调用下面的函数

To show modal dialogs I call the following function

function _loadDialog(level, action, id, title, onCloseHandler) {
    var panel = panels[level];
    $(panel).dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $(panel).html('').html(response).dialog('open');
        }
    });
    $(panel).unbind("dialogclose").bind("dialogclose", function(event, ui) {
        if (onCloseHandler != null) {
            onCloseHandler();
        }
    });
}

这个函数接收,其他中,一个级别参数,指示功能如何堆叠对话框,并在那里放置渲染部分的标记从AJAX调用返回回。此功能工作正常。

This function receive, among the others, a level parameter that instruct the function how to stack the dialog and where to place the rendered Partial markup returning back from the ajax call. This function works fine.

里面的AJAX调用返回的局部视图有输入,并在年底下列code

Inside the Partial View returned by the ajax call there are input and at the end the following code

<div style="text-align:right;">
    <input type="submit" id="btnSave" value="Salva" />
</div>

和,对于jQuery的一部分,例如,

and, for the jQuery part, for example,

$("#contactForm").submit(function(event) {
    _submitForm(1, event, "#contactForm", "post", "html", '<%= Url.Content("~/Contact/Save") %>');
});

正如你可以看到提交函数具有以下签名

As you can see the submit function has the following signature

function _submitForm(level, event, formName, atype, adataType, aurl) {
}

和它处理


  • 表单提交到正确的控制器动作

  • 用户反馈(例如行动成功执行)

  • 对话框关闭操作

是必须的级别参数,以解决所有功能,包括关闭对话框,要使用正确的DIV面板。

The level parameter is needed to address all the function, including closing the dialog, to the correct DIV panel used.

我希望能够有时表现出同样的对话框,对话框,有时作为一个子对话框。结果
为了能够做到这一点,我的意思是从逻辑上说因为我用JavaScript并没有那么强的jQuery,我需要以下更改:

I would like to be able to show the same dialog sometimes as a dialog and sometimes as a sub dialog.
To be able to do this, I mean "logically speaking" as I am not so strong with javascript and jQuery, I need the following changes:


  • 修改 _loadDialog 函数保存对话框标记本身中的级别参数

  • 修改 _submitForm 的功能和使用已$ P $从pviously保存正确的级别参数使它在 _loadDialog 功能。

  • Modify the _loadDialog function to save the level parameter inside the dialog markup itself
  • Modify the _submitForm function and make it using the correct level parameter that has been previously saved from the _loadDialog function.

我怎样才能做到这一点?

How can I achieve this?

推荐答案

我有点困惑的是何时何地,但似乎要有点与特定元素的信息关联起来。

I'm a little confused about what is where and when, but it seems that you want to associate a bit of information with a particular element.

要做到这一点,你可以使用jQuery的。数据()方法。它将关联你想要的任何数据与特定元素。

To do this, you can use jQuery's .data() method. It will associate whatever data you want with a particular element.

不知道究竟怎么了应该在你的情况下使用,但这里有一个普通的例子:

Not sure how exactly it should be used in your situation, but here's a generic example:

$('#someSelector').data('level', 3);

现在的ID的元素 someSelector 将数 3 映射到其 级别属性在其相关的数据。

Now the element with the ID someSelector will have the number 3 mapped to its 'level' attribute in its associated data.

所以要找回它,你可以这样做:

So to retrieve it, you would do this:

$('#someSelector').data('level'); // returns 3

在摧毁一个与它相关的数据(这是这样的数据只是一个例子)的元素,你应该确保使用一个.remove() .empty()或其他方法,要么自动或手动删除数据之一。

When destroying an element that has data associated with it (this is just one example of such data), you should be sure to use .remove() or .empty() or one of the other methods that either automatically or manually removes the data.

这篇关于jQuery的通用code的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆