Gus P

where is the link? to this tutorial ?

I get

Uncaught TypeError: $(...).sortable is not a function

yarn add jquery-ui

application.js

require('jquery')
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('owl.carousel')
require('isotope-layout')
require('packs/redactor.min')
require('packs/filemanager.min')
require('packs/imagemanager.min')
require("jquery-ui/ui/widget")
require("jquery-ui/ui/widgets/sortable")

var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');

jQueryBridget( 'isotope', Isotope, $ );


  $(document).on("turbolinks:load", () => {
    $("#document_list").sortable({
      update: function(e, ui) {
        Rails.ajax({
          url:$(this).data('url'),
          type: "PATCH",
          data: $(this).sortable('serialize'),
        });
      }
    });
  })

enviroment.js

 const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery'
  })

)

module.exports = environment

Figured it out

application.js

var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');

jQueryBridget( 'isotope', Isotope, $ );

Sheesh !

This is the link I have here

https://isotope.metafizzy.co/extras.html#webpack

Here is the gist

https://gist.github.com/staycreativedesign/996f029f61d31ffbbfe2a4ad80a08639

I checked to see if isotope was there in the pack_tag its there am I missing something?

how does one go by installing https://github.com/metafizzy/isotope with webpacker?

yarn add isotope-layout

require('isotope-layout')

now I get an error

      .col-md-9
        .entry-content.mb-5
          - @staff.each do |faculty|
            .card-wrapper
              - if faculty.profile.attached?
                = link_to image_tag(url_for(faculty.profile)), '#', class: 'card-img-top'
              .card-text-area
                = link_to "#" do
                  %p.card-text
                    %i
                      = faculty.staff_title
                  %h5.strong
                    = faculty.title

:javascript
  $('.entry-content').isotope({
    // options
    itemSelector: '.card-wrapper',
    layoutMode: 'fitRows',
    percentPosition: true,
    gutter: 10
  });

(index):311 Uncaught TypeError: $(...).isotope is not a function
    at (index):311

Ok here's a follow up to this , so the form gets sent to donations create everything works fine but then I try to redirect the user to thank_you_path and it doesnt but it in the logs it says it does

https://gist.github.com/staycreativedesign/366964b45f3b295b5325d8c7a6c55d6d

What I ended up doing was this

        var formData = new FormData(form)

        Rails.ajax({
          url: "/donations",
          type: "post",
          data: formData,
          success: function(data) {
          },
          error: function(data) {}
        })

I am trying to send all the params from the form into my controller after a promise

my params include :name , :email , :address_line1, :address_city, :address_state, :address_zipcode, :address_country, :custom, :subscription, :cc, :plan

Is there aw ay to send them all at once to the controller? I know my data prop is incorrect any help would be GREATLY appreciated.

  form.addEventListener('submit', function(event) {
  event.preventDefault();
    if ($('#amount').not(':empty')){
      $("#poker_button").attr("disabled", true);
      $("#poker_button").html('We are processing your donation, please wait');
      $("#poker_button").css('background-color', '#28a745');
    }

  stripe
    .createpaymentmethod({
      type: 'card',
      card: cardnumberelement,
      billing_details: {
        name: $('#name').val(),
      },
    })
    .then(function(result) {
      if(result.error) {
        console.log(result.error)
      } else {
        console.log(result.paymentmethod.id)
        console.log("winning")
        $("#cc").val(result.paymentmethod.id)

        rails.ajax({
          url: "/donations",
          type: "post",
          data: { #{ params }  },
          success: function(data) {
            console.log("foo")
          },
          error: function(data) {}
        })
      }
      // handle result.error or result.paymentmethod
    });
  });