Trying to use an ajax get to get a div and its content from another page not working

229
November 21, 2016, at 6:50 PM

I am receiving an error saying: Uncaught SyntaxError: Unexpected token < I was using jquery load, but I need to pass headers, so I can no longer usethat and need to use jquery

my links:

<div class="list-group">
     <a class="list-group-item active" href="<?php echo Config::get('URL'); ?>profile/timeline/<?php echo System::escape($this->user->user_id); ?>"><span><?php echo System::translate("Timelime"); ?></span></a> 
     <a class="list-group-item" href="<?php echo Config::get('URL'); ?>profile/about/<?php echo System::escape($this->user->user_id); ?>"><span><?php echo System::translate("About"); ?></span></a>
     <a class="list-group-item" href=""><span>Images</span></a>
     <a class="list-group-item" href="<?php echo Config::get('URL'); ?>profile/friends/<?php echo System::escape($this->user->user_id); ?>"><span><?php echo System::translate("Friends"); ?></span></a>
</div>

my ajax

$(function() {  
    $('.list-group-item').click(function(e){
        e.preventDefault();
        $.ajax({
           url:$(this).attr('href'),
           type:'GET',
           success: function(data){
                $('.layout-content-container').fadeOut('slow', function(){
                    $('.layout-content-container').html($(data).find('#inner_main_content').html(), function(){
                        $('.layout-content-container').fadeIn('slow');
                    });
                });
           }
        });
    });
});

Have I put the function in the correct place?

$('.layout-content-container').html($(data).find('#inner_main_content').html(), function(){
     $('.layout-content-container').fadeIn('slow');
});

Rendered HTML from the other page

<div class="col-md-12 layout-content-container">
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Overview</strong></div>
        <div class="panel-body"> blah blah blah </div>
Answer 1

inside clicks anonymous function preserve $(this).attr('href') to some var and do because inside ajax this will point to other object.

$(function() {  
$('.list-group-item').click(function(e){
   var ur = $(this).attr('href');
    e.preventDefault();
    $.ajax({
       url:ur,
       type:'GET',
       success: function(data){
            $('.layout-content-container').fadeOut('slow', function(){
                $('.layout-content-  container').html($(data).find('#inner_main_content').html(), function(){
                    $('.layout-content-container').fadeIn('slow');
                });
            });
       }
    });
});

});

READ ALSO
Removed class seems to be still there

Removed class seems to be still there

I have a button that switches classes of a menue using this script:.

245
jQuery/JavaScript collision detection

jQuery/JavaScript collision detection

How to detect if two <div> elements have collided?.

418
Creating a div using jquery with style tag

Creating a div using jquery with style tag

I am trying to create a div element using jquery.

452
Drag And Drop Plugin to Drag HTML Control [closed]

Drag And Drop Plugin to Drag HTML Control [closed]

I need a plugin to make edit on the pages of the site online, [nnn]I need to be able to drag HTML Controls to the page. .

317