David David - 1 month ago 15
jQuery Question

Go to correct link in bootstrap modal when link is selected from menu

I have a menu like this:

<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Dashboard</a></li>
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Tools</a></li>
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Billing</a></li>


When I open that modal, it looks something like this:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title text-center">My Listings</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 no-padding-xs">
@foreach( Auth::user()->listings as $listing )
<a href="{{ ( Go to the correct link based on the menu selected) }}">
<h1>{{ $listing->name }}</h1>
</a>
@endforeach
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


How can I make it so if a user clicks on the "Tools" link, it will automatically replace or attach the /tools in the href in the modal

So for example if they selected dashboard from the menu, I would want the link to be href="/listing/{{ $listing->slug }}/dashboard" in the modal a href

Answer

it would have to be done all in JS. Add a data-url to each of the anchor tags, and a common class to each one:

<li><a href="" data-url="/dashboard" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Dashboard</a></li>
<li><a href="" data-url="/tools" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Tools</a></li>
<li><a href="" data-url="/billing" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Billing</a></li>

Also you will need to add a common class to the anchor tags in the modal and set up the beginning of the url:

<div class="col-md-12 no-padding-xs">
     @foreach( Auth::user()->listings as $listing )
          <a href="/listing/{{ $listing->slug }}" class="url-on-modal" >
              <h1>{{ $listing->name }}</h1>
          </a>  
     @endforeach
</div>

on your js file, using jquery you would need to listen to the onclick event:

$("a.link-to-modal").on('click', function(e){ // cliking on the menu
    e.preventDefault();
    var _this = $(this);
    var _url  = _this.data('url'); // getting the url from the anchor tag either /dashboard /tools /billing

    $('a.url-on-modal').each(function(i, obj) {
        var original_url = $(this).attr("href"); // getting url
        var new_url      = original_url+_url;    // concatenating both url /listing/slug/dashboard

        $(this).attr("href", new_url); // updating href
    });
});