call javascript function in every div in html - javascript

Hi I have a javascript function and I want it to call when the c_id loops each. but I don't have an idea about it.
here is my function.
function getCLowestPrice(c_id){
$.ajax({
type: "POST",
url: 'http://sample.com/api/store_lowest_price/',
dataType: "xml",
cache: false,
data: {'id' : c_id},
success: function(resp){
// we have the response
console.log(resp);
$(resp).find("response").each(function() {
var c_name = $(this).find("c_name").text();
var c_currency = $(this).find("currency").text();
var c_min_price = $(this).find("price_min").text();
var formated_price = addCommas(parseFloat(c_min_price).toFixed(2));
$('.cinformation').html("<p>Lowest Price : " + c_currency + " " + formated_price + "</p>");
});
},
});
}
and I want it to call when the div loaded. but it loops all the clients and also their c_id.
<div>
Client : <?php echo get_post_meta($post->ID, 'wpcf-c', true); ?>
<div class="cinformation">
C ID = <?php echo get_post_meta($post->ID, 'wpcf-c-id', true); ?>
....
</div>
...
</div>
so it will be this when it loops.
<div>
Client : Hello
<div class="cinformation">
C ID = 1
....
</div>
...
</div>
....
<div>
Client : World
<div class="cinformation">
C ID = 2
....
</div>
...
</div>
....
....
...
but i don't have any idea on how can I add the getCLowestPrice(c_id) in the cinformation div.
I try to use the onload but it can't be used in div.
does anyone have an idea about my case?
thanks in advance ...

You need to put your C ID using data attribute like so:
<div>
Client : Hello
<div class="cinformation" data-c_id="1">
</div>
</div>
Then after the page loads just use jQuery to select all your divs and call your function:
$(".cinformation[data-c_id]").each(function(index, elem){
var cId = $(this).data("c_id");
getCLowestPrice(cId);
});

You can just try adding this
<script type="text/javascript">
getCLowestPrice (<?php echo get_post_meta($post->ID); ?>)
</script>
in your for loop in php

Related

Why i can not get value from input using javascript?

When i press on click here It's wil be alert blank and blank value.
I want to know why not alert 400 and 400
test1.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="first_image_data_url_fid" style="display: block;">
<input type="text" name="first_image_data_url" id="first_image_data_url"/>
<input type="text" name="first_image_data_dimension_width" id="first_image_data_dimension_width"/>
<input type="text" name="first_image_data_dimension_height" id="first_image_data_dimension_height"/>
</form>
<span id="mySpan_check_image_data_width_height"></span>
<div onclick="test_fn()">click here</div>
<script language="JavaScript" type="text/javascript">
function test_fn()
{
var first_image_data_url = "https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg";
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
$.ajax
(
{
url: 'test2.php',
type: 'POST',
data: $('#first_image_data_url_fid').serialize(),
cache: false,
success: function (data) {
$('#mySpan_check_image_data_width_height').html(data);
//get_first_image_data_width_height();
}
}
)
var item = get_first_image_data_width_height();
}
</script>
<script>
function get_first_image_data_width_height(){
var item;
var first_image_data_dimension_width_val = document.getElementById("first_image_data_dimension_width").value;
alert(first_image_data_dimension_width_val);
var first_image_data_dimension_height_val = document.getElementById("first_image_data_dimension_height").value;
alert(first_image_data_dimension_height_val);
var item = "0";
return item;
}
</script>
test2.php
<?PHP
session_start();
include("connect.php");
$first_image_data_url = mysqli_real_escape_string($db_mysqli,$_POST['first_image_data_url']);
$first_image_data_dimension = getimagesize($first_image_data_url);
$first_image_data_dimension_width = $first_image_data_dimension[0];
$first_image_data_dimension_height = $first_image_data_dimension[1];
?>
<script>
document.getElementById("first_image_data_dimension_width").value = "<?PHP echo $first_image_data_dimension_width; ?>";
document.getElementById("first_image_data_dimension_height").value = "<?PHP echo $first_image_data_dimension_height; ?>";
</script>
If I understood your question correctly, you want to know why alerts gives you an empty string even if you see 400 and 400 in your inputs. It is because JS is asynchronous language and your timeline looks like this:
function test_fn()
{
var first_image_data_url = "...";
// (1) setting an empty values
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
// (2) starting AJAX call
$.ajax
(
{
url: 'test2.php',
type: 'POST',
data: $('#first_image_data_url_fid').serialize(),
cache: false,
success: function (data) {
// (4) END of AJAX call
$('#mySpan_check_image_data_width_height').html(data);
//get_first_image_data_width_height();
// you should get your 400 and 400 here
//var item = get_first_image_data_width_height();
}
}
)
// (3) showing the result
var item = get_first_image_data_width_height();
}
If you look carefully, you will see that you try to alert values before they come.
BTW, you don't need to do mysqli_real_escape_string before get_image_size.
If you don't do any calculations on the image nor downloading it, you can obtain it dimensions by pure JS. See this answer

Like Dislike Function AJAX

I have this jQuery AJAX Like Dislike Script
<script>
$(function(){
var PostID = <?php echo $PostID; ?>;
$('.like-btn').click(function(){
$('.dislike-btn').removeClass('dislike-h');
$(this).addClass('like-h');
$.ajax({
type:"POST",
url:"rate.php",
data:'Action=LIKE&PostID='+PostID,
success: function(){
}
});
});
$('.dislike-btn').click(function(){
$('.like-btn').removeClass('like-h');
$(this).addClass('dislike-h');
$.ajax({
type:"POST",
url:"rate.php",
data:'Action=DISLIKE&PostID='+PostID,
success: function(){
}
});
});
});
</script>
Now I want to transform this script to multi post Like Dislike System.
How i can do this? HTML will look like this:
Like
Dislike
LIKE/DISLIKE will be action, 1 will be ID of post to like/dislike. Thanks
you can make something like this. Each post it is each div with postId and two controls inside (like and dislike buttons). When you click like - function will get post id and send with post to server. You must to check ajax part of function.
$(function () {
$('.like').click(function () { likeFunction(this); });
$('.dislike').click(function () { dislikeFunction(this);});
});
function likeFunction(caller) {
var postId = caller.parentElement.getAttribute('postid');
$.ajax({
type: "POST",
url: "rate.php",
data: 'Action=LIKE&PostID=' + postId,
success: function () {}
});
}
function dislikeFunction(caller) {
var postId = caller.parentElement.getAttribute('postid');
$.ajax({
type: "POST",
url: "rate.php",
data: 'Action=DISLIKE&PostID=' + postId,
success: function () {}
});
}
<div class="post" postid="10">
<input type="button" class='like' value="LikeButton" /> </input>
<input type="button" class='dislike' value="DislikeButton"> </input>
</div>
If you have some questions or need more help you can ask me :)
If you want more than one post per page you can do this:
function send(action, id)
{
var opposite;
opposite = action === 'like' ? 'dislike' : 'like';
$('#' + opposite + '-' + id).removeClass(opposite + '-h');
$('#' + action + '-' + id).addClass(action + '-h');
$.ajax({
type:"POST",
url:"rate.php",
data:'Action=' + action + '&PostID=' + id,
success: function(){
}
});
}
Now you only need to attach the handlers properly ($PostID must be different for every post in a loop):
<a href="#"
id="like-<?php echo $PostID; ?>"
onclick="send('like', <?php echo $PostID; ?>)">Like</a>
<a href="#"
id="disloke-"<?php echo $PostID; ?>"
onclick="send('dislike', <?php echo $PostID; ?>)">Dislike</a>
That's just a layout of the code, there may be defects. It's pretty different from where we started, so only you can actually test it and see where it need refinement.

Jquery add class to all previous siblings

I am working on a simple rating system in WordPress.
<div id="r1" class="rate_widget"
data-post-id="<?php echo $post_id ?>"
data-user-id="<?php echo $user_id; ?>"
data-nonce="<?php echo $nonce ?>"
>
<div data-rating="1" class="ratings_stars"></div>
<div data-rating="2" class="ratings_stars"></div>
<div data-rating="3" class="ratings_stars"></div>
<div data-rating="4" class="ratings_stars"></div>
<div data-rating="5" class="ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
I have three classes
1-rating_stars = simply to show star.png
2- ratings_vote = when user hover over stars it turns into yellow
3- ratings_done = After receiving a response star turn into blue.
I want to add or remove classes based on the number I receive by Ajax.
Here is the code:
$('.ratings_stars').hover(
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('data-rating'),
widget_id : $(star).parent().attr('id'),
post_id:$(star).parent().attr('data-post-id') ,
user_id:$(star).parent().attr('data-user-id') ,
nonce: $(star).parent().attr('data-nonce'),
action: 'rating_system'
};
console.log(clicked_data);
$.ajax({
type: 'POST',
data: clicked_data,
url : myAjax.ajaxurl,
success: function(INFO) {
$("div[data-rating = '" + INFO + "']").prevAll().addBack().addClass('ratings_vote');
$('.rate_widget').find('[data-rating="' + INFO + '"]').prevAll().andSelf().addClass('ratings_vote');
$('.rate_widget').find('[data-rating="' + INFO + '"]').nextAll().removeClass('ratings_vote');
}
});
});
I have tried these last lines but it doesn't work. But id I run same code in console it works perfectly. INFO is a number from 1 to 5.
$("div[data-rating = '" + INFO + "']").prevAll().addBack().addClass('ratings_vote');
$('.rate_widget').find('[data-rating="' + INFO + '"]').prevAll().andSelf().addClass('ratings_vote');
Is there any way to work around?

How to refresh my div after submit comment?

I am using smarty framework in my project, I perfectly did my comment system but I cannot get the exactly result I want.
This is my PHP code inside event-detail.php :
$event_comment = $eventComment->geteventcomment($record, $startfrom, $max);
$tpl->assign("event_comment", $event_comment);
$tpl->display("event-detail.html");
This is HTML code inside event-detail.php :
//this is javasctipt
<script type="text/javascript">
// on post comment click
$('.bt-add-com').click(function(){
$.ajax({
type: "POST",
url: "add-comment.php",
data: 'act=add-com&event_id='+theEventId.val()+'&comment='+theCom.val()+'&user_id='+theUserId.val()+'&user_name='+theUserName.val()+'&file_path='+theFilePath.val(),
success: function(html){
theCom.val('');
theEventId.val('');
theUserId.val('');
theUserName.val('');
theFilePath.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
});
});
</script>
<div class="content-container-left">
<{section name=thisrsa loop=$event_comment}>
<div class="comment-box">
<div class="comment-listing">
<div><small><{$event_comment[thisrsa].date}></small></div>
<div class="avatar">
<img src="<{$smarty.const._CONST_CONTENT_MEMBER_THUMBNAIL}><{$event_comment[thisrsa].file_path}>"/>
<p><{$event_comment[thisrsa].name}></p>
</div>
<div class="comment-template">
<p><{$event_comment[thisrsa].content}></p>
</div>
</div>
</div>
<{/section}>
</div>
This is SQL statement which I had did it limit 3 record shows each page :
function geteventcomment($record, $startfrom, $max){
global $db,$comment;
$arrResult = array();
$stmt = "SELECT tbl1.event_id, tbl2.name, tbl2.file_path, tbl1.text, tbl1.modified_timestamp, tbl1.creation_timestamp FROM "._CONST_TBL_EVENT_COMMENT." tbl1, "._CONST_TBL_ALUMNI." tbl2 WHERE tbl1.event_id = $record AND tbl1.member_id = tbl2.id ORDER BY tbl1.creation_timestamp DESC";
$stmt .= " LIMIT $startfrom, $max";
if($rs = $db->Execute($stmt))
{
while($rsa = $rs->FetchRow())
{
array_push($arrResult, array(
"id" => $record,
"name" => $rsa['name'],
"file_path" => $rsa['file_path'],
"content" => $rsa['text'],
"date" => $rsa['modified_timestamp']
));
}
}
return $arrResult;
}
I had get the following result in my website :
But what I really want is to refresh div and make it only display the latest 3 comment in my website, like below :
I hope I can get some help from you guys.
Please check if following code helps.
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').empty().append(html);
});

AJAX cannot return Json data

I'm trying to post a piece of Json data to AJAX and get a "upvote_message" in return. However, the "upvote_message" is returned as undefined.
Code:
<div class="media">
<div class="media-body">
<p align="right">
<span href="javascript:;" rel="1" class="upvote">Text to be replaced</span>
</p>
</div>
</div>
JS:
<script type="text/javascript">
$(function(){
$('.media .media-body .upvote').click(function(){
var this_a = $(this);
var comment_id = $(this).closest('span').attr('rel');
$.ajax({
type:"POST",
url: base_url + "/upvote",
data:{comment_id : comment_id},
dataType: "json",
success: function(data,status){
if(data.state == 'succ')
{
this_a.html(upvote_msg);
}
else
{
this_a.html(upvote_msg);
}
}
});
});
});
</script>
PHP
public function upvote (){
$comment_id = $this->input->post('comment_id');
if($comment_id==5){
echo json_encode(array('state' => 'succ','upvote_msg'=>'haha'));
}
else{
echo json_encode(array('state' => 'fail','upvote_msg'=>'bam'));
}
exit();
}
}
The PHP and AJAX's write-into part works fine. Data is also registered in database.
The issue is that the 'upvote_msg' is shown as "undefined" when being returned to the Javascript.
How to fix this? Many thanks,
upvote_msg is a property of the data object so it should be data.upvote_msg
To get upvote_msg value you have to use
data.upvote_msg or data["upvote_msg"]

Categories