AJAX load in same page causes divs to repeat

Question

I'm performing the ajax call to the same page which works perfectly however it reload existing divs. I was wondering if there was a way to suppress it? Here's more details:

My project setup

index.php - Open records Controller

/**app logic**/

view('open',$data); //require '../views/layout.php';

layout.php

/*all the js scripts and stylesheets loaded here*/

<div id='logo'></div>
<div id='nav'></div>

include($path); //loads the open.view.php file

open.view.php

/*AJAX call to self*/


function getViaAjax(chosenGroup){
    $.post('index.php',{group:chosenGroup},
                function(data)
                {   
                    $("#default").remove();
                    $('#group-tickets').html(data);
                });
}

As you might be able to tell, this causes the #logo and #nav div to duplicate on the page. I understand that I can do a AJAX post to a different file and I will get around the issue altogether but I was wondering if there's a way to do this?

Answer 1

Try this Link. Documentation Explains : The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted.

$('#result').load('ajax/test.html #container');