Remove element from HTML with jQuery - php

Question

I am building a system where the user builds their own navigation system, the process is when the user visits the site there is a llist of available topics they can select slect a top creates and accordion that holds all that topics content, clicking the topic again should remove the top, currently I have this code, but it does not work, can any one guide me,
The javascript
$("a.navlink").click(function(ev) {
var url = $(this).attr("href")
var id = $(this).attr("id")
ev.preventDefault();
if(!$(this).hasClass('saved')) {
//$("a.navlink").addClass('active')
$.ajax ({
url: url,
type: "POST",
data: "method=add&id="+id,
success: function (html) {
$('#accordion').accordion('destroy');
$("#accordion").append(html);
$('#accordion').accordion({
//active: 0,
header:'h2.'+id,
collapsible:true
});
$("a.navlink").addClass('saved');
}
});
} else if($("a.navlink").hasClass('saved')) {
$.ajax ({
url: url,
type: "POST",
data: "method=delete",
success: function (html) {
$("a.navlink").removeClass('saved');
//$("."+id).remove();
}
});
}
});
The HTML/PHP That builds the accordion
<?php
var_dump($_POST);
if(isset($content)) {
foreach($category_name as $k => $v) {
echo "<h2 class=".$this->input->post('id')."><a href='#'>$v[category_name]</a></h2>";
echo "<div class='$v[category_name]'>";
}
$replace = array(".", "png", "gif", "jpg");
$count = 0;
foreach($content as $k=>$v) {
$count ++;
$image_name = str_replace($replace, "", $v['image_name']);
echo "<a class='contentlink' href='index.php/home/get_content_abstract/$v[content_id]'>";
echo "<img src='/media/uploads/".strtolower($v['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />";
echo "</a>";
}
echo "</div>";
//die(var_dump($content));
}
if(isset($favourites_category)) {
//die(var_dump($favourites));
echo "<h2 class=".$this->input->post('id')."><a href='#'>$favourites_category</a></h2>";
$count = 0;
$replace = array(".", "png", "gif", "jpg");
foreach ($favourites as $row) {
$count ++;
$image_name = str_replace($replace, "", $row['image_name']);
echo "<div class='$favourites_category'>";
echo "<a class='contentlink' href='index.php/home/get_content_abstract/$row[content_id]'>";
echo "<img src='/media/uploads/".strtolower($row['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />";
echo "<a/>";
echo "</div>";
}
}
?>
Basically I need away to identify each accordion that is created and if its link is pressed while it has an accordion on scrren the accordion is deleted from the HTML on screen.

Answer 1

The callback function has a different context than the ajax call. Your variables id and url are not accessible in your callbacks. You can have them passed through the ajax call to use it in the callback, but the response should be JSON instead HTML.
Also, you have $("a.navlink") (which will evaluate to the first a.navlink) instead of $(this) in a few places ( like the else if).
Here's some updated code, but I'm not real clear on what you are trying to do
$("a.navlink").click(function(ev) {
var url = $(this).attr("href")
var id = $(this).attr("id")
ev.preventDefault();
if(!$(this).hasClass('saved')) {
//$("a.navlink").addClass('active')
$.ajax ({
url: url,
type: "POST",
data: {method: 'add', id: id},
dataType: "json",
success: function (response) {
//vars url and id are not accessible here
//so it needs to be returned from the ajax call
$('#accordion').accordion('destroy');
$("#accordion").append(response.html);
$('#accordion').accordion({
//active: 0,
header:'h2',
collapsible:true
});
$("#" + response.id).addClass('saved');
}
});
} else if($(this).hasClass('saved')) {
$.ajax ({
url: url,
type: "POST",
data: {method: 'delete', id: id},
dataType: "json",
success: function (response) {
$("#" + response.id).removeClass('saved');
$("h2." + response.id).remove();
}
});
}
});