如何管理“相同的jquery ui对话框”从多个按钮打开 [英] How to manage "same jquery ui dialog" opening from multiple buttons

问题描述

我有2个按钮一个将打开对话框，并与其< div> 进行一些更改，将不会打开任何对话框，它只会使一些样式< DIV>

中的变化我将有多个实例 DIV> s 其中包含这两个按钮，这些< DIV> s 将在运行时生成，因此可以有N

我创建了FIDDLE来演示我的代码： http://jsfiddle.net/aasthatuteja/ZtLEq/

现在，对于不是生成对话框，我能够使用jquery通过捕获它的 .closest（'parent div'）进行更改，然后点击这个特定的按钮，

使用生成对话框的按钮生成ISSUE IS：我不知道点击哪个按钮的对话框已经生成，所以在提交我不知道哪个特定的父< div> 应该受到影响。 >

以下是我的代码：

HTML

 < div id =content-1class =content> 
< div class =rx-container> < span title =Acceptclass =Accepted>接受< / span> 
 
< br> 
< br> < span title =Rejectclass =Rejected>拒绝< / span> 
 
< div class =rx-statusMessage> 
< br> 
< br> 
< p class =rx-statusAccepted nodisplay>已接受< / p> 
< p class =rx-statusRejected nodisplay>已拒绝< / p> 
< div class =rejectReasonBox nodisplay>原因：< span>应用的标签不正确< / span> 
 
< / div> 
< / div> 
< / div> 
< / div> 
< div id =content-2class =content> 
< div class =rx-container> < span title =Acceptclass =Accepted>接受< / span> 
 
< br> 
< br> < span title =Rejectclass =Rejected>拒绝< / span> 
 
< div class =rx-statusMessage> 
< br> 
< br> 
< p class =rx-statusAccepted nodisplay>已接受< / p> 
< p class =rx-statusRejected nodisplay>已拒绝< / p> 
< div class =rejectReasonBox nodisplay>原因：< span>应用的标签不正确< / span> 
 
< / div> 
< / div> 
< / div> 
< / div> 
< div id =content-3class =content> 
< div class =rx-container> < span title =Acceptclass =Accepted>接受< / span> 
 
< br> 
< br> < span title =Rejectclass =Rejected>拒绝< / span> 
 
< div class =rx-statusMessage> 
< br> 
< br> 
< p class =rx-statusAccepted nodisplay>已接受< / p> 
< p class =rx-statusRejected nodisplay>已拒绝< / p> 
< div class =rejectReasonBox nodisplay>原因：< span>应用的标签不正确< / span> 
 
< / div> 
< / div> 
< / div> 
< / div> 
< div id =rejectReasontitle =Reason> 
< p>请提供取消会话的原因。< / p> 
< div class =inputRow> 
< textarea id =rejectReasonBoxclass =reasonBox>应用的标签不正确< / textarea> 
< / div> 
< / div> 
  

JQUERY

  $（document）.ready（function（）{
 
 function aceeptMethod（）{
 var $ parent = $（this）.closest '.rx-container'）; 
 
 $（'。rx-statusRejected'，$ parent）.hide（）; 
 $（'。rx-statusAccepted'，$ parent）。 show（）; 
 $（'。rejectReasonBox'，$ parent）.hide（）; 
 $（'。k-tabstrip-items .k-state-default .k-link'，$ parent ）.css（'color'，'＃7ea700'）; 
 $（'。k-tabstrip .k-state-active'，$ parent）.css（'border-color'，'＃7ea700'） ; 
 $（'。k-tabstrip-items .k-state-active，.k-tabstrip .k-content.k-state-active'，$ parent）.css（'background-color' ＃f5f5e9'）; 
 
 
 $（this）.attr（title，Accepted）; 
 $（this）.next（）。attr ，Reject）; 
 
 $（this）.removeClass（'Accepted'）; 
 $（this）.addClass（'disableAccepted'）; 
 $ ）.next（）。removeClass（'disableRejected'）; 
 $（this）.next（）。addClass（'Rejected'）; 
 
 checkIfAccepted（）; 
} 
 
 function rejectMethod（）{
 $（'。k-tabstrip-items .k-state-default .k-link'）。css（'color'， '＃ff0000'）; 
 $（'。k-tabstrip .k-state-active'）。css（'border-color'，'＃ff0000'）; 
 $（'。k-tabstrip-items .k-state-active，＃content-1 .k-tabstrip .k-content.k-state-active'）。css（'background-color'，' ＃f5e9e9'）; 
 $（'。rx-statusRejected'）。show（）; 
 $（。rx-statusAccepted）。hide（）; 
 $（。rejectReasonBox）。show（）; 
 
 $（'。Rejected'）。attr（title，Rejected）; 
 
 
 $（'。Rejected'）。prev（）。attr（title，Accept）; 
 $（'。Rejected'）。addClass（'disableRejected'）; 
 $（'。disableRejected'）。prev（）。addClass（'Accepted'）; 
 $（'。disableRejected'）。prev（）。removeClass（'disableAccepted'）; 
 $（'。disableRejected'）。removeClass（'Rejected'）; 
 checkIfRejected（）; 
} 
 
 
 
 $（＃rejectReason）。对话框（{
 autoOpen：false，
 modal：true，
按钮：{
Submit：function（）{
 $（this）.dialog（close）; 
 rejectMethod（）; 
}，
Cancel：function（）{
 $（this）.dialog（close）; 
} 
} 
} 
 
 
 $（。Accepted）。click（aceeptMethod）; 
 $（。Rejected）。click（function（）{
 $（＃rejectReason）。dialog（open）; 
}）; 
 
 
 function checkIfAccepted（）{
 if（$（。rx-statusAccepted：visible）。length == $（。rx-statusAccepted）。 {
 $（'＃authorizeOrderButton'）。prop（'disabled'，false）; 
 $（'＃authorizeOrderButton'）。removeAttr（disabled）; 
 $（'＃authorizeOrderButton'）。removeClass（greyButton）; 
} 
} 
 
 function checkIfRejected（）{
 if（$（。rx-statusAccepted：visible）。length< = $（。 -statusAccepted）。length）{
 $（'＃authorizeOrderButton'）。attr（disabled，disabled）; 
 $（'＃authorizeOrderButton'）。addClass（greyButton）; 
} 
} 
 
}）; 
  

请建议！

谢谢！

解决方案

根据 charlietfl 11月15日at 23:06 建议我能够解决我的问题：

这里是一个好的开始....你有非常复杂，我只有一些基础工作，正确的拒绝显示 jsfiddle.net/ZtLEq/6 - charlietfl 11月15日23时06分

I have 2 button one will open Dialog box and make some changes with its <div> and the will not open any dialog box, it will just make some styling changes within its <DIV>

I will have multiple instances of the <DIV>s which contains these 2 buttons these <DIV>s will be generating at runtime so there can be "N" number of buttons.

I have created the FIDDLE to give a demo of my code: http://jsfiddle.net/aasthatuteja/ZtLEq/

Now, for the button which "DOES NOT" generate Dialog Box, I am able to make changes using jquery by catching its ".closest ('parent div')" and then on click of this particular button, it make changes for its parent <DIV> only.

BUt the ISSUE IS: with the button which generates Dialog Box, I am not sure on click of which button the dialog box have been generated, so on submit I am not sure which particular parent <Div> should be impacted.

Below is my code:

HTML

<div id="content-1" class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="content-2" class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="content-3" class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="rejectReason" title="Reason">
    <p>Please provide the reason for cancelling the session.</p>
    <div class="inputRow">
        <textarea id="rejectReasonBox" class="reasonBox">Incorrect Label Applied</textarea>
    </div>
</div>

JQUERY

    $(document).ready(function () {

    function aceeptMethod() {
        var $parent = $(this).closest('.rx-container');

        $('.rx-statusRejected', $parent).hide();
        $('.rx-statusAccepted', $parent).show();
        $('.rejectReasonBox', $parent).hide();
        $('.k-tabstrip-items .k-state-default .k-link', $parent).css('color', '#7ea700');
        $('.k-tabstrip .k-state-active', $parent).css('border-color', '#7ea700');
        $('.k-tabstrip-items .k-state-active, .k-tabstrip .k-content.k-state-active', $parent).css('background-color', '#f5f5e9');


        $(this).attr("title", "Accepted");
        $(this).next().attr("title", "Reject");

        $(this).removeClass('Accepted');
        $(this).addClass('disableAccepted');
        $(this).next().removeClass('disableRejected');
        $(this).next().addClass('Rejected');

        checkIfAccepted();
    }

    function rejectMethod() {
        $('.k-tabstrip-items .k-state-default .k-link').css('color', '#ff0000');
        $('.k-tabstrip .k-state-active').css('border-color', '#ff0000');
        $('.k-tabstrip-items .k-state-active,#content-1 .k-tabstrip .k-content.k-state-active').css('background-color', '#f5e9e9');
        $('.rx-statusRejected').show();
        $(".rx-statusAccepted").hide();
        $(".rejectReasonBox").show();

        $('.Rejected').attr("title", "Rejected");


        $('.Rejected').prev().attr("title", "Accept");
        $('.Rejected').addClass('disableRejected');
        $('.disableRejected').prev().addClass('Accepted');
        $('.disableRejected').prev().removeClass('disableAccepted');
        $('.disableRejected').removeClass('Rejected');
        checkIfRejected();
    }



    $("#rejectReason").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Submit": function () {
                $(this).dialog("close");
                rejectMethod();
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });


    $(".Accepted").click(aceeptMethod);
    $(".Rejected").click(function () {
        $("#rejectReason").dialog("open");
    });


    function checkIfAccepted() {
        if ($(".rx-statusAccepted:visible").length == $(".rx-statusAccepted").length) {
            $('#authorizeOrderButton').prop('disabled', false);
            $('#authorizeOrderButton').removeAttr("disabled");
            $('#authorizeOrderButton').removeClass("greyButton");
        }
    }

    function checkIfRejected() {
        if ($(".rx-statusAccepted:visible").length <= $(".rx-statusAccepted").length) {
            $('#authorizeOrderButton').attr("disabled", "disabled");
            $('#authorizeOrderButton').addClass("greyButton");
        }
    }

});

Please suggest!

Let me know if you need some more informatuion or if the situation is not clear.

Thanks!

解决方案

As per "charlietfl Nov 15 at 23:06" suggestion I was able to fix my issue:

"here's a good start....what you have is far far too complicated. I only got some basics working to have proper rejection shown jsfiddle.net/ZtLEq/6 – charlietfl Nov 15 at 23:06"

这篇关于如何管理“相同的jquery ui对话框”从多个按钮打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！