I'm trying to load a html table created by a php code. The table should be generated by an sql query that depends on a variable from a radio input selector, but somehow i can't pass that variable via jQuery.post(). I made a simple version that has the same issue so I hope someone can help me with that:
test.php:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$.post('ajax.php', {varphp: op});
$("#div1").load('ajax.php', function(){
});
});
});
</script>
<body>
<label class="radio-inline"><input type="radio" value="110" name="selectOP" id="selectOP">110 </label>
<label class="radio-inline"><input type="radio" value="115" name="selectOP" id="selectOP">115 </label>
<div id="div1">
</div>
</body>
</html>
ajax.php:
<?php
$var= "Something";
echo $var;
//$varphp = $_POST['varphp'];
//echo $varphp;
?>
So, with the two last lines of ajax.php commented, code successfully runs and the var $var loads inside div1. But if i uncomment those lines, apparently the code stops, and nothing is loaded on div1. What am I doing wrong?
You are calling $.post where you pass the argument and then calling load with no arguments. Of course you can't get $_POST['varphp'] when you call 'load' because you are not passing this variable.
you must use one of them.
you can do with this:
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );
or
$("#div1").load('ajax.php', {varphp: op});
but not both
thus, your code can be
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );
});
});
or
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$("#div1").load('ajax.php', {varphp: op});
});
});
$.post('ajax.php', {varphp: op});
$("#div1").load('ajax.php', function(){
$});
These two lines are actually making two separate ajax requests, which means the server will pick them up separately. Only the first one has a POST parameter, and only the second one sets the content of the DOM object.
Try something like this:
$("#div1").load('ajax.php', {
varphp: op
});
A good practice I like is to use AJAX w/ deferred promises. You can try converting your code to the following:
$.ajax({
type: 'post', // you can switch to GET, POST, etc.
url: 'ajax.php',
data: {varphp: op},
})
.done(function(data) {
$('#div1').html(data);
})
.fail(function(data) {
// if your code fails, you can see the errors here in the console
console.log(data);
})
.always(function(data) {
// do something every time
});
The codes within the done, fail, or always callback functions will run depending on whether the AJAX call is a success, fail, or neither respectively. With this, you can troubleshoot your code easily as well, especially when the AJAX call error'd out (look inside the fail function).
Related
I want to update TextBox value on basis of selectChange
HTML:
<select name="abc" id="def">
<option value="1">1st Record</option>
<option value="2">2nd Record</option>
<option value="3">3rd Record</option>
</select>
<input value="" name="final_value" id="final_value" />
JS:
$("#selectboxid").change(function() {
$.ajax({ url: "test.php", data:"value="+$("#def").val() , success: function(){
$("#final_value").val(data);
}});
});
PHP:
<?php
function abc($data){
// Database operations
echo json_encode($response);
}
abc($_GET);
?>
With this approach value is updating very nicely But i have below points:
above approach prints values and one can see in Network Tab. Is it a nice way to do it?
I also tried using return $response in PHP function but then response is null and console.log(data) in ajax shows null array.
So, how to update Input value after Ajax without echoing. I do not want that user shall see any type of response even in Network Tab.
I have seen various websites which does the same and not showing any values in Network tab.
** Is there any different approach to do this?
You can alternatively try like this
All HTTP requests can possible to watch on their own network. You can restrict this
$(document).ready(function(){
var params = {};
params['value'] = $("#def").val();
$.post('test.php', params, function(response){
console.log(response);
alert(response);
});
});
I've not tested this, but immediatly I've spotted a couple of things:
$("#selectboxid").change(function() {
// .val is a function
$.ajax({ url: "test.php", data:"value"+$("def").val() , success: function(data) { //Your success callback needs to take an argument
//data will be either a string or a JSON object, so depending on what you want from it, you'll probably not be able to just pass it to the val() function
$("#final_value").val(data);
}});
});
Not 100% complete I'm sure, but hopefully will give you a good starting point
It should be like this
$("#selectboxid").change(function() {
$.ajax({
url: "test.php",
data:{
"value": $("def").val()
},
success: function(){
$("#final_value").val(data);
}
});
});
I am trying to replace page reloading PHP scripts in a web page with AJAX calls.
I am using JQuery to run the AJAX scripts but it doesn't seem to be doing anything so I attempted to write an incredibly basic script just to test it.
My directory is as follows
public_html/index.php
/scripts/phpfunctions.php
/jqueryfunctions.js
index.php contains
<!DOCTYPE html>
<html>
<head>
<!-- jquery functions -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/jqueryfunctions.js"></script>
<!-- php functions -->
<?php include 'scripts/phpfunctions.php' ?>
</head>
<body>
<button type="button" id="testButt">TEST</button>
</body>
</html>
Then the phpfunctions.php page which I am trying to call contains just an echo if an argument is set
<?php
if(isset($_GET["action"])) {
echo "test has been run";
}
?>
The jqueryfunctions.js script I am trying to run is
$(document).read(function () {
$('#testButt').on('click', function () {
console.log("jquery call worked"); // this bit does run when button is clicked
$.ajax({ // this bit doesn't seem to do anything
url: 'scripts/phpfunctions.php?action=run_test',
type: 'GET',
success: function (data) {
$('#ajaxdata').html(data);
},
error: function (log) {
console.log(log.message);
}
});
});
});
I see that the jqueryfunctions.js function is being called by the first console.log but it doesn't seem to be calling my phpfunctions.php function.
I was expecting to see the php echo "test has been run" but this doesn't happen.
Did I miss something?
You should use isset() method:
<?php
if(isset($_GET["action"])) {
if($_GET["action"] == "run_test") {
echo "test has been run";
}
}
?>
and if you are using ajax then why do you need to include it on index page:
<?php include 'scripts/phpfunctions.php' ?>
and i can't find this element $('#ajaxdata') on your index page.
Also you can check the network tab of your inspector tool to see the xhr request to the phpfunctions.php and see if this gets successfull or there is any error.
I think problem is here:
$(document).read(function() {
$('#testButt').on('click', function() {
console.log("jquery call worked"); // this bit does run when button is clicked
$.ajax({ // this bit doesn't seem to do anything
url: 'scripts/phpfunctions.php',
type: 'GET',
data: {action:'run_test'}, // <------ Here
success: function(data) {
$('#ajaxdata').html(data);
},
error: function(log) {
console.log(log.message);
}
});
});
});
jQuery says:
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting.
So you should set data: {key:'value'}
Most things look fine, but your data attribute is designed for "POST" requests, try to add the data to the url as follows:
$( document ).read( function ()
{
$( '#testButt' ).on( 'click', function ()
{
console.log( "jquery call worked" ); // this bit does run when button is clicked
$.ajax( { // this bit doesn't seem to do anything
url: 'scripts/phpfunctions.php?action=run_test', // Add the GET request to the end of the URL
type: 'GET',
//data: 'action=run_test', Unrequired noise :P (this is for post requests...)
success: function ( data )
{
$( '#ajaxdata' ).html( data );
},
error: function ( log )
{
console.log( log.message );
}
} );
} );
} );
And also (as mentioned in my comments), you need to finish your bodys closing tag:
</body> <!-- Add the closing > in :P -->
</html>
I hope this helps :)
Where do you load ajaxfunctions.js? It look like in your code you never load the resource
And change
<button id="xxx">
In
<button type="button" id="xxx">
So the page isn't reloaded
I have a problem that my Js file is not recognizing a php variable built by ajax.
Here is an example:
index.php:
<script src="js.js">
</script>
<?
include('build.php');
<div id="brand">
<?
echo $brandinput;
?>
</div>
//....more code
?>
build.php:
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
crossOrigin: true,
dataType: "jsonp",
type: "GET",
url: "getBrand.php",
data: info,
success: function(data){
$("#result").html(data);
}
});
</script>
<?php $brandinput='<div id="result"></div>';
?>
js.js:
$(document).ready(function(){
//dosomething with div's in index.php
}
So, I'll try to explain this in the easiest way. My index.php includes a build.php which as you can see calls ajax to retrieve data from another server. This data is located in a php variable ($brandinput) which will contain many <div>,<input>,... etc. Then index.php echo $brandinput, showing all the content of the variable. But I have a js.js which change appearances in div's, input's, etc.. and is this js which is not recognizing the content of the variable $brandinput.
I'd like to know if you have more ideas or what am I doing wrong...
All the code is working well, I tested many times (except for what I said before)
The ajax call work well and Index.php displays $braninput correctly.
p.s. $brandinput is something like this:
<div id='BlackBerry'><img src='..\/images\/supporteddevices\/blackberry-logo.jpg' alt='blackberry-logo' width='75'><br><input class='adjustRadio' type='radio'
and yeah it works well too.
Actually this is how it supposed to be working, what you need to do is to wait for the ajax request to finish first before executing the functions in js.js
try this way
// in build.php
$(document).ready(function () {
var promise = $.ajax({
crossOrigin: true,
dataType: "jsonp",
type: "GET",
url: "getBrand.php",
data: info,
success: function (data) {
$("#result").html(data);
//dosomething with div's in index.php
}
});
});
or (assuming js.js is loaded after the script within build.php, or js.js has to be loaded after it)
// in build.php
$(document).ready(function () {
var promise = $.ajax({
crossOrigin: true,
dataType: "jsonp",
type: "GET",
url: "getBrand.php",
data: info,
success: function (data) {
$("#result").html(data);
}
});
});
// in js.js
$(document).ready(function () {
promise.then(function (data) {
//dosomething with div's in index.php
});
});
P.S
$brandinput just hold the string whatever assigned to, and will never be changed with ajax request, where ajax success handler just manipulate the rendered DOM directly in the client side.
You can try moving your <script> tag to after your php codes like this:
<? include('build.php'); ?>
<div id="brand">
<? echo $brandinput; ?>
</div>
<script src="js.js"></script>
//....more code
On a slightly different note, you should consider avoid embedding/intermixing PHP codes with HTML and Javascript. Take a look at this post for better ways way "passing data from PHP to Javascript".
When I click on "Register Now" Button, I want to execute 'input.php' in which I have code to insert my data to the database and show a success message. I don't want to leave current page.
<input type="button" id="confirm" value="Register Now" class="button">
<script type="text/javascript">
$(document).ready(function() {
$("#confirm").click(function() {
<?php
include 'input.php';
?>
alert ("data Added successfully.");
});
});
</script>
My code is giving me "data Added successfully" message but PHP file hasn't executed and no data is added to the database. All necessary data is in session variables.
Suggest you try something like the below. You shouldn't be trying to execute PHP inside of a jQuery script. Do an AJAX call and pass the data through and process it in the PHP rather than relying on the session variables. For example:
<script type="text/javascript">
$(document).ready(function () {
$("#confirm").click(function () {
$.ajax({
type: "POST",
url: "index.php",
data: {
firstname: "Bob",
lastname: "Jones"
}
})
.done(function (msg) {
alert("Data Saved: " + msg);
});
});
});
</script>
Where firstname, lastname would be your normal session data.
You can learn more about the jQuery.ajax() function in the jQuery API Documentation.
To execute a Php script from javascript, you have to use Ajax.
the following code :
$("#confirm").click(function() {
<?php
include 'input.php';
?>
alert ("data Added successfully.");
});
will not work
http://api.jquery.com/jquery.ajax/
You need to use AJAX. Ajax is the concept of calling php files from javascript from inside the page. You then get the php page output in a variable and you can choose wether you will display it or not. An example of this technology is the show more posts of Facebook. This can be easily done with jQuery.
$.post( PHP_FILE, { field1: 'value', field2: 'value'}).done(function( data )
{alert("this function will be run when the request is over and the variable data
will have the output : " + data);});
you can do this by ajax post method..
$.ready(function(){
$("#confirm").click(function() {
$.ajax({
type: "POST",
url: "give url to the input.php file ",
data:,
success:function(data)
{
alert('data');// data is the return value from input.php
}
});
});
});
Try this:
<input type="button" id="confirm" value="Register Now" class="button">
<script type="text/javascript">
$(document).ready(function() {
$("#confirm").click(function() {
$.get('input.php').
success(function(){
alert ("data Added successfully.");
});
});
});
</script>
I'm not quite sure what you've tried to do there. Anyway here's a snippet of js that should do for you (I'm pretty sure in the new jQuery release there's a better way to do this though):
$.ajax({
url: "input.php",
success:
function(data)
{
// here, for example, you load the data received from input.php into
// an html element with id #content and show an alert message
$("#content").html(data);
alert("Success")
}
});
I had a json file results.json Which shown below. And I had a html file contain some script. This is for retrieve data data. When I am enter into the html page which call a script function get_machFollow(que_script) this function is for receive json file data. The function is works fine and which alert correct output, But after this function return some data to my HTML page.
My JSON file
{"mach_fol_4": {"match_l":
["7","8","99"],"attempts":"0","feedback_true":"You are right!",
"feedback_false":"Sorry! wrong answer."}}
This is my script function. This function is works fine but I can't alert the return value from HTML page. That shows undefined.
function get_machFollow(que_script)
{
var return_var;
$.getJSON('results.json', function(data) {
return_var=data[que_script].match_r;
alert(return_var);//Working alert show correct output
return return_var;
});
}
This is my html file
<html>
<head>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script>
$(document).ready(function(){
var mach_follow_js;
mach_follow_js=get_machFollow('mach_fol_4');
alert(mach_follow_js);//Wrong output
});
</head>
<body>
<p>Hello world</p>
</body>
</html>
are you intending return return_var; to be inside the get_machFollow scope, because right now its inside the jquery function scope and will not return value to the main page
Here below JSON data fetched by AJAX. It passing JSON Data Object in Alert.
You can use it as you want. also can Iterate data using for loop or $.each function.
$(document).ready(function(){
var mach_follow_js;
// mach_follow_js=get_machFollow('mach_fol_4');
//JSON Data Fetched by AJAX
$.ajax('results.json',{
type:'GET',
dataType: "json",
jsonCallback: 'successCallback',
async: true,
beforeSend: function () {
//if you want to show loader
},
complete: function () {
//hide loader after download data
},
success: function (resultJSON) {
mach_follow_js = resultJSON; // assigning to Global variable ProductResult
alert(mach_follow_js);
console.log(mach_follow_js);
},
error: function (request, error) {
alert('Network error has occurred please try again!');//error
}
})
});
There are multiple ways by which you can do it. One of them is pass a callback handler to your method which will be called when you get the response. Try this:
function get_machFollow(que_script, sCallback)
{
var return_var;
$.getJSON('results.json', function(data) {
return_var=data[que_script].match_r;
alert(return_var);//Working alert show correct output
sCallback.call(null /* context */, return_var);
});
}
$(document).ready(function(){
var mach_follow_js;
get_machFollow('mach_fol_4', function(output) {
alert(output);
match_follow_js = output;
});
});
Use ajax callback function $.getJSON() is actually an ajax function. So you need to apply callback to perform this action.