Skip to main content

I created this codepen https://codepen.io/nickfs000/pen/bYWEJB to update a current css class with an update css class by means of a toggle. However, when I try setting this up in our skuid environment, nothing happens when I click the button.


No errors show up in the counsel.


Here’s more info, and wondering where I’m going wrong with the syntax or skuid setting?




Skuid page with Button placed in page layout (More Detail).


Simple css syntax created to test in skuid. This css syntax should replace the current css syntax (.nx-cal-event) in skuid as shown in the codepen.:


.nx-cal-event-more { border-radius: 1px!important; }

jQuery syntax for the More Detail button:


$(document).ready(function() { $("button").click(function() { $(".nx-cal-event").toggleClass("nx-cal-event-more"); }); });

In-Line (Snippet) name: moredetailbtn


Button properties Action set as:


Thank you in advance!

ns,


I am not sure how you implemented the snippet. If you used the document.ready option in your script, this may have been the issue.


Here is a page that I think demonstrates what you are looking to do:


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">

    <models/>

    <components>

        <grid uniqueid="sk-3WepiH-206">

            <divisions>

                <division behavior="flex" minwidth="100px" ratio="1">

                    <components>

                        <buttonset uniqueid="sk-3Wf95X-267">

                            <buttons>

                                <button type="multi" label="Toggle" uniqueid="sk-3Wf9Y5-274" icon="sk-icon-magic">

                                    <actions>

                                        <action type="custom" snippet="toggleSnippet"/>

                                    </actions>

                                </button>

                            </buttons>

                        </buttonset>

                    </components>

                </division>

                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">

                    <components>

                        <template multiple="false" uniqueid="sk-3Wes5J-236" allowhtml="true">

                            <contents>  &amp;lt;div class="nx-cal-event"&amp;gt;

    &amp;lt;p class="nx-cal-event"&amp;gt;Testing Toggle Function&amp;lt;/p&amp;gt;

  &amp;lt;/div&amp;gt;</contents>

                        </template>

                    </components>

                </division>

                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">

                    <components/>

                </division>

            </divisions>

            <styles>

                <styleitem type="background" bgtype="none"/>

            </styles>

        </grid>

    </components>

    <resources>

        <labels/>

        <javascript>

            <jsitem location="inlinesnippet" name="toggleSnippet" cachelocation="false">var params = arguments[0],

$ = skuid.$;

    $(".nx-cal-event").toggleClass("nx-cal-event-more");</jsitem>

        </javascript>

        <css>

            <cssitem location="inline" name="newcss" cachelocation="false">body {

                background-color: #000;

                }

                

                .nx-cal-event {

                font-size: 100%;

                color: red;

                font-family: "ABeeZee";

                }

                

                .nx-cal-event-more {

                font-size:150%;

                color: #FFF!important;

                background-color: #039BE5;

                text-align: center;

                box-sizing: border-box;

                padding: 25px;

                border-radius: 2px;

                overflow: hidden;

                }

                

                .format {

                font-size: 80%;

                color: black;

                }

            </cssitem>

        </css>

        <actionsequences/>

    </resources>

    <styles>

        <styleitem type="background" bgtype="none"/>

    </styles>

</skuidpage>

thanks,


Bill

Hi Bill, 

That’s it! You got it to work. I can now go back in and see where I fudged it up on the syntax. 

Thank you so much!

View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings