syntax for jQuery css button selector

  • 1
  • Question
  • Updated 12 months ago
  • Answered
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!
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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>  &lt;div class="nx-cal-event"&gt;
    &lt;p class="nx-cal-event"&gt;Testing Toggle Function&lt;/p&gt;
  &lt;/div&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
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
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!