How to integrate a hashtag link into a webpage and load a modal based on that hash tag?

Question

for a careers page, I have used bootstrap modal to that loads content(job descriptions) dynamically from remote html files. Now i want to integrate a hastag link into the page, so that when i give someone a link to a specific jd, lets say to www.example.com/careers/#javascriptdeveloper, it should open the careers page and open up javascript developer specific modal without the user clicking on any link on the page. How do i do that ?

this is my html and css..have used javascript to clear the cache every time a link is clicked and the modal loads the content.

    <div class="modal slide fade right" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg pull-right" style="margin:0 ;padding:0 !important">
    <div class="modal-content">

    </div>
  </div>
</div>





<div class="col-xs-12 col-sm-12">
              <!-- Tab panes -->
              <div class="tab-content col-xs-12 col-sm-12">

                <div role="tabpanel" class="tab-pane active" id="technology" >

                    <div class="col-xs-12 col-sm-12 careers_jobdesc"> 
                        <a href="/careers/tech/javascriptappdeveloper/" class="list-group-item" data-toggle="modal" data-target="#myModal" data-direction="right">
                                <h4 class="list-group-item-heading">Javascript App Developer
                                    <br>
                                    <small>Number of positions : 2</small><br>
                                    <small>Location</small>
                                </h4>                                    
                        </a>   
                    </div>
                    <div class="col-xs-12 col-sm-12 careers_jobdesc"> 
                        <a href="/careers/tech/datascientist/" class="list-group-item" data-toggle="modal" data-target="#myModal" data-direction="right">
                                <h4 class="list-group-item-heading">Data Scientist
                                    <br><small>Number of positions : 1</small><br>
                                    <small>Location</small>
                                        </h4>                                    
                        </a>   
                    </div>
</div>
</div>
</div>





<!------css --------------->

.modal.fade:not(.in).right .modal-dialog {
    -webkit-transform: translate3d(125%, 0, 0);
    transform: translate3d(125%, 0, 0);
}
.modal-content{
    min-height:700px !important;
    border-radius: 0;}
}

score 1 · Answer 1 · answered Jan 19 '15 at 06:37

1

I suggest to read location.hash variable during the bootstrap, then use switch (or other method) to determine which modal to show and show the modal.

It could be something like:

// ...
var hash = window.location.hash.substr(1);
switch(hash){
  case 'javascriptdeveloper':
    $('#myModal').modal('show');
  break;
}

answered Jan 19 '15 at 06:37

Pawel Uchida-Psztyc

3,735
2
20
41

hey.thanks for the answer.The model is showing..but its not loading the content of the relevent link. Its just showing a blank modal..I want the modal to load the content from the remote url that is provided in the a tags within the html..how do i do that ? – Jobin Abraham Jan 19 '15 at 07:53
I see. Answer for this question you'll find here: http://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal Change behavior in my code so it will add 'remote' as an option to modal function. Note that 'remote' option is deprecated and will be removed in v4. It is better (faster, less traffic) if you generate view on client side. – Pawel Uchida-Psztyc Jan 19 '15 at 11:11

score 0 · Answer 2 · answered Feb 24 '15 at 07:15

If you have the trigger button to load the content available in the current page, you can trigger that button if the location hash match:

if (window.location.hash) {
    var hash = window.location.hash.replace('#', "");
    if (hash === 'javascriptdeveloper') {
        $('#the-trigger-button').trigger("click");
    }
}

How to integrate a hashtag link into a webpage and load a modal based on that hash tag?

2 Answers2