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
这个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
构建手风琴的HTML / PHP
<?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.
基本上我需要去识别所创建的每个手风琴,如果它有一个手风琴在scrren上按下它的链接,手风琴将从屏幕上的HTML中删除。
1 个解决方案
#1
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.
回调函数具有与ajax调用不同的上下文。您的回调中无法访问您的变量ID和网址。您可以让它们通过ajax调用以在回调中使用它,但响应应该是JSON而不是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
).
此外,你有$(“a.navlink”)(它将评估第一个a.navlink)而不是$(this)在一些地方(如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();
}
});
}
});
#1
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.
回调函数具有与ajax调用不同的上下文。您的回调中无法访问您的变量ID和网址。您可以让它们通过ajax调用以在回调中使用它,但响应应该是JSON而不是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
).
此外,你有$(“a.navlink”)(它将评估第一个a.navlink)而不是$(this)在一些地方(如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();
}
});
}
});