Load Bootstrap nav nav-tabs via GET URL

Question

I have set up Bootstraps nav-tabs via an index page. Each tab loads a seperate PHP file via AJAX:

<div class="container">
    <ul class="nav nav-tabs" id="indextabs">
        <li><a href="notes.php" data-target="#notes" data-toggle="tabchange">NOTES</a></li>
        <li><a href="whois.php" data-target="#whois" data-toggle="tabchange">WHOIS</a></li>
        <li><a href="dig.php" data-target="#dig" data-toggle="tabchange">DIG</a></li>
        <li><a href="ets.php" data-target="#ets" data-toggle="tabchange">ETS</a></li>
        <li><a href="resources.php" data-target="#resources" data-toggle="tabchange">RESOURCES</a></li>
    </ul>
</div>

JavaScript that takes care of the AJAX queries:

window.onload = function() {
$('[data-toggle="tabchange"]').click(function(e) {
var $this = $(this),
    loadurl = $this.attr('href'),
    targ = $this.attr('data-target');

$.get(loadurl, function(data) {
    $(targ).html(data);
});

$this.tab('show');
return false;
});
}

This itself works fine. In some of the tabs, however, there is an input that requires a domain name which then needs to be submitted via a GET request so that the URL can be something like:

http://domain.com/?domain=google.com&record=mx

With this in mind, I have two problems:

How do I load a particular tab using a GET method URL?
How do I submit form data via AJAX using the GET method and have it change the URL AND load the content in the tab-panel divs?

for your first question, you might be after a cross-domain Ajax request: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain, and the second part form serialization is probably what you're looking for http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — jyrkim, Dec 25 '14 at 14:13
@jyrkim Not sure if CORS fits my first problem seeing as all scripts are sitting on the same server. Form serialization for the second problem may be the ticket. — id0827502, Dec 25 '14 at 14:33
okay, sorry for thinking that it was a Cross-Domain issue. How about accessing the url or the domain name using JavaScript: window.location.href or window.location.hostname More info: http://www.w3schools.com/js/js_window_location.asp — jyrkim, Dec 25 '14 at 14:42
@jyrkim Not sure how that would tie into it. Sorry for my ignorance. I'd love an example if you had one. — id0827502, Dec 25 '14 at 15:27

score 0 · Answer 1 · edited May 23 '17 at 12:12

Please consider the following more like a comment because I'm uncertain what's optimal (and also works) in your case. Anyway I think you need to pass query parameters in your $get method call, either in form of a object, key value pairs { domain: 'google.com', record: 'mx'} or as string. Below an object/key value pairs are used.

window.onload = function() {
$('[data-toggle="tabchange"]').click(function(e) {

var $this = $(this),
  loadurl = $this.attr('href'),
  targ = $this.attr('data-target');

//optional method call below, uncomment if needed
//loadurl = getDomainURL() + "/" + loadurl


  $.get(loadurl, {
     domain: 'google.com',
     record: 'mx'
    }, 
    function(data) {
    $(targ).html(data);
  });

  $this.tab('show');
  return false;
 });
}


//returns domain name: www.example.com in form of http://example.com
// or domain name: http://example.com is returned as it is, unchanged http://example.com
function getDomainURL() {

  var index = window.location.hostname.indexOf("www.");

  if (index === 0)
    return "http://" + window.location.hostname.substr((index + 4));
  else
    return "http://" + window.location.hostname;

}

Load Bootstrap nav nav-tabs via GET URL

1 Answers1