ajax url won't call php file - php

I am trying to update the user input ratings through ajax call. This one alert(performance_rating) returned the user input ratings properly. But, I have a problem with my url. it won't call user_ratings.php. I don't know why? I have tried alert function in user_ratings.php page. But, it won't alert.
I have the user_ratings.php file in siteurl.com/include/pages/user_ratings.php
How do I call my php file properly?
ajax request
$(function () {
$('#form').on('submit', function (e) {
performance_rating = $('input:radio[name=rating]:checked').val();
e.preventDefault();
$.ajax({
type: 'POST',
url: 'user_ratings.php',
data: {
rating: performance_rating
},
success: function() {
alert(performance_rating);
}
});
});
});

If you are sending your ajax request from localhost to your domain, then you have to use full site url in your ajax call as follows
$(function () {
$('#form').on('submit', function (e) {
performance_rating = $('input:radio[name=rating]:checked').val();
e.preventDefault();
$.ajax({
type: 'POST',
url: 'http://domain.com/include/pages/user_ratings.php',
data: {
rating: performance_rating
},
success: function() {
alert(performance_rating);
}
});
});
});

first its better you do this
define("URL", "http://siteurl.com/");
Then in the ajax url section write
url: '<?php echo URL ;?>includes/pages/user_ratings.php',

Put your FQDN (e.g. www.yoururl.com) before the user_ratings.php in your jQuery Ajax call. So change to this:
$(function () {
$('#form').on('submit', function (e) {
performance_rating = $('input:radio[name=rating]:checked').val();
e.preventDefault();
$.ajax({
type: 'POST',
url: 'http://www.yoururl.com/user_ratings.php',
data: {
rating: performance_rating
},
success: function() {
alert(performance_rating);
}
});
});
});

Related

Can't figure out why PHP file doesn't get called by Ajax

this is my Code inside a html file:
<script>
$(document).ready(function (event)
{
$(document).on("click", ".interestbutton", function(e)
{
var docID = e.target.parentNode.parentNode.id;
$.ajax({
type: "POST",
url: "interest.php",
data: {docID },
success: function(data) {
console.log("done");
}
});
});
});
</script>
The "console.log" works but nothing inside my php file does. Any ideas?
Best regards
Change data: {docID } for data: {docID: docID} as it is an object.

Call ajax after success

I made an ajax request to get the name of each button I click...
Then I want to put everything in that url into "#Container".(url define a page that has some codes)
It works for me at the first time...but for the other times I have to reload the page to show me the details of each button and it doesn't show me details of other buttons that clicked after first desired button..
$(function () {
$('button').click(function () {
var data= $(this).val();
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {
data: data
},
success: function (data) {
$('#container').html(data);
}
});
});
});
What should I do?
Is there something preventing of running the ajax for next times ?
Try with $(document).on('click', instead of $('button').click like below
$(function () {
$(document).on('click','button',function () {
var data= $(this).val();
alert(data);
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);}
});
});
});
You will need to re-bind ajax event because of its re-rendering DOM after an ajax request completes. All those elements under #container are not virtual part of DOM and your click event only works for pre-existed elements.
Try this
Wrap ajax event in a separate function
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
clickEvent(); //note this function attachment I added below
}
});
}
You can wrap your click event into a function
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
Now js looks like
<script>
$(function(){
clickEvent();
});
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
}
});
}
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
</script>
Also I see you are passing ajax data as $('button').val() which is not correct. Use a input type text if you want to send a data to server.

refresh div after sending data to db

i have a div that shows the total sum of some products:
<div class="total-price"><?php echo (!empty($cart)) ? $cart['total'] : '0'; ?> $</div>
with ajax, i'm adding products to cart ... se the page is not reloading.
How to refresh the div after I add the product to cart?
The ajax that i'm using:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
$(".total-price").something...;
}
});
})
</script>
Thank you!
You can do something like this:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
var oldPrice = $('.total-price').text() * 1;
var itemPrice = "15"; //the price that should be added
$('.total-price').text(oldPrice + itemPrice);
}
});
})
</script>
You should be returning a total basket value from your /tdt/order path.
In the PHP script you should echo some JSON data with all the required information, for example
echo json_encode(array("totalPrice" => "£10.01"));
Then you need to parse this information into your Javascript and update the pages elements;
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
$(".success-message").slideDown().delay(5000).slideUp();
$('.total-price').val(data.totalPrice);
}
});
})
</script>
The above ajax request will expect the data returned to be JSON, you will then use this to update the total-price element.
You can use something like angularjs or knockoutjs - for angular you would update your model - for knockout you would use the self.object.push(value) i.e.,
function OrderViewModel() {
var self = this;
self.myOrder = ko.observableArray([]);
self.addOrderItem = function () {
$.ajax({
type: "post",
url: "yourURL",
data: $("#YOURFORMFIELDID").serialize(),
dataType: "json",
success: function (value) {
self.myOrder.push(value);
},
headers: {
'RequestVerificationToken': '#TokenHeaderValue()'
}
});
}
}
ko.applyBindings(new orderViewModel());
</script>
</pre>

How to load php script into div with jquery ajax?

$(document).ready(function(){
$("#S1").change(function()
{
var IDCat=this.value;
$.ajax({
type: "GET",
url: 'product_modify.php',
data: {IDCat:IDCat},
success: function(data)
{
$("#p1").text(data);
$("#tempForm").load('tv_form.php');
}
});
});
});
It is my code , in load() function when I call 'tv_form.html' file it works, but when i call 'tv_form.php' it doesn't work , error is 403 forbidden
where is the problem ? .html works, but .php doesn't work.
Add URL instead of file name.
$(document).ready(function(){
$("#S1").change(function()
{
var IDCat=this.value;
$.ajax({
type: "GET",
url: 'product_modify.php',
data: {IDCat:IDCat},
success: function(data)
{
$("#p1").text(data);
$("#tempForm").load('URL to tv_form.php'); // www.example.com/file.php
}
});
});
});

Trying to getElementById from a div that loaded with ajax

I'm trying to getElementById from a div that loaded with ajax, but I can't. Let's explain:
In 'example.php' I have this js code:
<script type= "text/javascript">
var page=document.getElementById("table_page").value;
$(document).ready(function() {
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q="+page,
timeout: 1000,
success: function(data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
},
});
}
update();
});
</script>
But the input with id='table_page' loading with ajax file 'loaded.php'. The file 'loaded.php' contains this:
<?php echo " <input type='hidden' id='table_page' value='7' /> "; ?>
This printed somewhere in my 'example.php'. The problem is that I can't get the value from this div in my js code. Please help me.
Try this:
$(document).ready(function () {
var page = '';
$('#divLoadedID').load('loaded.php', function () {
page = $("#table_page").val();
update();
});
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q=" + page,
timeout: 1000,
success: function (data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
},
});
}
});
This is a simple fix. All you need to do is overwrite page in your success function as it will get the new value.
$(document).ready(function() {
var page=$("#table_page").val();
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q="+page,
timeout: 1000,
success: function(data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
page=$("#table_page").val();
},
});
}
update();
});
The problem is page is getting set before the DOM changes, the success part of the ajax call happens after the DOM changes so it can account for new elements/data

Categories