YaSh Chaudhary YaSh Chaudhary - 4 months ago 40
Javascript Question

Bootstrap modal not working in laravel

I want that when i click on the edit post dropdown link , a modal is opened but nothing is happening except refreshing the page.

scripts included in my layout view:

<script src="https://code.jquery.com/jquery-1.12.0.min.js" ></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="src/js/myplace.js"></script>


HTML code:

@if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li id="remove3" role="presentation">Remove This Post </li>
</a>
<a id="remove2" href="">
<li id="remove3" role="presentation">Edit This Post </li>
</a>
</ul>
@endif


my JS file:

$('#remove2').find('li').on('click' , function(){
$('#edit-modal').modal();
});

Answer

Your example does not have the Bootstrap modal HTML, but I'm assuming you have that on the page.

You have several problems going on. First, you have multiple elements with the same ID, which you cannot do. The ID must be unique.

Second, you are using a click action on a link element, probably triggering its default behavior.

Change your HTML to be this

 @if(Auth::user()==$post->user)
   <ul id="remove" class="dropdown-menu" role="menu">
    <a id="remove2" href="{{route('post.delete',['post_id' => $post>id])}}">
       <li  role="presentation">Remove This Post </li>
    </a>
    <a id="remove3" href="">
       <li  role="presentation">Edit This Post </li>
    </a>
   </ul>
   @endif

And your JavaScript to

$('#remove3').on('click' , function(e){
   e.preventDefault();
  $('#edit-modal').modal();
});

You need to prevent the link's default behavior in order for it to be used to open the modal. There is no reason to target the list element as the click event is happening on the link element

Comments