CODEWITHSUNDEEP
phpajaxlaravel
ytsejam
ytsejam

Reputation: 3439

How can I make this AJAX to work?

I am trying to make a small piece of AJAX to work. It alerts me the correct url but I could not get the page to load. This is the ajax.js :

$(document).ready(function() {  
    $('#sidebar-content ul li a').click(function(){ 
     var toLoad = $(this).attr('href');  
    $('#content').load(toLoad);
    return false;
});
});

I use Laravel here is my default.template.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{{$title}}</title>
    <meta name="description" content="Empire - XHTML Template" />
    {{ HTML::style('css/style.css') }}
    {{ HTML::script('js/jquery.min.js') }}
    {{ HTML::script('js/ajax.js') }}

    <!-- PAGE OPENING ANIMATION -->
    <script type="text/javascript">
        jQuery(document).ready(function()
        {jQuery('#page').css({'display':'inline','width':'300px','overflow':'hidden','margin-right':'340px'});
        jQuery('#sidebar').css({'margin-left':'326px'});});
        jQuery(window).load(function() {jQuery('#hp_preloader').delay(800).animate({'opacity':'0'},1400,function()
        {jQuery('#slider-nivo').nivoSlider(
        {controlNav:true,controlNavThumbs:false,keyboardNav:false,pauseOnHover:false,prevText:'',nextText:'',effect:'fade',animSpeed:300,pauseTime:4000});
        jQuery(this).remove();jQuery('#sidebar').delay(800).animate({'margin-left':'0px'},2100);jQuery('#page').delay(800).animate({'margin-right':'0px','width':'666px'},
        2100);});});
    </script> 
    <meta charset="UTF-8">
</head>
    <body>

<!-- SITE WRAPPER -->
<div id="wrapper">
<div id="page">
<div id="content">
{{ $content }}
<!-- SIMPLE HORIZONTAL LINE -->
<div class="hr2"></div>
</div>
<!-- #content ends -->
</div>
    <!-- #page ends -->
<!-- SIDEBAR -->
<div id="sidebar">
        <div id="sidebar-content">

    <!-- MENU -->
   <ul id="menu">
   <li class="current"><a href="<?php echo URL::to_route('articles'); ?>">ANASAYFA</a></li>

   <li><a href="<?php echo URL::to_route('abouts'); ?>">HAKKIMIZDA</a></li>
   <li>HİZMETLERİMİZ
    <ul>
    <li><a href="./blog3.html">Eğitim Hizmetlerimiz</a></li>
    <li><a href="./portfolio-3c.html">Neurofeedback</a></li>
<li><a href="./portfolio-2c.html">Biofeedback</a></li>
    </ul>   
</li>       
</div>
    <!-- #sidebar ends -->
    </div>
    <!-- #wrapper ends -->
</body>
</html>

There is an animation when you enter the page. When I click links , If I click with alert the addresses are shown correct but no content opens and java console shows all the script files loaded again. Can you check it ?

Upvotes: 2

Views: 240

Answers (1)

Jeff
Jeff

Reputation: 12183

It looks like you forgot to prevent the A-tags default behavior, which is redirection. Modify your click event like so:

$('#sidebar-content ul li a').click(function (e) {
    e.preventDefault(); // Prevents link's default behavior.
    var toLoad = $(this).attr('href');
    $('#content').load(toLoad);
    return false;
});

If it is still not working, use console.log() for debugging, like so:

$('#sidebar-content ul li a').click(function (e) {
    e.preventDefault(); // Prevents link's default behavior.
    var toLoad = $(this).attr('href');
    console.log(toLoad); // whats in toLoad?
    console.log($("#content")); // maybe content isnt there?
    $('#content').load(toLoad);
    return false;
});

Upvotes: 1

Related Questions