I have a PHP page with a table. Some rows may have a clickable .ggcam "td" element.
This is the jQuery code:
$(".ggcam").click(function(){
$('#campagne').load(document.URL + ' #campagne');
var id = $(this).attr('id');
$('.loader').show();
$.ajax({
type: "POST",
url: "gestione_commesse/redirect.php",
data: {'tag': id},
success: function(whatigot) {
},
complete: function(){
$('.loader').fadeOut();
}
});
});
The code in "redirect.php" is the following:
session_start();
$_SESSION['tag']=array();
unset($_SESSION['tag']);
$_SESSION['tag']=$_POST['tag'];
This code works well, the value is stored correctly in $_SESSION variable.
The problem is that it does not always work. I don't understand, the array variable $ _SESSION is not updated on every click, and I think it's a problem of the ajax call.
Thank you for help!
I think I found the solution.
I moved the load() call after the ajax call.
It seems to work, thanks for support.
Related
So, I have this problem. I am using a plugin named jRating, it is esentially a rating system in jquery. My problem is, that onClick, the ajax request fires twice.
After searching a lot, I tried those things:
I checked and double checked that the $(document).ready(function(){} and the jQuery shortcut $(function() {}); is not twice in the page.
I also checked that the id of the call is unique.
So, here is my code:
jQuery:
$("#rating").jRating({
step:true,
length : 5,
canRateAgain : true,
nbRates : 3,
onClick : function(element,rate) {
var data = (rate, 1);
$.ajax({
url: 'application/index/rate',
type: 'POST',
dataType: 'x-www-form-urlencoded',
async:false,
contentType: 'application/x-www-form-urlencoded',
data: rate,
success: function () {
console.log('SUBMIT WORKS');
},
error: function () {
console.log('There is error while submit');
}
});
}
});
pHTML:
<div id="rating" data-average="<?=$average //note that this is working everytime!?>" data-id="1"></div>
Thanks for any inputs!
EDIT: JsFiddle: http://jsfiddle.net/Je79U/ ;
To recreate the problem, click run, then go to console/network, clear all contents, then click anywhere on the yellow/orange bar, to rate, and see what happens. Thanks again for your time!
with reference of http://demos.myjqueryplugins.com/jrating/ , already jRating will work as ajax. So, that it takes ajax running twice
Please check their demo website clearly.
In that once you rate it will update the records to http://demos.myjqueryplugins.com/jrating/php/jRating.php
and use the following version of jRating
https://github.com/alpixel/jRating
I have been working on this for a while and posted several related topics about it, but this is slightly different question. I have the following AJAX code with some html forms below it with in #container and .myselect is the class of a drop-down box. When I change the value in the box I want to be able to then use that value on other fields below the select. The AJAX code kinda works in that the alert shows the right value when changed but as you can see I have tried lots of success functions but no luck. The closest is
$('#reloadtest').html(data); which will show the value in my PHP and every time I change the value from then on it will change alot, but it reloads the page within the container.
Basically I want to know how I can reload the data but not the whole html/page so I can use the value of the drop down in my PHP.
$(document).ready(function(){
$('#container').on( 'change', '.myselect', function() {
var orderidVal = $(this).val();
alert(orderidVal);
$.ajax({
type: "POST",
data: { orderidType : orderidVal },
success: function(data) {
//$('#container').reload('#container', function() {});
//$('#quoteselect').reload('#quoteselect', function() {});
//$('#container').load('orders.php #container', function() {});
//$('#quoteselect').load('orders.php #quoteselect', function() {});
//$('#testreload').reload('#testreload', function() {});
//location.href = "test2.php"
$('#reloadtest').html(data); //this allows me to use the variable but reloads the whole page within the page
}
})
});
});
If you are doing an ajax-request you have to allocate an URL where to send the request.
If you don't Request anything jQuery reloads the page. As you can see here in the jquery-api-docu the URL is the very first and most important parameter of the request.
$.ajax({
url: "/url/to/the/php/script.php",
success: function(data){
//do something ... with data parameter
}
});
would be the simple way of using ajax-request with javascript.
use two divs - one in which you can put ajax response and in other the remaining HTML code
it reloads your page because you have not specified what page to request.
use the code below and replace /path/to/script to your actual script path
$(document).ready(function(){
$('#container').on( 'change', '.myselect', function() {
var orderidVal = $(this).val();
alert(orderidVal);
$.ajax({
cache: false,
async: true,
type: "POST",
url: '/path/to/script',
data: { 'orderidType' : orderidVal },
success: function(data) {
$('#reloadtest').html(data);
}
});
});
});
i have a file which echoes out data from a database.
I wish to have a load more button which appends this file so that it will keep loading the rest of the results.
The php page works fine but need help with the jquery...
have used this else where for a json return but dont think this is needed for this.
So i am trying this:
$(document).ready(function(){
$("#loadmore").click(function () {
$("#content").append('includes/loadmorebuilds.php');
});
});
In essence, this works but it appends 'includes/loadmorebuilds.php' as just that. I simply appends those words and not the file.
Any help on this?
Many thanks!
You could use $.ajax to get content from file to be appended into DOM. One important thing is that you should use Relative PATH to your web root on url parameter in $.ajax
So it will become like this
$('#loadmore').click(function() {
$.ajax({
url: '/relative/path/to/your/script',
success: function(html) {
$("#content").append(html);
}
});
});
And make sure you should be able to access your script on http://www.example.com/relative/path/to/your/script
You have two options:
$('#content').load('includes/loadmorebuilds.php');
Which will replace the content of #content with the new html.
Or this:
$.ajax({
url: 'includes/loadmorebuilds.php'
}).done(function(data) {
$('#content').append(data);
});
Which will append the new data.
use $.ajax
$(document).ready(function(){
$(".loader").click(function(){
$.ajax({
url:"index.php",
dataType:"html",
type:'POST',
beforeSend: function(){
},
success:function(result){
$(".content").append(result);
},
});
});
});
I want to show the user a "loader" before and during the ajax call. Here's the code (simplified version...)
$(document).ready(function() {
$("#btn").click(function(){
$("#log").html("loading ajax call...");
anotherFunc();
});
});
function anotherFunc(){
$.ajax({
type: "GET",
url: correct_url,
data: data_to_send,
dataType: "jsonp",
success: function(data){
$("#log").html("new html");
}
})
}
the problem is that "loading ajax call..." never appears. I only see "new html" displayed. the singles ajax #log modification call work perfectly alone (without the other)
is there another way to do?
what am I doing wrong?
ps. I also tryed to write in another id (#log2) with the same result.
Most likely everything works just fine, but the AJAX call returns very quickly (especially if you are testing locally). To see if that is the case, just do the following:
$(document).ready(function() {
$("#btn").click(function(){
$("#log").html("loading ajax call...");
setTimeout(function(){anotherFunc();},2000);
});
});
I know questions about loading XML into a JS variable have been posted here many times, but I didn't find a solution that would work. In my script I declare a variable before an ajax request, and then add the result to the variable. This works only if I add alert to the script:
var myDB;
$.ajax({
type: 'GET',
url: 'db.xml',
dataType: 'xml',
success: function (xml){
myDB = xml;
}
});
alert(myDB); //returns: undefined
$(myDB).find('item').each(function (){
var question = $(this).find('question').text();
alert(question);
});
The above code works only with the alert. When I delete the alert, the code doesn't work. How can I make this work without the alert?
You need to add your code to success handler for doing that:
var myDB;
$.ajax({
type: 'GET',
url: 'db.xml',
dataType: 'xml',
success: function (xml){
$(myDB).find('item').each(function (){
var question = $(this).find('question').text();
});
}
});
An ajax request is asynchronous. That means, the function you gave in the success option is excuted somwhen later.
After you've started the request, you're variable is still empty. Only if you wait long enough to confirm the blocking alert, the variable will have been loaded.
You will need to add the iteration to the success function, where the xml data is certainly available.