I have multiple buttons to toggle status of different projects:
<div class="btn-group btn-toggle project_status" data-project-id="1" data-form="project_status" data-value="1">
<button class="btn btn-default active">ACTIVE</button>
<button class="btn btn-primary">CLOSED</button>
</div>
<div class="btn-group btn-toggle project_status" data-project-id="2" data-form="project_status" data-value="1">
<button class="btn btn-default active">ACTIVE</button>
<button class="btn btn-primary">CLOSED</button>
</div>
I need to toggle the data-value between 1 and 2 when ajax post success.
I have tried this so far but without any luck:
$('.project_status').click(function(){
var project_id = $(this).attr('data-project-id');
var project_status_val = $(this).attr('data-value');
var toggle_status = function(){
$(this).find('.btn').toggleClass('active').toggleClass('btn-primary');
if (project_status_val == '1'){
alert(project_status_val);
$(this).attr('data-value','2');
} else {
alert(project_status_val);
$(this).attr('data-value','1');
}
return false;
};
var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: toggle_status
});
$('#sidebar-wrapper').load('sidebar.php');
return false;
});
I have got the alert data value correct. I have got the sidebar reload with updated value (only the first click). But I am not able to change the attribute value so that the next click will send the toggled value.
Please help! Thx
$(this) inside the toggle_status method is not your btn. Inside the method the this keyword refers to the object the method belongs to. In this case Window. As a workaround, I have made a self property before the method to store a reference to the selected $('.project_status') object. I have updated the code so it will work.
https://jsfiddle.net/05akxvx3/1/
$('.project_status').click(function(){
var self = $(this);
var project_id = self.attr('data-project-id');
var project_status_val = self.attr('data-value');
var toggle_status = function(){
self.find('.btn').toggleClass('active').toggleClass('btn-primary');
if (project_status_val == '1'){
self.attr('data-value','2');
} else {
self.attr('data-value','1');
}
alert(self.attr('data-value'));
return false;
};
var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: toggle_status
});
$('#sidebar-wrapper').load('sidebar.php');
return false;
});
You have an extra dash in your $(this).attr() statement.
$(this).attr('data--value','2'); ought to be:
$(this).attr('data-value','2');
Related
How to toggle popover of the same element? im using ajax so im using this to refer to its specific identity, when ajax success it will toggle its own popover i took this code from w3schools and use it in mine.
HTML
<input type = "text" id = "input_name" class="form-control" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
jQuery
$(document).on('keyup', '#input_name', function(){
var myname = $(this).val();
if(myname != ''){
$.ajax({
url:"sample.php",
method: "POST",
data:{myname:myname},
dataType:"text",
success:function(data){
$("[data-toggle='popover']").popover();
}
});
}
I want to call its own popover.
https://jsfiddle.net/ws5zojyc/3/
see above link it might help you
$(function() {
$("#input_name").popover({
content: "Enter a text here"
});
});
$("#input_name").keyup(function(event) {
var myname = $(this).val();
// alert(myname);
if (myname != '') {
$.ajax({
url: "/echo/js/?js=" + myname,
method: "POST",
data: {
myname: myname
},
dataType: "text",
success: function(data) {
$('#input_name').data('bs.popover').tip().find(".popover-content").html(data)
}
});
}
});
you can use effect like hover , click etc.
I have the following code and I want to access id from the ajax function in the footer of the modal, is there anyway I can do it, i tried creating my own namespace or setting a variable outside the function
document.getElementById('editinputtext').style.height="200px";
document.getElementById('editinputtext').style.width="850px";
$.ajax({
type: "GET",
url : '/Proto/PHP/connect.php',
datatype : 'json',
success : function(data){
var obj = jQuery.parseJSON(data);
$(".contributions").click(function(){
var id = this.id // I need to save this var for later use!
document.getElementById("editinputtext").value =obj[id];
});
}
});
</script>
</div>
<div class="modal-footer">
<button id="EDITcancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="EDITsave" type="button" class="btn btn-default" data-dismiss="modal">Save</button>
<script>
$( "#EDITsave" ).click(function() {
var a = id //I want to access the above id var here!!!
$.ajax({
type: "POST",
datatype: "text",
url: "/Proto/PHP/edit.php",
data: {contribution_id: a+1, content: document.getElementById("editinputtext").value, storyID:1},
});
window.location.reload(false);
});
</script>
You need to declare your var id in the outer-most scope to have it accessible in the later click-handler function:
var id;
$.ajax({
type: "GET",
url : '/Proto/PHP/connect.php',
datatype : 'json',
success : function(data){
var obj = jQuery.parseJSON(data);
$(".contributions").click(function(){
id = this.id //same var id as declared above
//etc...
<script>
$( "#EDITsave" ).click(function() {
var a = id //same var id as declared above
this _id var declaration should work for you:
// declare an upper variable
// to make it available for child scopes
var _id = null;
$.ajax({
...
success: function(data) {
var obj = jQuery.parseJSON(data);
$(".contributions").click(function() {
_id = this.id // save this var for later use!
document.getElementById("editinputtext").value = obj[_id];
});
}
});
$("#EDITsave").click(function() {
var a = _id // access the above id var here!!!
...
});
I have two complementary functions, one that publishes a post, and one that unpublishes a post when the user clicks the same button (the button is acting as a toggle). If the post is not published and the user goes to publish it everything works as it is supposed to, however if the user decides to unpublish it again the function to publish is erroneously called again. I am using class selectors to accomplish this. So publish does its business and then sets the class to unpublish so that when the user clicks the button unpublish gets called (which doesn't happen).
I have verified that publish gets the class unpublish after being called, and vise versa but the complementary function never gets called despite having its class changed in the final lines. Console.log shows that publish keeps getting called.
What am I doing wrong?
$('a.publish').on('click', function(e) {
console.log('publish item');
var id = $(this).attr('data-id');
var table = $(this).attr('rel');
var parent = $(this).closest('.btn-group');
var current = $(this).closest('a');
$.ajax({
type: 'POST',
url: '',
data: 'publish=' + id + '&table=' + table,
success: function(data) {
$('#published_' + id).hide().html(data).fadeIn();
count(table);
var buttons = parent.find(".btn-danger");
buttons.each(function() {
$(this).removeClass("btn-danger").addClass("btn-primary");
});
current.find('span').text('Unpublish');
current.removeClass("publish").addClass("unpublish");
}
});
e.preventDefault();
});
$('a.unpublish').on('click', function(e) {
console.log('unpublish item');
var id = $(this).attr('data-id');
var table = $(this).attr('rel');
var parent = $(this).closest('.btn-group');
var current = $(this).closest('a');
$.ajax({
type: 'POST',
url: '',
data: 'unpublish=' + id + '&table=' + table,
success: function(data) {
$('#published_' + id).hide().html(data).fadeIn();
count(table);
var buttons = parent.find(".btn-primary");
buttons.each(function() {
$(this).removeClass("btn-primary").addClass("btn-danger");
});
current.find('span').text('Publish');
current.removeClass("unpublish").addClass("publish");
}
});
e.preventDefault();
});
If this has to do with DOM or something, how can I subvert it?
HTML:
<a class="btn btn-sm btn-primary unpublish" href="javascript:void(0);" data-id="213114246" rel="projects">
<i class="glyphicon glyphicon-plus"></i>
<span class="actions">Unpublish</span>
</a>
$('.btn-container').on('click', '.btn', function(e) {
if ($(this).hasClass('publish')) {
console.log('publish item');
$(this).removeClass("publish").addClass("unpublish").text('unpublish');
} else {
console.log('unpublish item');
$(this).removeClass("unpublish").addClass("publish").text('publish');
}
e.preventDefault();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-container">
<a class="btn btn-sm btn-primary unpublish">unpublish</a>
</div>
i have a button with the folowing code
<button type="button" class="btn btn-success btn-xs vote up" id="76" name="up"><span class="glyphicon glyphicon-thumbs-up"></span> Bueno</button>
the button does not work unless i reload the page, and i dont know why. any ideas?
jquery code is at the beginning of the body
jquery
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var _this = this;
if(name=='up')
{
$(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
$( _this ).remove();
$( ".escondido" ).css( "display", "block" );
} });
return false;
});
});
</script>
If the jQuery code is at the beginning of the code (before the HTML) as you state, the DOM would not have been created yet. Try moving the jQuery code to the bottom of the body (after the HTML).
I would assume you're getting an error in the button click event. Have you tried using the live('click') instead? Can you demonstrate the issue using JSFIDDLE?
In the jsFiddle I created, I'm seeing syntax errors - Original Code
If I change the code to Edited jsFiddle:
$(function () {
$(".vote").click(function () {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id=' + id;
var parent = $(this);
var _this = this;
if (name == 'up') {
$(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function (html) {
parent.html(html);
$(_this).remove();
$(".escondido").css("display", "block");
}
});
return false;
}; // Removed ) from this line
});
}); // Added this whole line
I've edited this question from the original OP to better represent my issue.
How can I pass the variable data-uid with AJAX ?
Right now the variable doesnt get passed.
var uid = $(this).data("uid"); doesn't work = undefined
var uid = '199'; gets passed. works.
is it possible to have something like : var uid = $uid; ?
HTML
<form>
<fieldset>
<textarea id="post_form" type="text" data-uid="<?php echo $uid ?>"/></textarea>
<button type="submit" id="add" value="Update" name="submit" />OK</button>
</fieldset>
</form>
JS
$(function() {
$("#add").click(function() {
var boxval = $("#post_form").val();
var uid = $(this).data("uid"); // this needs to be changed
var dataString = 'post_form=' + boxval + '&uid=' + uid;
if (boxval == '') {
return false;
} else {
$.ajax({
type: "POST",
$.ajax({
type: "POST",
url: "add.php",
data: dataString,
cache: false,
success: function(html) {
parent.html(html);
}
});
return false;
});
});
problem in your code in:
var uid = $(this).data("uid");
you're trying to wrap this into jquery object, but it is button object in this context, then you're trying to obtain something unassigned from it
you shoud use:
var uid = $('#post_form').attr('data-uid');
or, you can add <input type="hidden" name=... value=... and get id from it, this is more general way
Looks like your issue is with the data attribute that should be data-uid="somevalue" Like.
Check this fiddle to see if this solves your main problem