Bootstrap Modal changing the Link

Question

On my web application, there is a picture of a person. When you click on it, it opens a Modal (I use Bootstrap for this) and show information about that person. Important here is that the URL changed!

Example:

you open the picture and the URL is:

domain.com/persons#name=FirstnameLastname&referrer=website

this is when a normal person click the picture, but I need also a URL like this: domain.com/persons#name=FirstnameLastname&referrer=email

this URL shows more information from the person, that the other URL doesn't show.

My Code:

 {{#each employees}} <div class="pb40 col-md-3 col-lg-3 col-xs-6 col-sm-6 visible-lg visible-sm visible-md"> <a href="#name={{firstname}}{{lastname}}&referrer=website" data-toggle="modal"> <img src="/aboutus/employee/{{_id}}/teaser_image" class="img-responsive img-circle" /> </a> </div> <!-- information --> {{/each}} 

and call the modal with this:

 {{#each employees}} {{!--Modal--}} <div id="name={{firstname}}{{lastname}}&referrer=website" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Information ... --> </div> </div> {{/each}} 

When I run it, and click on a picture (The picture comes from the database), they only change the URL, but don't open the Modal with the URL

Any ideas for what's going wrong?

Answer 1

You forgot to call the target id, try if it works, just add data-traget:

 <a href="#name={{firstname}}{{lastname}}&referrer=website" data-toggle="modal" data-target="#name={{firstname}}{{lastname}}&referrer=website"> <img src="/aboutus/employee/{{_id}}/teaser_image" class="img-responsive img-circle" /> </a> 

Answer 2

You forget to use data-target

{{#each employees}}
      <div class="pb40 col-md-3 col-lg-3 col-xs-6 col-sm-6 visible-lg visible-sm visible-md">
        <a href="#" data-toggle="modal" data-target="name={{firstname}}{{lastname}}&referrer=website">
          <img src="/aboutus/employee/{{_id}}/teaser_image" class="img-responsive img-circle" />
        </a>
      </div>
{{/each}}

Answer 3

When i do this what you say, it means:

 {{#each employees}} <div class="pb40 col-md-3 col-lg-3 col-xs-6 col-sm-6 visible-lg visible-sm visible-md"> <a href="#name={{firstname}}{{lastname}}&referrer=website" data-toggle="modal" data-target="#name={{firstname}}{{lastname}}&referrer=website"> <img src="/aboutus/employee/{{_id}}/teaser_image" class="img-responsive img-circle"/> </a> </div> {{/each}} 

and this is the call:

 <div id="name={{firstname}}{{lastname}}&referrer=website" class="modal fade" role="dialog"> <div class="modal-dialog"> {{!--Modal content--}} 

nothing change. but when i do this:

 {{#each employees}} <div class="pb40 col-md-3 col-lg-3 col-xs-6 col-sm-6 visible-lg visible-sm visible-md"> <a href="#name={{firstname}}{{lastname}}&referrer=website" data-toggle="modal" data-target="#{{firstname}}{{lastname}}" onclick="window.location.hash = 'name={{firstname}}{{lastname}}&referrer=website';"> <img src="/aboutus/employee/{{_id}}/teaser_image" class="img-responsive img-circle"/> </a> </div> {{/each}} 

call it with this:

 <div id="name={{firstname}}{{lastname}}" class="modal fade" role="dialog"> <div class="modal-dialog"> {{!--Modal content--}} 

then they open the Modal, and change the URL. I dont know whats the problem here is, but it sucks so much. Now It works but not really right.

I believe i become now problems, when i want to change the Content of the modals when it is referrer=website and referrer=email

i dont know how can i do this, because i use URL.js from Websanova and can read every thing of the URL, but here it is differcult, because they open this modal, what i give him in the data-target. do i think i need, two modals, with different ID one with {{firstname}}{{lastname}}email and one with {{firstname}}{{lastname}}website.

but how can i say now, hay change the data-target when it is website and when it is email.

I really hope that you can understand, what i want, because this job makes me crazy ... thank you for help