Develop Reference

Issue on getting id from Selected HTML elements from Ajax GET response with jQuery

I am using ajax to display product data and then delete on click a specific on using the product id but am not able to get the product id as it is showing undefine can you guys suggest something.
In this code first I am getting the product details for the cart dropdown menu and then displaying it in list format with delete button through the first ajax and then on clicking delete should delete the element in the second ajax using the elements product id which I have saved inside data-r but on console, it showing undefined can anyone tell me what is the issue. As I know that the elements are created dynamically but I am not getting a solution
function TopCartVal() {
// Used Route inside the ajax
var url = "{{ route('pdt.details', ':id') }}";
var yui = "{{ route('delete_fr.cart', ':id') }}";
// Ajax Structure
$.getJSON( "{{ route('my.cart','json') }}", function( data ) {
console.log(data);
var Cart = $('#cart_dp_sec_pdt_desc');
// Loop for data
$.each(data, function(key , value) {
console.log(value);
url = url.replace(':id', value.product_id);
yui = yui.replace(':id', value.product_id);
Cart.append(`
<div class="row">
<div class="col-xs-4">
<div class="image">
<a href="`+url+`">
<img src="{{ asset('')}}`+value.image+`" alt=""/>
</a>
</div>
</div>
<div class="col-xs-7">
<h3 class="name">
`+value.product_name+`
</h3>
<div class="price">`+value.currency+value.product_price+`</div>
</div>
<div class="col-xs-1 action">
<a href="#"
data-r"`+value.id+`"
class="cart_dp_btn_ctn_delete">
<i class="fa fa-trash"></i>
</a>
</div>
</div>
`);
});
});
}
// delete part
$(document).on('click', '.cart_dp_btn_ctn_delete', function(e){
e.preventDefault();
var id = $(this).attr('data-r'); // id of to be deleted element
var yui = "{{ route('delete_fr.cart', ':id') }}";
yui = yui.replace(':id', id);
console.log(yui);
console.log(id); // it is showing undefined`enter code here`
// $.getJSON( yui, function(data){
// TopCartVal();
// });
});

You are missing an = here:
data-r"`+value.product_id+`"
But using template literals correctly will make it easier to see
`<div class="row">
<div class="col-xs-4">
<div class="image">
<a href="${url">
<img src="{{ asset('')}}${value.image}" alt=""/>
</a>
</div>
</div>
<div class="col-xs-7">
<h3 class="name">
${value.product_name}
</h3>
<div class="price">${value.currency+value.product_price}</div>
</div>
<div class="col-xs-1 action">
<a href="#" data-r="${value.product_id}" class="cart_dp_btn_ctn_delete">
<i class="fa fa-trash"></i>
</a>
</div>
</div>`

Updating module on instant change when list is updated

Sorry for the long post, but I tried explaining things in as much detail as possible.
So as I dive deeper into JavaScript and start learning more and more about AJAX requests and other components, I've stumbled across something that I can't seem to figure out.
So below, I will explain what I'm doing and what I would like to do, and see if someone has some guidance for me.
So here is my Vue.js app:
new Vue({
name: 'o365-edit-modal',
el: '#o365-modal-edit',
data: function() {
return {
list: {},
}
},
created() {
this.fetchApplicationsMenu();
},
methods: {
fetchApplicationsMenu() {
var self = this;
wp.apiRequest( {
path: 'fh/v1/menus/applications',
method: 'GET',
}).then(menu => self.list = menu.data);
},
changed() {
const selected = this.$data.list.selected;
function get_ids(list, field) {
const output = [];
for (let i=0; i < list.length ; ++i)
output.push(list[i][field]);
return output;
}
const result = get_ids(selected, "id");
wp.apiRequest( {
path: 'fh/v1/menus/applications',
method: 'PUT',
data: {
ids: result,
},
}).then((post) => {
return post;
},
(error) => {
console.log(error);
});
},
add(x) {
this.$data.list.selected.push(...this.$data.list.available.splice(x, 1));
this.changed();
},
remove(x) {
this.$data.list.available.push(...this.$data.list.selected.splice(x, 1));
this.changed();
},
},
});
Then here is the HTML portion that I'm using to render the two columns:
<div class="column is-half-desktop is-full-mobile buttons">
<nav class="level is-mobile mb-0">
<div class="level-left">
<div class="level-item is-size-5 has-text-left">Selected</div>
</div>
<div class="level-right">
<div class="level-item">
<i class="fas fa-sort-alpha-up is-clickable"></i>
</div>
</div>
</nav>
<hr class="mt-1 mb-3">
<draggable class="list-group"
v-model="list.selected"
v-bind="dragOptions"
:list="list.selected"
:move="onMove"
#change="changed">
<button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app, index) in list.selected" :key="app.id">
<div class="level-left">
<span class="icon" aria-hidden="true">
<img :src="app.icon_url" />
</span>
<span>{{app.name}}</span>
</div>
<div class="level-right">
<span class="icon has-text-danger is-clickable" #click="remove(index)">
<i class="fas fa-times"></i>
</span>
</div>
</button>
</draggable>
</div>
<div class="column is-half-desktop is-full-mobile buttons">
<div class="is-size-5 has-text-left">Available</div>
<hr class="mt-1 mb-3">
<draggable class="list-group"
v-model="list.available"
v-bind="dragOptions"
:list="list.available"
:move="onMove">
<button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app, index) in list.available" :key="app.id">
<div class="level-left">
<span class="icon" aria-hidden="true">
<img :src="app.icon_url" />
</span>
<span>{{app.name}}</span>
</div>
<div class="level-right">
<span class="icon has-text-primary is-clickable" #click="add(index)">
<i class="fas fa-plus"></i>
</span>
</div>
</button>
</draggable>
</div>
That outputs the following items, and all works great. See the video display below of each component working as needed. This all works great! I'm calling the changed() method on add and remove which grabs all the IDs and stores them in the DB via an endpoint.
The Problem:
Now I have the following dropdown menu, which depends on the fh/v1/menus/applications endpoint to pull in all the items as shown below:
As you can see below, when I open the dropdown, it has three apps, when I open the cog wheel and remove one of the apps and it saves it but the dropdown doesn't get automatically updated, I have to refresh the page and then I will see the updates.
Does anyone know how to fetch the new items without a refresh?
Here is the HTML and the JS for the dropdown piece:
HTML: As you can see in there, I have data-source="applications" which pulls in the items inside the init_menu as shown in the JS.
<div class="dropdown-menu" id="dropdown-o365" role="menu">
<div class="dropdown-content">
<div class="container is-fluid px-4 pb-4">
<?php if ($application = Applications::init()): ?>
<div class="columns">
<div class="dropdown-item column is-full has-text-centered is-size-6">
<div class="level is-mobile">
<div class="level-left">
<?= $application->get_name() ?>
</div>
<div class="level-right">
<a class="navbar-item modal-element icon" id="o365-apps-cogwheel" data-target="o365-modal-edit" aria-haspopup="true">
<i class="fa fa-cog"></i>
</a>
</div>
</div>
</div>
</div>
<div class="columns is-multiline" data-source="applications"></div>
<?php else: ?>
<div class="columns">
<div class="column is-full">
No applications present.
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
Then here is the JavaScript. I initilize the method inside DOMContentLoaded using init_menu('applications');:
function init_menu(paths)
{
paths.forEach(path => {
const target = document.querySelector('[data-source=' + path + ']');
if (target) {
wp.api.loadPromise.done(function () {
const Menus = wp.api.models.Post.extend({
url: wpApiSettings.root + 'fh/v1/menus/' + path,
});
const menus = new Menus();
menus.fetch().then(posts => {
// This returns the data object.
const data = posts.data;
let post_list;
// Check if it's an array and see if selected is empty otherwise show available.
if (Array.isArray(data.selected) && data.selected.length !== 0) {
post_list = data.selected;
} else {
post_list = data.available;
}
post_list.forEach(function (post) {
switch(path) {
case 'applications':
target.appendChild(create_apps_dom_tree(post));
break;
default:
console.log('Path route is invalid.');
break;
}
})
})
})
}
});
}
function create_apps_dom_tree(post) {
const {
icon_url,
url,
name,
} = post
const container = document.createElement('div');
container.className = 'column is-one-third is-flex py-0';
const anchor = document.createElement('a');
anchor.href = url;
anchor.className = 'dropdown-item px-2 is-flex is-align-items-center';
const figure = document.createElement('figure');
figure.className = 'image is-32x32 is-flex';
const img = document.createElement('img');
img.src = icon_url;
const span = document.createElement('span');
span.className = 'pl-2';
span.textContent = name;
figure.appendChild(img);
anchor.append(figure, span);
container.appendChild(anchor);
return container;
}
If anyone has some guidance or an answer on how to pull in live data from the database on the fly, that would be amazing.
Basically, I need my data-source: to automatically grab the items when my vue/db request is sent so I don't have to refresh the page.
Inside my Vue app, I have the following method:
fetchApplicationsMenu() {
var self = this;
wp.apiRequest( {
path: 'fh/v1/menus/applications',
method: 'GET',
}).then(menu => self.list = menu.data);
},
which calls a GET request and then stores the data inside the return { list: {} }.

A quick fix might be to just invoke init_menu() from the component's beforeDestroy() hook, called when the dialog closes. You might choose to do it from changed() instead if the dropdown is still accessible with this dialog open.
new Vue({
// option 1:
beforeDestroy() {
init_menu('applications');
},
// option 2:
methods: {
changed() {
init_menu('applications');
}
}
})
Alternative: You already know what the final application list is in changed(), so you could update the dropdown with the new list from that method.
function update_menu(path, post_list) {
const target = document.querySelector('[data-source=' + path + ']');
// remove all existing children
Array.from(target.childNodes).forEach(x => x.remove());
post_list.forEach(post => target.appendChild(create_apps_dom_tree(post)))
}
new Vue({
methods: {
changed() {
update_menu('applications', this.$data.available);
}
}
})

Viima JQuery Comments - GetUsers(Pinged users) displaying incorrectly in partialview

References
jquery comments
The jquery comments documentation
this issue in github
Attachments
comments-data.js is test data : Download here
jquery-comments.js creates the whole comments system: Download here
jquery-comments.min.js if you require it: Download here
Description
I have a view with a list of "articles" with a "read more" button on each "article" in the list. When I click on the read more button a modal opens up with a partial view with the jquery comments in it. However, when I search for the pinged users (using the # sign), the list of users don't show by the textarea, but instead higher up in the modal (far from the textarea).
Below is an image, then below that is my code. You will see at the bottom of the image I have put the '#' sign and the list of users is displayed on the top, it should be by the textarea. It also seems that when I click on the articles lower in the list, the higher the list of users display when I push the '#' sign:
MVC View
Below is the part populating the "Articles" from where the Modal is being called from:
#{
int iGroupNameId = 0;
int iTotalArticles = 0;
foreach (var groupItems in Model.ArticleGroups)
{
iTotalArticles = Model.ArticlesList.Where(x => x.fkiGroupNameId == groupItems.pkiKnowledgeSharingCenterGroupsId).Count();
if (iTotalArticles > 0)
{
<div style="background: linear-gradient(#B5012E, darkred); margin: 10px; padding: 10px; font-weight: bold; color: white; text-transform: uppercase;">#groupItems.GroupName</div><div class="container" style="width:100%">
#if (groupItems.pkiKnowledgeSharingCenterGroupsId != iGroupNameId)
{
foreach (var item in Model.ArticlesList.Where(x => x.fkiGroupNameId == groupItems.pkiKnowledgeSharingCenterGroupsId))
{
<div class="row">
<div class="col-md-4">
#if (User.IsInRole("Administrator"))
{
<div class="pull-right">
<div class="btn-group">
<button class="btn dropdown-toggle btn-xs btn-info" data-toggle="dropdown">
<i class="fa fa-gear"></i> <i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li>
Edit
</li>
<li class="divider"></li>
<li>
Delete
</li>
</ul>
</div>
</div>
}
<img src="#item.ArticleImage" class="img-responsive" alt="img" style="width:350px;height:200px">
<ul class="list-inline padding-10">
<li>
<i class="fa fa-calendar"></i>
#item.DateTimeStamp.ToLongDateString()
</li>
<li>
<i class="fa fa-comments"></i>
#item.ArticleComments
</li>
<li>
<i class="fa fa-eye"></i>
#item.ArticleViews
</li>
</ul>
</div>
<div class="col-md-8 padding-left-0">
<h6 class="margin-top-0"> <span style="font-size:large">#item.Title</span><br><small class="font-xs"><i>Published by #item.User_FullName</i></small></h6>
<p>
#Html.Raw(item.Description)
</p>
#*<a class="btn btn-danger" href="#Url.Action("ShowArticleDetails", "ILearn", new { id = item.KnowledgeSharingArticlesId })">Read more</a>*#
<button type="button" onclick="showArticle('#item.KnowledgeSharingArticlesId')" class="btn btn-danger" data-target="#show-details-modal" data-toggle="modal">
Read more
</button>
</div>
</div>
<hr>
}
}
</div>
}
}
}
Modal
This is placed at the top of the page(Under the #model appname.ViewModels.VM):
<!--Loading Panel-->
<div id="loadingPanel" style="display: none;">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 100%">...LOADING...</div>
</div>
</div>
<!-- Show details modal-->
<div id="show-details-modal" class="modal fade" style="width:100%">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
<div id="loadingPanelShowDetails" class="col-md-12 text-center" style="display: none;">
<br />
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 100%">...LOADING...</div>
</div>
</div>
<div id="target-show-details">
</div>
</div>
</div>
</div>
</div>
Jquery Code
function showArticle(id) {
$("#target-show-details").html('');
$('#loadingPanelShowDetails').show();
$.ajax({
type: 'get',
url: '#Url.Action("ShowArticleDetails", "ILearn")',
contentType: 'application/json; charset=utf-8',
dataType: 'html',
data: { "id": id },
success: function (result) {
$("#target-show-details").html(result);
$('#loadingPanelShowDetails').hide();
var saveComment = function (data) {
$(data.pings).each(function (index, id) {
var user = usersArray.filter(function (user) { return user.id == id })[0];
alert(user.fullname);
data.content = data.content.replace('##' + id, '##' + user.fullname);
});
return data;
}
$('#articlecomments-container').comments({
profilePictureURL: 'https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png',
currentUserId: 1,
roundProfilePictures: true,
textareaRows: 1,
enableAttachments: true,
enableHashtags: true,
enablePinging: true,
getUsers: function (success, error) {
$.ajax({
type: 'get',
traditional: true,
url: '#Url.Action("GetPinnedUsers", "ILearn")',
success: function (usersArray) {
success(usersArray)
},
error: error
});
},
getComments: function (success, error) {
$.ajax({
type: 'get',
traditional: true,
data: { "id": id },
url: '#Url.Action("GetArticleComments", "ILearn")',
success: function (commentsArray) {
success(saveComment(commentsArray))
},
error: error
});
},
postComment: function (data, success, error) {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("PostArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function (comment) {
success(comment);
},
error: error
});
},
putComment: function (data, success, error) {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("PutArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function (comment) {
success(comment);
},
error: error
});
},
deleteComment: function (data, success, error) {
$.SmartMessageBox({
title: "Deleting Comment?",
content: "Are you sure that you want to delete this comment?",
buttons: '[No][Yes]'
}, function (ButtonPressed) {
if (ButtonPressed === "Yes") {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("DeleteArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function (data) {
if (data.status === "usersuccess") {
$.smallBox({
title: "<strong>Comment Deleted</strong>",
content: "<i class='fa fa-clock-o'></i> <i>Comment was successfully deleted! <strong</strong></i>",
color: "#659265",
iconSmall: "fa fa-check fa-2x fadeInRight animated",
timeout: 4000
});
success();
} else {
success();
}
}
});
}
if (ButtonPressed === "No") {
$.smallBox({
title: "<strong>Comment not deleted</strong>",
content: "<i class='fa fa-clock-o'></i> <i>This comment has not been deleted.</i>",
color: "#C46A69",
iconSmall: "fa fa-times fa-2x fadeInRight animated",
timeout: 4000
});
}
});
e.preventDefault();
},
upvoteComment: function (data, success, error) {
if (data.user_has_upvoted) {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("UpVoteArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function () {
success(data)
},
error: error
});
} else {
$.ajax({
type: 'post',
url: '#Url.Action("DeleteArticleCommentUpvote", "ILearn")',
data: { "commentId": data.id },
success: function () {
success(commentJSON)
},
error: error
});
}
},
uploadAttachments: function (commentArray, success, error) {
var responses = 0;
var successfulUploads = [];
var serverResponded = function () {
responses++;
// Check if all requests have finished
if (responses == commentArray.length) {
// Case: all failed
if (successfulUploads.length == 0) {
error();
// Case: some succeeded
} else {
success(successfulUploads)
}
}
}
$(commentArray).each(function (index, commentJSON) {
// Create form data
var formData = new FormData();
$(Object.keys(commentJSON)).each(function (index, key) {
var value = commentJSON[key];
if (value) formData.append(key, value);
});
formData.append('fkiKnowledgeSharingArticlesId', id);
$.ajax({
url: '#Url.Action("UploadToArticleComments", "ILearn")',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (commentJSON) {
successfulUploads.push(commentJSON);
serverResponded();
},
error: function (data) {
serverResponded();
},
});
});
}
});
},
error: function (xhr, textStatus, errorThrown) {
alert(xhr.responseText);
}
});
}
MVC Partial View
#model Innovation_Cafe.Models.KnowledgeSharingArticles
<div class="col-lg-12">
<div class="margin-top-10">
<div style="text-align:center;border:solid;border-style:solid">
<img src="#Model.ArticleImage" class="img-responsive" alt="img" style="width:100%;">
</div>
<ul class="list-inline padding-10">
<li>
<i class="fa fa-calendar"></i>
#Model.DateTimeStamp.ToLongDateString()
</li>
<li>
<i class="fa fa-comments"></i>
#Model.ArticleComments
</li>
<li>
<i class="fa fa-eye"></i>
#Model.ArticleViews
</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<h6 class="margin-top-0"> #Model.Title<br><small class="font-xs"><i>Published by #Model.User_FullName</i></small></h6>
<br />
<p>
#Html.Raw(Model.Description)
</p>
<p>
#if (Model.FileType == ".mp4")
{
<div style="text-align:center;border-style:solid">
<video controls width="100%">
<source src="#Model.FilePath" type="video/mp4" />
</video>
</div>
}
else
{
if (Model.FilePath !=null)
{
<p>Click here to view file: Click here</p>
}
}
</div>
<div class="col-md-12">
<p> </p>
<hr style="border:solid" />
</div>
<div class="row col-md-12">
<div class="col-md-12" id="articlecomments-container">
</div>
</div>
At the bottom of the partial view is this div where it is populated:
<div class="row col-md-12">
<div class="col-md-12" id="articlecomments-container">
</div>
</div>
EDIT
After spending quite some time running through the jquery-comments.js file, I found that displaying of the pinged users its happening here:
// CUSTOM CODE
// ========================================================================================================================================================================================
// Adjust vertical position
var top = parseInt(this.$el.css('top')) + self.options.scrollContainer.scrollTop();
this.$el.css('top', top);
This seems to be taking the css('top') of View, which causes the problem on the pinging of the users on the partialview.

The issue takes place rather because of your wrong bootstrap layout: you have to include all col into row, whereas in your example you use raw and col-md-12 for the same container.
After I included columns into row elements correctly everything started working the right way. In other words, just write the last section this way:
<div class="row">
<div class="col-md-12" id="articlecomments-container">
</div>
</div>
Please, take a look at an example of nesting in Bootstrap 4.
UPDATE
I've managed to reproduce the mistake thanks to your tip to draw numerous articles on the page. The issue is indeed because of scrolling, though the reason seems to be deeper in jquery.textcomplete.js in a function _fitToBottom (it takes into account the main window scroll but not of the embeded modal container). However, a faster approach I use instead of rectifying that elaborate peice of logic is exactly at the spot which you pointed to (instead of the last 2 rows you showed):
var topPoint = self.options.scrollContainer[0].offsetTop;
var scrolledWindow = self.options.scrollContainer.parents().filter(function () {
return this.scrollTop > 0;
})[0];
var spaceAvailable = $(window).height() - (topPoint - scrolledWindow.scrollTop);
var elHeight = this.$el.height();
this.$el.css('top', spaceAvailable > elHeight ? topPoint: topPoint - elHeight);
The logic is based on looking for the closest parent with scroll and then it measures whether the rest of the space is enough to render the dropdown to figure out its final position. It might slightly miss the pointer, but still works fine in spite of scrolling. I've tried it out in Chrome and Firefox. Hopefully, it will lead you to your own approach.

Ajax Function not collecting data from URL

I am using this ajax function to call a html page but it showing the following error:
OPTIONS file:///D:/My%20Web%20Sites/bbbb/flair/demos/url
net::ERR_FILE_NOT_FOUND
singlePageCallback: function (url, element) {
var t = this;
$.ajax({
url: 'url',
type: 'GET',
dataType: 'html',
timeout: 5000
})
.done(function (result) {
t.updateSinglePage(result);
})
.fail(function () {
t.updateSinglePage("Error! Please refresh the page!");
});
}
});
<li class="cbp-item graphic">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
<img src="img/gallery/thumb/1.jpg" alt="" />
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="ajax/project1.html"
class="cbp-singlePage cbp-l-caption-buttonLeft">
<i class="fa fa-link"></i>
</a>
<a href="img/gallery/1big.jpg"
class="cbp-lightbox cbp-l-caption-buttonRight"
data-title="Project Title">
<i class="fa fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
</li>

Cannot debug jQuery button

I have this button, and when clicked, it sends an ajax call which changes the value of score_up.
I dont see what the problem is. I tried firbug, but apparently it's not even detecting the javascript? :)) Thanks.
jquery:
$('.stats').delegate('.support', 'click', function(e) {
//stop event
e.preventDefault();
//get the id
var the_id = $(this).closest('.score').attr('id').split('_').pop();
//the main ajax request
$.ajax({
context:this,
type: "POST",
data: "action=support&id=" + the_id,
url: "ajax/sa.php",
success: function (msg) {
$(this).siblings("h2.score_up").html(msg).fadeIn();
//remove down button
// and remove support button
}
});
});
html:
<ul class="stats">
<li id="support_23"class="score">
<h2 class="score_up">12</h2>
<span style="text-align:center;">Supporters</span>
</li>
<li>
<button type="submit" value="Actions" class="support" title="support">
<i></i>
<span>Support</span>
</button>
</li>
//vote down button
<li id="down_23"class="score">
<h2 class="score_down">12</h2>
<span style="text-align:center;">down</span>
</li>
<li>
<button type="submit" value="Actions" class="down" title="down">
<i></i>
<span>down</span>
</button>
</li>
</ul>

It is not valid HTML for a <button> to be a direct child of a <ul>.
Children of <ul> should be <li>. I wouldn't expect things to work properly with invalid HTML.
HTML with <button> inside a <li>:
<ul class="stats">
<li id="topic_23" class="score">
<h2 class="score_up">12</h2>
<span style="text-align:center;">Supporters</span>
</li>
<li>
<button type="submit" value="Actions" class="support" title="support">
<i></i>
<span>Support</span>
</button>
</li>
</ul>
jQuery, fixing some of the traversal methods:
$('.stats').delegate('.support', 'click', function(e) {
//stop event
e.preventDefault();
// cache a reference to the previous <li> element
// since it is used more than once
var $prevLi = $(this).closest('li').prev('li');
//get the id
var the_id = $prevLi.attr('id').split('_').pop();
//the main ajax request
$.ajax({
context:this,
type: "POST",
data: "action=support&id=" + the_id,
url: "ajax/sa.php",
success: function (msg) {
$prevLi.find("h2.score_up").html(msg).fadeIn();
}
});
});

Your HTML is invalid, so I would do:
<form action="javascript:alert('form')";>
<ul class="stats">
<li id="topic_23"class="score">
<h2 class="score_up">12</h2>
<span style="text-align:center;">Supporters</span>
</li>
<li>
<button type="submit" value="Actions" class="support" title="support">
<i></i><span>Support</span></button>
</li>
</ul>
</form>
And then the jQuery (which in your original would not work, since you wanted .siblings() and not .closest() would now be:
var the_id = $(this).closest("li").siblings('.score').attr('id')
.split('_').pop();
and success:
$(this).closest("li").siblings("li.score").find("h2.score_up")
.html(msg).fadeIn();
I think you also run into troubles with prevent default, since you want to prevent default on the form, and in that case you might run into problems with delegate.
Here is what I would do with .live():
// Prevent form from submitting
$("form").live("submit", function(e) {
e.preventDefault(); });
// Run Ajax
$('button.support').live('click', function(e) {
//get the id
var $score = $(this).closest("li").siblings('.score'),
the_id = $score.attr('id').split('_').pop();
//the main ajax request
$.ajax({
context:this,
type: "POST",
data: "action=support&id=" + the_id,
url: "ajax/sa.php",
success: function (msg) {
$score.find("h2.score_up").html(msg).fadeIn();
}
});
});
​
Try it out on this jsFiddle