We Keep Coding

Cannot access Rails variable inside Javascript tag

All the other solutions in stackoverflow doesn't seem to work for me so i'm posting my code for assistance. I want to output the variable: #less_per_unit via jquery
Here is my tag inside _form.html.erb:
<script>
$(document).on('keyup', ".input-quantity", function(){
$.ajax({
url: "/so_check_increment",
type: "GET",
data: { quantity: $(this).val(), product_id: $(this).closest('tr').find('.input-product_code').val()}
});
$(this).closest('td').next('td').find('.increment').text('<%== j #less_per_unit%>');
});
</script>
And here is my controller:
def check_increment
#less_per_unit = "testing"
end
I know that the ajax works, i've also set up the routes. If I try binding.pry, I know that rails can find #less_per_unit, but I can't output it with javascript.

This is not working because:
Let us say this form is rendered in action 'new' of controller 'Post', then #less_per_unit needs to be initialised there to use it in the view file of that action which you are using. Where as you are using an AJAX call and during that call, you are defining an instance variable which will definitely be not accessible to the already rendered html file.
So, you need to return JSON data from your check_increment action and receive that data in AJAX call response and then use it.

How to replicate the jQuery .load() method using jQuery’s .ajax() method

I can’t just use .load() because I’m building a custom loading bar that’s actually truthful about the percentage that has currently been loaded (yes that’s actually possible): http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
I’ve got the loading bar working now but I need to replicate the following jQuery functionality inside the .ajax() function so I can append the #ajaxContent stuff to the .ajaxContainer div once it’s finished loading:
$('.ajaxContainer').load('/path/to/file.php #ajaxContent')

The equivalent would be:
$.ajax('/path/to/file.php'/*,{extra: settings}*/).done(function (response) {
$('.ajaxContainer').html($("<div>").append( $.parseHTML( response ) ).find( '#ajaxContent' ));
});

I think is quite simple to provide a simple answer, I prefer to illustrate you the procedure for retrieve yourself.
If you read the docs of .load() on jQuery site you read:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success)
If you read the docs about .get() you read:
This is a shorthand Ajax function, which is equivalent to:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Where dataType
dataType Type: String The type of data expected from the server.
Default: Intelligent Guess (xml, json, script, or html).
So in your case you must fill the html element with data from success callback like this:
$('.ajaxContainer').html(response);

Calling a php function with ajax

Hi I am using ajax to do a post request. I think what I want to do is call a function within a php file but am a little confused if and how you do this, could anyone shed any light on this? This is what I have in my js file:
function callAjaxAddition2() {
arguments0 = jQuery('#code').val();
$.ajax({
type: "POST",
url: file.php",
data: {code: arguments0},
success: function(data) {
request( $posted )
}
});
return false;
}
'request' is a function within the php file.
Update I think I should be able to trigger what I need to using this: http://docs.woothemes.com/document/wc_api-the-woocommerce-api-callback/ if I put the url into the url field however that doesn't seem to work, how might I use a callback with ajax post?

First fix this line with the missing opening quote file.php".
You cannot call a PHP function through AJAX but can trigger when it needs to be called, the following demonstrates the same:
In your PHP, your code would be:
if(isset($_POST['code'])){
#'code' here is the identifier passed from AJAX
request($_POST['code']);
}
Once your function has been called, does the necessary and returns the output to AJAX, you can use the data parameter you have set to see what output was sent back from PHP:
success: function(data) {
alert(data); //contains the data returned from the
//PHP file after the execution of the function
}

Calling on a php file via ajax call is like running the script that you pass in the url parameter.
You don't get access to the inner functions, all you can do is pass data and get response.
If you want the request() function to be called in the script, you will have to call it in the php script.

Load JavaScript after AJAX data success

I begin with jQuery and I'm trying develop a web audio player using jQuery, AJAX & PHP,
I have a problem with loading jQuery script included in my DOM after the success of AJAX.
When I receive my data via AJAX, the included scripts in the DOM does not respond.
There is my code:
1: I send my data vi onclick link to AJAX script :
<?php echo $file?>
2- AJAX receive my data with success via this function:
function getfile(audio) {
$.ajax({
type: 'POST',
url: 'script.php',
data: {
song: audio
},
success: function(data) {
$('#playlist1').html(data); // I get data with sucess in playlist1 div but player.js which is supposed to read the link that I got from PHP script is not loaded
},
});
}
I tried to put player.js in getScript before AJAX it work but I have a lot of bugs when I click in another link.
My question is: how can I load all my included scripts when the AJAX request completes? I heard about live function, but I don't know how to integrate live() in my case.

table positioning with AJAX to PHP post

I have a jQuery script that sends POST data via AJAX to a php file that then creates a table. I have used firebug to check the console and everything gets created properly. On the success: I reload the window and the table isn't displayed.
I know the table html was created properly from the php file because I commented out the reload so I could see exactly what it created) I have lots of things displayed on my page and would like the table in a particular spot. How can I get the table to actually display where I want it to?
<script>
$(document).ready(function () {
$("#stayinfobutton").click(function () {
var id = $('#id').val();
var dataString = {
id: id
};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/table_auto_guests.php",
data: dataString,
cache: false,
/*success: function(html)
{
window.location.reload(true);
}*/
});
});
});
</script>

The window.location call will reload a new page in the browser window, this will loose the data returned to the ajax call by the server.
Usually the response to Ajax calls is loaded directly into your page, something like:
success: function(html)
{
$('#guestsTable').html(html);
$('userForm').hide();
}
I made up the guestsTable div and userForm names, ;).
The return data may need some coercing to make it into html (I'm assuming your using JQuery), hopefully the php script will set it to html/text in the header, also dataType: html can be passed in the $.ajax({...}) call.
Alternatively, if the classes/table_auto_guests.php returns a full page which you want to load in the browser, Ajax may not be what you are looking for. This post contains code on how to submit the data as a form, and load the result as a new page.