Develop Reference

Running jQuery from ajax call

What I'm trying to accomplish is to call a PHP page with an ajax request when an object is clicked and from the PHP page some jQuery will be returned that will determine whether to fade or not to fade the object.
Here is the code returned by the PHP page if the object should be removed:
$attr = '#all'.$numAttr;
echo '<script type="text/javascript">
jQuery(document).ready(function(){
$("'.$attr.'").fadeOut();
});
});
</script>';
Here is the jQuery code with the ajax request:
$(document).ready(function(){
$(".item").click(function() {
var attrID = $(this).attr('id');
var attrNum = attrID.substring(5)
var itemID2 = $(testAttr).html();
var id2 = $(testAttr+"p").html();
$.get( "http://www.refaim.com/use", {itemID: ""+itemID2, id: "" + id2, numAttr: attrNum}, function( data ) {
$(".action").html(( data ));
});
});
});
Edit: Can't believe I forgot to include why I submitted this question. My problem is that the jQuery loaded from the PHP page into a div is not working, the object does not fade when it's clicked.

in your ajax success function you can put your fadeout code depending the value is return from your php file
$.ajax({
type: "POST",
url: "yourphppage.php",
data: dataString,
success: function(msg){
if(msg=='your return value')
//then do fadeOut here
}
}); //END $.ajax

function(data) is the value returned by your PHP. you can add if statement right after the call.
$.get( "http://www.refaim.com/use", {
itemID: ""+itemID2,
id: "" + id2,
numAttr: attrNum},
function( data ) {
if(data == 'something') {
$('<your html element>').fadeOut();
}
});
});

pass data to lable in same page using jquery

i have this working code with this code i can pass data to div within same page
but insted of passing data to div i want to pass this to label or textbox so that i can post it to the server. i am new in ajax,jquery . please suggest me best answer
<script type="text/javascript">
//send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
$('.responseDiv').text(data);
}
});
});
});
</script>
<script type="text/javascript">
i think i need to change this line only
$('.responseDiv').text(data);
but dont know how to do that. didnt find any solution on net also

take any name like propertyId
Let's say the text field has id="propertyID"
Use the val() method to assign this new value to your text field.
$('#proertyID').val(data);
Like:
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
// $('.responseDiv').text(data);
$('#proertyID').val(data);
}
});
});
});

In the below line change selector .responseDiv with id/name or class of input/label $('.responseDiv').val(data);

<script type="text/javascript"> //send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(data2){
//alert(data);
$('.responseDiv').text(data2);
}
});
});
});
success return in data2 and use this..

How to replace .live() method with .on() method

Hei.. I have a function to load more news. Since jquery-1.9.1.min.js this function was working alright, but now I have to replace it with .on() method and I still can't get it work.
Here is the code:
// Load more news feed
$(function(){
var page = 1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true",
dataType:'json',
success: function(data){
$("#the_news_feed").html(data.news_feed);
if(page <= data.total_pages){
$("#the_news_feed").after('<button id="load_more_feed" class="btn btn-primary btn-large" style="width: 100%;margin-top:10px">Load More</button>');
}
}
});
$("#load_more_feed").live("click", function(){
var next = page+=1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true&page_num="+next,
dataType: "json",
success: function(data){
$("#the_news_feed").append(data.news_feed);
if(next == data.total_pages){
$("#load_more_feed").remove();
} else {
$("#load_more_feed").html("Load More");
}
},
beforeSend: function(){
$("#load_more_feed").html("Loading...");
}
});
});
});
I tryed to replace:
$("#load_more_feed").live("click", function()
with
$("#the_news_feed").on("click", "load_more_feed", function()
but I still can't get it work. What am I doing wrong? Thank you!
I display this function with id="news_feed" so here was the problem
<div class="tab-pane fade" id="news_feed">
<div id="the_news_feed"></div>
</div>
Final solution is $("#news_feed").on("click", "load_more_feed", function()
Thank you guys!

Actually, you're missing the # in the id selector.
$("#the_news_feed").on("click", "load_more_feed", function()
must be
$("#the_news_feed").on("click", "#load_more_feed", function()
assuming #the_news_feed is the parent of #load_more_feed.
EDIT :
From your code, you're appending this #loadmore button after #the_news_feed, so this obviously will not work. Try changing it to this :
$(document).on("click", "#load_more_feed", function()
This will bind the click to the document, which will always exist. Alternatively, you could bind it to #load_more_feed closest static parent, like an element which exists when you load your page and not dynamically created.

pass img src path to php function through javascript

<script type="text/javascript">
$(function() {
$('.LSide img').click(function() {
$('.BigImage img').attr("src", $(this).attr("src"));
var img =$('.BigImage img').attr("src").slice(0,-5);
//alert($('.BigImage img').attr("src").slice(0,-5))
//alert(img);
});
});
</script>
I want to pass that var img variable to php function, and call that php function at the click event. does it possible?

You can use an AJAX call to your PHP script and pass the value of img with that call.
What you can't do is mix Javascript code (which is a client side scripting language) and PHP code (which is a server side scripting language)

Of course, you can do that by sending a POST request, and with AJAX it'd be:
$.ajax({
type: "POST",
url: "some.php",
data: { img: img.serialize() }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
http://api.jquery.com/jQuery.ajax/

In your html file. Call click finction like this:
<img src="a.png" id="BigImage" onclick="click()">
<script type="text/javascript">
function click(){
var a = document.getElementById('BigImage').src; //id of your img tag
$.ajax({
type: "POST",
url: 'b.php',
data: { ch : a },
success: function(data){
alert(data);
}
});
}
</script>
In your b.php file use `$_POST['ch']` as you want
<?php
echo $_POST['ch'];
?>

jquery ajax form submit

Is this code correct? I'm trying to submit it and also I would like on submit if text area would be empty again.
<script type="text/javascript">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fid = $(".messag").attr("id");
var val = $("#mess_ar").val();
$.ajax({
type: "POST",
url: "send_message.php",
data: "fid="+ fid +"&val="+ val,
success: function(){
$("#mess_ar").
}
});
return false;
});
}):
</script>
I'm trying to upload this:
<form id="submit" method="POST">
<textarea name="mess_cont" id="mess_ar" autofocus="autofocus" cols="70" rows="5"> </textarea>
<button id="mess_but" type="submit">Send</button>
</form>
Thankx...

Looks good. To empty the textarea use the following in the ajax success callback:
$("#mess_ar").val('');

​$(function(){
$("form#submit").submit(function(e){
e.preventDefault();
var fid = $(".messag").attr("id");
var val = $("#mess_ar").val();
$.ajax({
type: "POST",
url: "send_message.php",
data: "fid="+ fid +"&val="+ val,
success: function(){
$("#mess_ar").val("");
}
});
});
});​
Use
$("#submit").on('submit', function(e){...});
instead of
$("#submit").submit(function(e){...});
if you are using latest version of jquery.

What are you actually looking for? Does it return the data in response too? Add the functions to track your the error case too. Make something like
<script type="text/javascript">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fid = $(".messag").attr("id");
var val = $("#mess_ar").val();
$.ajax({
type: "POST",
url: "send_message.php",
data: "fid="+ fid +"&val="+ val,
success: function(incoming_data){
// ALERT incoming data if coming
$("#mess_ar").text(""); // DO YOUR JOB CONTINUOU
},
error: function() {
alert("BROKEN REQUEST.");
}
});
return false;
});
});
</script>
Else, seems all fine.