CODEWITHSUNDEEP
javascripthtmlfunctionjquery
starbucks
starbucks

Reputation: 3016

How can I use a JQuery plugin within another plugin without breaking one of them?

Using the code below I am generating a flip effect using the JQuery Flip plugin. In the "verso" property, I have a select menu with the id #ddlBookletType. That ID is used to trigger another JQuery plugin that creates drop down menus.

The way I have the html (which is in the verso property) it is breaking the dropdown plugin. If I remove the flip function then my dropdown works.

Question:

What can I do to ensure that while still using the flip plugin, I won't break the drop down plugin which is being used inside the flip plugin with the id ddlBookletType?

Code:

<script type="text/javascript">
        function allflip() {
            flip();
            flip2();
        }
        function flip2() {
            $("#fb_flip").on("click", function (e) {
                $(".flip_stuff").flippy({
                    color_target: "transparent",
                    direction: "top",
                    duration: "750",
                    verso: "<select id='ddlBookletType'>" +
                    "<option value='<%=(int)Booklet.BookletTypeEnum.EventOne %>'>" +
                        "<%=Booklet.BookletTypeEnum.EventOne.GetDescription() %></option>" +
                    "<option value='<%=(int)Booklet.BookletTypeEnum.EventTwo %>'>" +
                        "<%=Booklet.BookletTypeEnum.EventTwo.GetDescription()%></option>" +
                    "<option value='<%=(int)Booklet.BookletTypeEnum.EventThree %>'>" +
                        "<%=Booklet.BookletTypeEnum.EventThree.GetDescription()%></option>" +
                    "<option value='<%=(int)Booklet.BookletTypeEnum.EventFour %>'>" +
                        "<%=Booklet.BookletTypeEnum.EventFour.GetDescription()%></option>" +
                    "<option value='<%=(int)Booklet.BookletTypeEnum.EventFive %>'>" +
                        "<%=Booklet.BookletTypeEnum.EventFive.GetDescription()%></option>" +
                "</select>",
                    onFinish: function () {

                        $("#back").on("click", function (e) {
                            $(".flip_stuff").flippyReverse();
                            setTimeout(function () {
                                allflip();
                            }, 1000);
                        });
                    }
                });
                e.preventDefault();
            });
        }
        $(document).ready(function () { flip2(); });
    </script>

    <script type="text/javascript">
        $("#back").on("click", function (e) {
            $(".flip_stuff").flippyReverse();
        });
    </script>

Upvotes: 1

Views: 256

Answers (1)

beautifulcoder
beautifulcoder

Reputation: 11330

Try wrapping your code around a closure as such. Your are likely clobbering the global namespace.

(function () {
  var flip = function () {
    ...
  };
}());

Upvotes: 1

Related Questions