CODEWITHSUNDEEP
phpjquerylaravelmodal-dialogbootstrap-modal
David
David

Reputation: 1997

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

Upvotes: 1

Views: 599

Answers (1)

Carlos
Carlos

Reputation: 1331

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
    });
});

Upvotes: 1

Related Questions