We Keep Coding

how to avoid from ajax call same function with .scroll(function() if i was click on another div with onclick

in this code you can see that i have two div tags that every one of them have not the same onclick="" function call,
the problem is when i click on one of them and then click on enother one the .scroll(function() works also from the first clicked function,
this example with alert only,
<div class="first_div_class" onclick="firstFunction();">First Div</div>
<div class="second_div_class" onclick="secondFunction();">Second Div</div>
<div class="result"></div>
<script class="functions">
function firstFunction(){
var one = '<?php echo $someValueOne; ?>';
var two = '<?php echo $someValueTwo; ?>';
$.ajax({
type:'GET',
url:'getSomethingOne.php',
data: {
'SomethingOneInFirstFunction':one,
'SomethingTwoInFirstFunction':two
},
success:function(data){
$('.result').html(data);
},
});
$('.result').scroll(function(){
alert("Hello! to the first box!!");
});
}
function secondFunction(){
var one = '<?php echo $someValueOne; ?>';
var two = '<?php echo $someValueTwo; ?>';
$.ajax({
type:'GET',
url:'getSomethingTwo.php',
data: {
'SomethingOneInSecondFunction':one,
'SomethingTwoInSecondFunction':two
},
success:function(data){
$('.result').html(data);
},
});
$('.result').scroll(function(){
alert("Hello! to the second box!!");
});
}
</script>
even if you will try without the ajax call and only with on click function its will continue the first clicked function scroll call,
how can i stop this?...

You should set your listener for one-time usage. The problem is that you are setting a new scroll handler for the same HTML element on every call of your function and they are never removed.
$('.result').one('scroll', function() {...})

i was added to the start of each function
$(".result").unbind();
thank you epascarello

Passing html anchor tag value from javascript to PHP

I have seen solutions close to my problem but none of them solves it.
Here is my html for the anchor tag:
<div class="rating rating2" align="center">
<a onclick="myAjax(5)" value="5">★</a>
<a onclick="myAjax(4)" value="4">★</a>
<a onclick="myAjax(3)" value="3">★</a>
<a onclick="myAjax(2)" value="2">★</a>
<a onclick="myAjax(1)" value="1">★</a>
</div>
Here is my JS code:
function myAjax(star) {
$.ajax({
url:"find.php",
method:"POST",
data:{ star : star },
success: function( data ) {
console.log( data );
}
});
}
And my corresponding PHP code in find.php:
<?php
if(isset($_POST['star']))
{
$s=$_POST['star'];
echo $s;
}
?>
And of course I have stored the files in the same directory.I am not getting any output.Any help will be much appreciated.

I'm assuming your target is the value attribute of each link.Hence try something like this.
<script>
function myAjax(star) {
$.ajax({
url:"find.php",
method:"POST",
data:{ star : star },
success: function( data ) {
console.log( data );
}
});
}
$("a").click(function () {
var result = $(this).attr('value');
myAjax(result)
})
</script>

Getting Error value when I try to send value from JavaScript to PHP with ajax post

I use if (isset($_POST['category_drop'])) {...} to check for the post condition in PHP.
Kindly provide me a solution.
$('.category_filter .dropdown-menu li a ').on('click', function(e) {
e.preventDefault();
var category = $(this).text();
$.ajax({
type: "POST",
url: 'page_author.php',
data: {
category_drop: category
},
success: function(data) {
// do something;
alert(category);
}
});
});

Try this:
var params = {'category_drop':category};
$.post('page_author.php', params, function(data) {
//do stuff
}, 'json');

OK, main problem was in your event setting. Check these codes:
page_author.php (v1.0)
<?php
if (isset($_POST['category_drop'])) echo $_POST['category_drop'];
else echo 'Nothing!';
?>
index.html (v1.0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(function(){// <---------------- document.ready event
$('.category_filter .dropdown-menu li a').on('click', function(e){
e.preventDefault();
var category = $(this).text();
$.ajax({
type: "POST",
url: 'page_author.php',
data: {
category_drop: category
},
success: function(data) {
console.log(category); // <----- using `data` is correct but using category has no problem, *I changed alert() to console.log()*
}
});
});
});
</script>
<div class="category_filter">
<div class="dropdown-menu">
<ul>
<li>
<a href="javascript:void(0);">
Click Me :)
</a>
</li>
</ul>
</div>
</div>
I created the click event inside document.ready and everything works now.
Just another thing, that you have to send enough code that people can help you. I added some html and other codes to test the code.
and I used console.log() instead of alert(), alert() is good, but console.log() is more pro. and you can see result in console's log, for example in Console of Firebug or something else.
UPDATE - 21/SEP/2016
[cause: questioner needs to change html face after success ajax]
You want to show the result in your page, just do this:
page_author.php (v1.1)
<?php
if (isset($_POST['category_drop'])) echo $_POST['category_drop'];
// else echo 'Nothing!'; // <-------- REMOVE THIS
?>
index.html (v1.1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(function(){// <---------------- document.ready event
$('.category_filter .dropdown-menu li a').on('click', function(e){
e.preventDefault();
var category = $(this).text();
$.ajax({
type: "POST",
url: 'page_author.php',
data: {
category_drop: category
},
success: function(data) {
$("#outdiv").html($("#outdiv").html()+"<b>This is the result from AJAX: </b> "+data+"<br/>"); // <------ This will change output div inner html after success ajax
}
});
});
});
</script>
<div class="category_filter">
<div class="dropdown-menu">
<ul>
<li>
<a href="javascript:void(0);">
Click Me :)
</a>
</li>
</ul>
</div>
</div>
<div id="outdiv"></div><!------------ Result will show here -->
Just copy above code.

Thanks for all your supportive answers, Finally I got the output by the below method
$('.category_filter .dropdown-menu li a').on('click',function(e) {
e.preventDefault();
var category = $(this).text();
console.log(category);
$.ajax(
{
type: "post",
url: 'category_drop.php',
data: {
category_drop: category
},
cache: false,
success: function(response) {
$('#ajax_section').html(response);
}
});
});

Undefined variables using html dataset id's

This question is a continued one of this Giving an element multiple names/id's question I asked earlier.The second answer shows what is the better way to go about giving a element multiple attributes.
However after applying this method to my work. My javascript variables are undefined.
My html:
<a data-toggle="modal" data-id="prodModal" data-presId="<?php echo $selectPresForJs->valueof('pres_id'); ?>" data-prodId="<?php echo $prod->prod_id; ?>" data-target="#prodModal" class="image_modal" >
<img class="image-modal" style="width: 192px; height:192px;" src="<?php echo $prod->prod_icon; ?>">
<span ><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></span>
</a>
My javascript
$(document).ready(function(){
$('#prodModal').click(function() {
var ajaxprodId = $('#prodModal').data('prodId');
var ajaxpresId = $('#prodModal').data('presId');
/*Console Prints the variables as undefined*/
console.log(ajaxprodId);
console.log(ajaxpresId);
$.ajax({
url: "path/to/file/Presentation.php",
type: "POST",
data: {prodId : ajaxprodId,presId:ajaxpresId}
,success: function(data){
console.log("Success was achieved");
document.getElementById("modal_content").innerHTML = "Works";
},
error: function(data){
console.error("The action was unsuccessfull");
alert(data);
}
});
});
});
1. How would I fix/change my code so that variables ajaxprodId and ajaxpresId are not undefined?
2. Where would the correct place be to have ajax replace the innerHTML, as the current position only works after the modal has been opened, closed and then opened again.

when you use the selector $('#prodModal') you are referencing a DOM element with the attribute id set to prodModal. That id is not the same as your data-id.
So when you are using $('#prodModal') you get nothing because there isn't any element with that id

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"]