What I want to do, exactly, is this :
<form>
<input type="button" class="btn btn-warning" id="follow" value="Follow">
</form>
<script type="text/javascript">
$('#follow').click(function(){
$.ajax({
url: '/follow'
, type: 'POST'
, cache: false
, data: { user: '<%= username %>' }
, complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
},
});
$('#follow').attr('value', 'Following');
$('#follow').attr('id', 'unfollow');
});
$('#unfollow').click(function(){
$.ajax({
url: '/unfollow'
, type: 'POST'
, cache: false
, data: { user: '<%= username %>' }
, complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
},
});
$('#follow').attr('value', 'Follow');
$('#follow').attr('id', 'follow');
});
</script>
The first post req works perfectly, but the second req not. When I press the button, the value doesn't change and I don't receive the correspondent post req to /unfollow. What's the problem here?
Thanks advance!
Your event bindings happen when the DOM is first loaded. When you change the ID's dynamically, that doesn't cause the bindings to change. You need to delegate with on() for this to work.
$(".btn").on("click", "#follow", function() {...});
$(".btn").on("click", "#unfollow", function() {...});
Another option would be to not change the ID. Use a single handler, and check whether the value is currently "Follow" or "Unfollow", and call the appropriate URL.
$("#follow").click(function () {
if ($(this).val() == "Follow") {
$(this).val("Unfollow");
var url = "/follow";
} else {
$(this).val("Follow");
var url = "/unfollow";
}
$.ajax( {
url: url
, type: 'POST'
, cache: false
, data: { user: '<%= username %>' }
, complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
}
});
});
Barmar is correct, but you also are not referencing your ID's properly.
You're looking for #follow after you've already changed it to #unfollow :)
Here's an example of what you want to do.
$(document).ready( function(){
$("body").on("click", "#follow", function(){
$(this).val("Unfollow");
$(this).attr("id","Unfollow");
});
$("body").on("click", "#Unfollow", function(){
$(this).val("Follow");
$(this).attr("id","follow");
});
});
Changing the id is not a good idea.
You can get the correct effect by keeping the id the same, and testing the value within a single click handler, like this :
$('#follow').on('click', function(){
if(this.value == 'Follow') {
$.ajax({
url: '/follow',
type: 'POST',
cache: false,
data: { user: '<%= username %>' },
complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
}
});
$(this).attr('value', 'Following');
}
else {
$.ajax({
url: '/unfollow',
type: 'POST',
cache: false,
data: { user: '<%= username %>' },
complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
}
});
$(this).attr('value', 'Follow');
}
});
You may be able to simplify down to one $.ajax() block, depending on how similar the success/error/complete functions are.
You might also like to move the statements that change #follow's value inside the success handler. Otherwise the button's value will tell a lie at least for a moment, or for longer if an ajax error occurs.