php

Question

811 votes

1 answers

php - How to properly get loading text display based on the like button click via jQuery

Get the solution ↓↓↓

Solution:

You need to get the loader in relation to the clicked button so instead of using

$('.loader')

Use

$(this).parent().find('.loader')

Same goes for your result message.

The following is a modified click function:

$('.like_post').click(function(e) {
  // as you are doing an ajax post here, I would disable the default action of the button:
  e.preventDefault();

  var $button = $(this);  // you use this multiple times so it is more efficient to put it in a var
  
  var id = $button.data('id');
  
  var $buttParent = $button.parent();
  var $loader = $buttonParent.find('.loader');

  $loader.html('<div style="background:green;color:white;padding:6px;">Please Wait, sending like...</div>').fadeIn(400);  // I would change the html before the fadeIn
  
  var rec = {
    id: id
  };

  $.ajax({
    type: 'POST',
    url: 'like_rec.php',
    data: rec,
    cache: false,
    success: function(msg) {
      $loader.hide();
      $buttonParent.find('.result_like').html(msg);
    }
  });
});

Also thecenter tag is obsolete so don't use it, instead give your heading a class and use css to centre the text

Undefined asked

2023-09-23

Source

Share

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Similar questions

Find the answer in similar questions on our website.

145 javascript - How to display PHP CodeIgniter error validation if the form has error and display successfully submitted if it has no error

193 php - Why I get error `Error uploading file 'filename'`

274 linux - PHP-FPM Exporter Binary can not access php unix socket

605 email - Add a button that will be redirected to the other webpage in PHP Mailer with HTML design?

304 php - Integrate JQuery Image Magnification with Dynamic Bootstrap 5 Carousel

31 Getting Feedback from a POST request - PHP

294 php - PHPUnit test not sharing the entity manager with Symfony

184 php - wordpress new files getting blocked for mixed content error

685 php - How to retrive mysql data to a textfiled in html

97 php - How can I set a specific PhpSession Cookie for a webpage?

Undefined answered · Answer 1 · 2023-09-23

Answer

Solution:

You're currently targeting every "loader" and every "result_like":

$('.loader').hide();
$('.result_like').html(msg);

Since the elements you want to target are all contained within a single parent<div>, you can use that for jQuery DOM traversal. Starting from the element being clicked, you can navigate to the containing<div> and then back down to the target element(s). Something like this:

$(this).parent('div').find('.loader').hide();
$(this).parent('div').find('.result_like').html(msg);

To be repeated anywhere you want to target an element within that "group" of elements. You could also store the containing<div> in a variable if you prefer, which comes with a tiny performance improvement:

var container = $(this).parent('div');

//...

container.find('.loader').hide();
container.find('.result_like').html(msg);

Popular technologies

Latest questions:

php - How to properly get loading text display based on the like button click via jQuery

Solution:

Answer

Solution:

Share

Didn't find the answer?

Similar questions

Write quick answer

About the technologies asked in this question

JQuery

CSS

HTML

Welcome to webdevask.com

Get answers to specific questions

Help Others Solve Their Issues