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=".12.0.min.js"   ></script>
<script src=".2.1.min.js" ></script>
<script src=".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();
});

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./jquery-1.12.0.min.js"   ></script>
<script src="https://code.jquery./jquery-migrate-1.2.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn./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();
});

• javascript
• jquery
• html
• twitter-bootstrap
• laravel

• also invalid modal initialization, modal gonna get registered multiple time, on every click. Need to initialize at start and toggle on click if required. – vinayakj Commented Jul 17, 2016 at 14:39
• Your html is invalid. <a> can't be child of <ul> and can't have child <li> and you are repeating ID's – charlietfl Commented Jul 17, 2016 at 14:41

3 Answers 3

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

You can do this by modifying your code a little, as suggested by Rob Fonseca in above answer, but here is other solution which might be suited for you.

This is your dropdown manu

@if(Auth::user()==$post->user)
<ul class="dropdown-menu">
     <li><a href="#">Remove</a></li> //Replace with your code 
     <li><a href="#" onclick="editPost({{ $post>id }})">Edit</a></li>
</ul>
@endif

You can use Id what ever you want but make sure it is unique.

And here is Javascript function

function editPost(postId){
  //Here You can do more stuff like make ajax call to load post data...
  $('#editPostModel').modal();
}

You can find working example here : JsFiffle

If you are using Bootstrap 5.0 it seems in the bootstrap.js or in your app.js code the data-dismiss selector has changed to data-bs-dismiss.
So I just had to change data-dismiss="modal" to data-bs-dismiss="modal" and it worked.
Version: Laravel 8