We Keep Coding

Toggle attribute and css data [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I am trying to make a follow button - and when clicked it sends an ajax request to my backend script and if it executes it returns a value that triggers the button's text to go from "follow" to "following" - and that part works just fine. But the jquery part where I send the user data in a data-attribute "data-follow" won't toggle with "data-unfollow". It only works when you refresh the browser which means you can only click the follow button, see it and the data attribute to change to "unfollow" but if you click once more it does not work. I cant figure it out and i've done my searching at the stack.
ERROR
TypeError: $(...).attr(...) is undefined
HTML
<button id="follow" data-follow="1, username1, username2">
<div><img src="images/loggedin/follow.png"></div>
<div>Follow</div>
</button>
JQuery
$("button[data-follow]").click(function(){
var button = $(this);
var data = $(this).attr("data-follow").split(",");
alert(data);
button.find(" > div:last-child").animate({opacity: "0"},200, function(){
$(this).animate({opacity: "1"},200);
$(this).html("Following");
var dataValue = $(this).closest("#follow").attr("data-follow");
$(this).closest("#follow").attr("data-unfollow", dataValue);
$(this).closest("#follow").removeAttr("data-follow");
});
});
$("button[data-unfollow]").click(function(){
var button = $(this);
var data = $(this).attr("data-unfollow").split(",");
alert(data)
button.find(" > div:last-child").animate({opacity: "0"},200, function(){
$(this).animate({opacity: "1"},200);
$(this).html("Follow");
var dataValue = $(this).closest("#follow").attr("data-unfollow");
$(this).closest("#follow").attr("data-follow", dataValue);
$(this).closest("#follow").removeAttr("data-unfollow");
});
});

$(document).on('click', 'button[data-follow]', function() {...});
$(document).on('click', 'button[data-unfollow]', function() {...});
Try it this way.

More Generic answer!
You can simply change the state of a button by removing, adding and toggling css classes via jQuery.
At (document.ready) check if follwing or unfollowed state via your ajax request and change the button's css class.
if(following){
$("#buttonID").toggleClass('following_btn');
} else{
$("#buttonID").toggleClass('unfollowing_btn');
}
Once clicked, process your code in the web service. Follow if unfollowed or Unfollow if followed. Then if you're rturning the updated state use that to re-update your button's css class accordingly. Or perform ajax call to verify the new state after the button click's ajax call finishes.
CSS:
.following_btn{
//your following style
}
.unfollowing_btn{
//your un-following style
}
Hope it helps!

How to hide the anchor tag element rapidly on the onclick event using jQuery?

I've two hyperlinks. I'm hiding the one hyperlink on the click of other hyperlink and vice-versa. It's working absolutely fine for me on my local machine. But the issue arises when I upload and run the same functionality from the online server.
On server, the concerned hyperlink is not hiding that much quicker as compared to local machine instance. Due to which user can click again on a hyperlink which he has already clicked and the link is expected to be hidden. It takes moment or two for hiding the concerned hyperlink. I don't want that delay. The hyperlink should get hide immediately after on click event. I tried disable/enable the hyperlink but it didn't work out for me.
My code is as below:
<script language="javascript" type="text/javascript">
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").off('click').on('click',function(event) {
event.preventDefault();
$.get(action_url1, function(data) {
//$("#fix_"+qid).bind('click', false);
$("#fix_"+qid).hide();//This portion of code I want to make fast, it's taking some time to hide and meanwhile user can click on this link. I want to avoid it.
$("#notfix_"+qid).show();
//$("#notfix_"+qid).bind('click', true);
alert("Question status updated successfully");
});
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
$(".notfixed").click(function(e) {
var action_url2 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$(".notfixed").colorbox({inline:true, width:666});
$("#notfixedPop_url").off('click').on('click',function(event){
event.preventDefault();
$.get(action_url2, function(data) {
//$("#notfix_"+qid).bind('click', false);
$("#notfix_"+qid).hide();//This portion of code I want to make fast, it's taking some time to hide and meanwhile user can click on this link. I want to avoid it.
$("#fix_"+qid).show();
//$("#fix_"+qid).bind('click', true);
alert("Question status updated successfully");
});
});
</script>

You dont have to write the hide part code in complete function of get request. On live it will take time to fetch the rspond.so just keep it outside get function.something like this:
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$("#fix_"+qid).hide();
//rest code......
});
$(".notfixed").click(function(e) {
var action_url2 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$("#notfix_"+qid).hide();//hide it here
//rest code......
});

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});

NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

ON method won't trigger at first click on the page already loaded

This was just a conflict between triggers applied to the textarea where i get the text and the a.comment trigger
// Read above first
Why this ON method won't work at first click when page load? . Only since i clicked on whatever part of the page , on the second click , the click event work. any ideas? BTW i'm using firefox with firebug, if you know a method to get better information to this weird behaviour here in firebug panel . i'll thank you any help.
i'm using jquery-1.7.2.min .
$(document).ready(function(){
$('a.comment').on("click", function(event){
event.preventDefault();
var comment_text = $("#comment").val();
if(comment_text !="Escriba aqui su comentario")
{
$.post("../load.php?comment_text="+comment_text, function(response){
//on response
})
}
});
});
this is the html portion:
<textarea id="comment"></textarea> /*only one on the page*/
<a id="c_id-XXX" class="comment"> Comment</a> /* XXX = diferent num*/

take a look here
I've edited your work and now it's fine:
$(document).ready(function(){
$('a.comment').on("click", function(event){
event.preventDefault();
alert('in'); //testing if we are in
var comment_text = $("#comment").val();
if(comment_text !="Escriba aqui su comentario")
{
//no need for extra brackets here as long as you are not passing args.
$.post("../load.php?comment_text="+comment_text,
function(response){
//on response
}); // no use for settimeout()
}
alert('out'); // checking that we have done it :)
});
});
Hope that I helped

How can I write a function that relies on dynamic selectors?

I am writing a function to dynamically load jQuery UI accordian leaves with content. I know (think) the AJAX part works as I lifted it from another working AJAX loader I have, but the function as a whole does not work.
The code:
function load_leaf(link){
var link = link;
$.ajax({
cache : false,
type : 'POST',
async: false,
url : 'includes/'+ link +'.php?'+ new Date().getTime(),
dataType : 'text',
data: {
owner : '$user_id'
},
success: function(msg){
$("#" + link).html(msg);
console.log('Can\'t see me in Chrome, but ok in firefox !')
},
error: function() {
console.log($.makeArray(arguments));
},
complete: function() {
console.log($.makeArray(arguments));
}
});
};
$(function(){
$('.accordian').click(function(){
var link = this.getAttribute("link");
load_leaf(link);
});
});
For whatever reason this does not work. The break point seems to be this line
$("#" + link).html(msg);
Specifically the selector, as a hard coded selector works perfectly. The link variable is correctly filled i know this as i can alert the value correctly. The link is not the problem as i replaced the whole ajax function with a simple add class and it a still did not work, it also broke at the selector.
EDIT:
This is the div as printed by php:
<h3 class="accordian" id="'.$tab_id.'" link="'.$tab_link.'" >
'.$tab_name.'
</h3>
<div id="'.$tab_link.'"><p>Hi</p></div>
The html for the first one is:
<h3 class="accordian" id="accordian_manage.php" link="accordian_manage.php" >Manage Images</h3><div id="accordian_manage.php"><p>Hi</p></div>

Your ID has a period . in it, which jQuery interprets as a chained class selector.
You can either change your link/IDs, or use this hack:
$("[id='" + link + "']");
Live demo

I guess your problem is with Jquery is not finding the div to load the msg..Post the accordion div so that i could give you the proper selector