We Keep Coding

Bootstrap how to directly link to an anchor tag within a specific tab

I'm using a bootstrap v3 and want to make a link to an anchor tag within a specific tab. I found a way to link to a specific tab like this way:
http://www.example.com/faq.html#tab2
Below is the code I used to get this work.
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
However, I want to jump to an anchor tag within this tab, so I made a link like below but it won't work.
faq.html#tab2#topic2-3
I believe 2 hashtag is making a problem? Is there a way to make a direct link to the anchor tag in a specific tab? Maybe like this way?
faq.html?tab=2#topic2-3
Thank you for the help.

In order to use anchors, the fact that you are using bootstrap doesn't matter. You need to properly give the name to the anchor/title that you want to use. In order to do that you can do
<a name="tab2">Title Text</a>
Now, when you go to
/myPage.html#tab2
you will get to where you want. Read here for more info: http://help.typepad.com/anchor-tags.html
Before you reach the anchor, if you want to go to a specific tab, you should find it by using a get request, which is as you stated, this way you aren't trying to find two anchors, which doesn't make sense to the browser.

How to send all clicked links to a page before going to the URL in the link

Question: How would I set up a page so that all links when clicked go to a page called query_data.cfm where a database query is triggered and once complete send the user to the url of the original link?
As of right now I am adding a class to all links on my page using javascript.
<script>
$(document).ready( function() {
$('a').addClass("tracker");
});
</script>
But what I also want to do is make it so all links with that class for example <a class="tracker" href="www.mywebsite.com/page2.cfm">Page 2</a> go to a page named www.mywebsite.com/query_data.cfm where a query is ran passing the value of href to a database and once complete redirect the user to www.mywebsite.com/page2.cfm
I hope this is enough information but if I missed anything please let me know.

One method is to simply change the links like:
<a class="tracker" href="www.mywebsite.com/query_data.cfm?destination=page2.cfm">Page 2</a>
Then all links will go to query_data.cfm which will record the #URL.destination# information and then CFLOCATION them on to #URL.destination#.

Edit: Oh, you are the same person, my bad. Reading malfunction.
I suggest that you try this: http://jsfiddle.net/xcr56gd1/.
Since you're using jquery to add to the links, you can hopefully see how you can use jquery to change the href to `/r.cfm?d= + $(this).attr('href'), properly encoding as a url.
$(document).ready(function () {
$("a").not(".norm").on("click", function(e) {
alert($(this).attr('href'));
// The alert just demonstrates that it's working and how to get href.
// You can call your ajax here.
e.preventDefault();
});
});
With this code, you can use the jquery on all links without the class "norm", so if you especially wanted a link not to track, this is how you would do it.

Targeting links with jquery mobile

This is pretty much an add on to a question I posted before about loading an external page without ajax, but keeping it an iOS web app window. What I came up with for that example was this
<script>
$(document).bind('pageinit', function() {
$("#test").click(function (event) {
event.preventDefault();
window.location.assign("test.html");
});
});
</script>
But now what I want to do is to set this up for every link I would have on that page. Seeing as I don't know how many links I could have, it would be very tedious to do this every time I add a new link. So I found this snippet and thought I could combined the two some how, I just need some direction on how.
$('a').each(function(index){
var elementId=$(this). attr("id");
elementId='#'=elementId;
So for each a tag or href on my page, it will automatically grab the link and load it in that particular manner automatically.

Of course you can combine your codes. Anyway I haven't tried your code but you have to wrap an .each() function around your click events. Also you should give every clickable link a the same class. Should look like this:
$('.class').each(function(){
$(this).click(function(){
event.preventDefault();
window.location.assign("test.html");
})
});
if you now want those links to link on different pages you can define a data-href attribute on each link. like this: data-href="test2.html" in your html.
You can now use
$(this).data("href");
and put the output into a variable. Afterwards you can place it in your window.location.assign thing dynamically.
Hope I understood your problem and it helped.

Javascript: history not loading page

I have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu's <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.
But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.
This is the javascript located in the mypage.html header.
<script type="text/javascript">
$(document).ready(function() {
// replace menu link click
$(".right-menu a").live('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
window.location.href = $(this).attr('href');
$("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
return false;
});
// If page loads, load the content area according to the hash.
var hrtag = window.location.hash.substring(1);
if(hrtag=="")
hrtag='about';
$("#content-right").load('mypage'+hrtag+'.html');
window.location.hash = hrtag;
});
</script>
This is the menu
<ul class="right-menu">
<li>About</li>
<li>Screens</li>
<li>License</li>
<li>Download</li>
<li>Donate</li>
</ul>
If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html
If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html
In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.
If i click the menu in the following order; license, about, screens and then click the browser's back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!
The URLs are obviously in the history, but they don't load.
Any clue to what might be wrong here?
// Thanks
EDIT - The solution
Thanks to Andres Gallo's article I came up with this solution:
<script type="text/javascript">
$(document).ready(function() {
// Make sure the page always load #about
LoadIDWithURL('#content-right','myPageAbout.html');
window.addEventListener('hashchange',function() {
if (window.location.hash != "") {
// We have a hash, use it!
LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
} else {
// We do not have a hash, force page reload!
window.history.go(0);
}
});
});
// Load the targetID with the URL loadURL.
function LoadIDWithURL(targetID,loadURL) {
$(targetID).load(loadURL);
}
</script>

I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.
Furthermore my article also explains how you can pass parameters in your links to have javascript do special things
Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.

This is normal behaviour when navigating between pages which differ only in their hash. You have two options:
Use the hashchange event, or an emulation of it, to detect when the user changes the hash by navigation back or forward and update the page appropriately
Use the HTML5 history API.

you can try with hashchange
$(function(){
$(window).hashchange(function(){
// some event
})
})

Loading an external .htm file into a div with javascript

So I got this code
Javascript:
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
})
})
</script>
html:
Link
it works perfectly in firefox, but nothing happens when I click the link in chrome and IE simply opens a new window with the file. any advice?

I am not a coder of any sort, and I know there is more than one way to make this work.
This is what worked for me for MY situation.
I had a working site but with A LOT of code / DIV content all in one page and I wanted to clean that up.
I hope this Helps someone else!
I have been searching for this solution for quite some time and I have run across many examples of how it can work in different instances.
My scenario was as follows:
I have a photography website that uses a series of DIV tags containing the various "pages" so to speak of the site.
These were all set as:
<div id="DivId" style="display:none"></div>
The following script in the head of the page:
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
and called using the anchor links like this:
HOME
Where name was the name of the DIV to be called.
Please note the DIV will be called inside the parent container DIV.
Lastly and most importantly for this particular question and scenario, the DIV were all placed on the page as shown above.
Each div content was created just as if it were within the DIV tags but minus the opening and closing DIV tags and then saved as a separate .txt file, and called by placing this is the head of the parent page:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
and
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$("#DivName") // selecting "div" (you can also select the element by its id or class like in css )
.load("PathToFile.txt");// load in the file specified
$("#AnotherDiv").load("AnotherFile.txt");// Additional DIV can be added to populate DIVs on th eparent page.
});

Change the link to href="#" or "javascript:void(0);return false;"
<a class='ajax' href='#'>...</a>
The loading logic is all in your ajax call. But, you have also a link which points to the file, too.
So, it seems that some browsers give different priorities on how the click is handled.
Anyway, links that do something other than changing page (f.ex. executing js) shouldn't have an explicit HREF attribute other than something that "does nothing" (like above)

I believe the problem is that the script loads before the document is loaded.
try this:
$(document).ready(function (){
$('.ajax').click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
});
});
I am not sure, but i can not see any other problem.