CODEWITHSUNDEEP
phpjqueryhtmlajax
Aisarangh
Aisarangh

Reputation: 11

Content not getting displayed using load() of jquery ajax

I have the following html/php code. On clicking any of the tabs link the content of the file is not getting loaded in the specific <div> tag.

PHP code :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

  ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
  ul.tabs li { display: inline; }
  ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
  ul.tabs li a:hover { background-color: #f1f0ee; }
  ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
  div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
  div.tabContent.hide { display: none; }

  .tabs a {
            padding:5px 10px;

            background:#D8D8D8;
            color:#fff;
            text-decoration:none;
        }

        .tabs a.active {
            background:#f1f0ee ;
            color:black ;
            font-weight:bold;
        }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>
 <body>
  <ul class='tabs'>
  <li><a href="#desktop" >Desktop</a></li>
  <li><a href="#laptop">Laptop</a></li>
  </ul>

<div class="tabContent" id="desktop">
 </div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>

jQuery code : Through this external jQuery file I want that whenever I click a link the required file gets loaded in the specific <div> tag.

$(document).ready(function() {    
    var hideid = "#laptop";
    var showid = "#desktop";   
    $(hideid).hide();
    $('a[href="' + showid + '"]').addClass("active");
    $('a[href="#laptop').click(function() {
        $(this).addClass('active');
        $('#laptop').show('slow');
        $('#desktop').hide('slow');
        $('a[href="#desktop"]').removeClass("active");
        $("#laptop").load("laptop.html");
    });

    $('a[href="#desktop').click(function() {
        $("#desktop").load("/test.html");
        $(this).addClass('active');
        $('#desktop').show('slow');
        $('#laptop').hide('slow');
        $('a[href="#laptop"]').removeClass("active");
        $("#desktop").load("desktop.html");
    });
});

What is wrong in the code?

Upvotes: 0

Views: 131

Answers (2)

EternalHour
EternalHour

Reputation: 8621

Looks like the issue is with this line,

$("#desktop").load("/test.html");

if test.html is in same directory, try removing the /.

Upvotes: 1

Daniel W.
Daniel W.

Reputation: 32260

$('a[href="#desktop').click(function () {

Quotation mark is wrong.

Upvotes: 3

Related Questions