How to open modal with Javascript?

Question

I am a student learning to code and have just started to learn javascript/jquery. I have created a RoR chess game and am currently working on the promotion move. Basically, once a Pawn piece has reached the opposite end of the board, a modal should open and give the player a selection of pieces to choose from to replace the pawn with. On the front end I have this modal that should automatically be triggered when a pawn meets the necessary conditions. I created a function is_pawn_promotion that should do so, but the modal still does not open on it's own, and now I am unsure what to do next. I am wondering if the is_pawn_promotion function is not being called properly (obviously it is not). I have tried to reorganize the location of the openModal function but to no avail. Any help would be greatly appreciated and hopefully I have provided a clear enough picture of what is going on.

Here is the JS file containing the is_pawn_promotion. I have included the whole file which contains the openModal function I am trying to call in order to open the modal.

$( function() {
  $( ".piece" ).draggable({
    snap: ".piece-square",
    grid: [60, 60],
    containment: ".game-board",
  });


  $( ".piece-square" ).droppable({
    accept: ".piece",
    drop: function( event, ui ) {
      var x = $(event.target).data('x');
      var y = $(event.target).data('y');
      var urlUpdatePath = $('.ui-draggable-dragging').data('url');
      var is_pawn_promotion = function() {
        return $(".piece") === 'Pawn' &&
          (y === 0 || y === 7); 
      };

      var sendAJAXRequest = function(x, y, type) {
        $.ajax({
          type: 'PUT',
          url: urlUpdatePath,
          data: { piece: { x_position: x, y_position: y, piece_type: type} },
          success: function(response) {
            if(response == 'OK') {
              console.log(response);
            } else {
              alert(response);
            }
          }
        });
      };

          if (is_pawn_promotion()) {
            openModal();
            var promoSubmitButton = $(".promo-selection-submit");
            promoSubmitButton.on('click', function() {
              var type = $('.promo-selection.input[selected]').val();
              sendAJAXRequest(x, y, type);
              });
            } else { 
              sendAJAXRequest(x, y);
            }
          }
        });
    });

    var openModal = function() {

      // Change modal-state checkbox to checked
      $("#promo-modal").prop("checked", true);

        if ($("#promo-modal").is(":checked")) {
          $("body").addClass("modal-open");
        } else {
          $("body").removeClass("modal-open");
        }

      $(".modal-fade-screen, .modal-close").on("click", function() {
        $(".modal-state:checked").prop("checked", false).change();
      });

      $(".modal-inner").on("click", function(e) {
        e.stopPropagation();
      });
    };

the modal

<div class="modal">
  <input class="modal-state" id="promo-modal" type="checkbox" />
  <div class="modal-fade-screen">
    <div class="modal-inner">
      <div class="modal-close" for="promo-modal"></div>
        <div class="promo-modal-text">
          <h1>Pawn Promotion!</h1>
          <h1>Make your selection: </h1>
        </div>
        <form action="#" class="pawn-promotion">
          <div class="promo-selection-container">
            <% [Queen, Knight, Bishop, Rook].each do |piece_type| %>
              <div class="promo-selection">
                <label>
                  <%= image_tag(piece_type.new(color: current_color).piece_image) %>
                  <%= piece_type.name %>
                  <input type="radio" name="promo-piece" value="<%= piece_type.name %>">
                </label>
              </div>
            <% end %>  
          </div>
          <br/>
          <div class="promo-selection-submit">
            <input type="submit">
          </div>
        </form>
    </div>
  </div>
</div>

Rüzgar · Accepted Answer · 2017-04-09 19:32:07Z

1

You are calling the function, before you declare it. Try changing its location.

answered Apr 9, 2017 at 19:32

Rüzgar

9979 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Belder Over a year ago

Thanks for your response, but I'm a little confused by this. Are you referring to the openModal function? Can you explain?

Rüzgar Over a year ago

That's correct. The openModal function. Not that i am certain of it, but it makes sense. I think you should give a try.

Belder Over a year ago

Well, that didn't seem to work, but of course it could be that there is another reason it is not opening and it's location still needs to be changed.

Belder · Accepted Answer · 2017-04-20 00:45:56Z

0

I managed to find a solution on my own. The main problem was how I was defining the is_pawn_promotion function. I changed that to the following:

var is_pawn_promotion = function() {
  return ui.draggable.data('pieceType') === 'Pawn' &&
    (y === 0 || y === 7); 
};

I also had to add the data-piece-type property to the actual piece in the view like so:

<div class="piece" data-url="<%= game_piece_path(piece.game, piece)%>" data-piece-type="<%= piece.piece_type %>">
  <%= image_tag(piece.piece_image) %>
</div>

Now the modal opens when a pawn piece is in a position to be promoted.

edited Apr 20, 2017 at 0:45

answered Apr 20, 2017 at 0:32

Belder

8181 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to open modal with Javascript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related