Jquery/Gridster button affecting all items not single ones

245
January 30, 2017, at 09:37 AM

I'm using the Gridster framework to create a dashboard and each of the dashboard items has a 'delete' and 'pin' button. However the issue I have is that when I click the 'pin' button (which locks a panel in place) it affects all the panels universally and not the individual one. The delete button works fine though and deletes the single panel. I can't add individual ID's or classes because the panels need to be generic. Why would the pin button not work in this instance?

Pin (which locks all panels into place but is only meant to lock the single panel in question):

$(document).on("click", ".gridster .pin-button", function () {
    var pin = $(".gridster ul").gridster().data('gridster');
    if (pin.drag_api.disabled) {
        pin.enable($(this).parent());
    } else {
        pin.disable($(this).parent());
    }
});

Delete button (which deletes the panel in question correctly):

$(document).on("click", ".gridster .delete-button", function () {
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());
});

Example panel:

<div class="gridster row">
    <ul>
        <li class="gs_w" data-row="1" data-col="1" data-sizex="4" data-sizey="3">
            <button class="pin-button"><img src="pin.png"></button>
            <button class="delete-button"><img src="Close.png"></button>
            ... panel content ...
        </li>
    </ul>
</div>  
Answer 1

This is because your selector for pin is:

var pin = $(".gridster ul").gridster().data('gridster');

which might found another .gridster ul and this should be related to the currnet gridster so you might have:

var pin = $(this).parent('.gridster');
Answer 2

So according to https://github.com/dustmoo/gridster.js all I had to do was assign a static class to my main Gridster ie:

<script type="text/javascript">
    var gridster;
    $(function () {
        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            helper: 'clone',
            static_class: 'card_static',
            draggable: {
                items: ".gs_w:not(.card_static)"
            },
            resize: {
                enabled: true
            }
        }).data('gridster');
        });
</script>

And then change my Pin JS to:

$(document).on("click", ".gridster .pin_button", function () {
if ($(this).parent().hasClass("card_static")) {
$(this).parent().removeClass("card_static")
} else{
$(this).parent().addClass("card_static")
}
});
READ ALSO
How to assign a attribute value to a variable? [duplicate]

How to assign a attribute value to a variable? [duplicate]

This question already has an answer here:

255
Jquery validation error without plugin help me with this friends

Jquery validation error without plugin help me with this friends

Id has been verified correctly and also my js is getting called properly error is in this jquery file could someone let me know where i going wrong in this jquery looping validation should i return valid some where some one guide me to know better

286
Auto inputting text to textbox on exterior website after clicking link

Auto inputting text to textbox on exterior website after clicking link

I was wondering if there would be a way to have or implement so that when a link is clicked on my website, it takes you to another website with a textbox and auto inputs a number or string

184