CODEWITHSUNDEEP
ajaxlaravelmodal-dialoglaravel-blade
Eem Jee
Eem Jee

Reputation: 1309

Can't re open the modal after closing it using ajax

I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.

<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page

<form class="search_form" action="" method="">
@csrf
   <label>
      <input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
      <p>
        <span class="alert"></span>
      </p>
   </label>
  <div class="flex_box">
     <button class="btn pink" type="button" id="save">Apply</button>
  </div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>

And this is my ajax code in closing the url modal.

success: function(store) {
       $(".apply_modal").hide();
       $(".applyfnsh_modal").toggleClass("open");
       $('.alert').html('');
},
error: function() {
        $('.alert').html('Error occured while applying. Please try again.');
}

In my modal.js

//apply pop up
$(".apply_btn").on("click", function(){
    $(".apply_modal").toggleClass("open");
    $("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
    var modal = $(this).parent("div").parent("div");
    modal.toggleClass("open");
    $("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
    if (!$(event.target).closest('.apply_box').length) {
    $(".apply_modal").toggleClass("open");
    $("body").toggleClass("open");
    }
});

So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.

Upvotes: 0

Views: 505

Answers (1)

Michael Miller
Michael Miller

Reputation: 399

Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.

Upvotes: 2

Related Questions