I'm trying the tutorial from infotuts here:
http://www.infotuts.com/ajax-table-add-edit-delete-rows-dynamically-jquery-php/
And there's a javascript like this:
$(function(){
$.ajax({
url:"DbManipulate.php",
type:"POST",
data:"actionfunction=showData",
cache: false,
success: function(response){
$('#demoajax').html(response);
createInput();
}
});
Now I want to add a parameter so that the line:
url:"DbManipulate.php" becomes url:"DbManipulate.php?q=[some value]
I tried to alter the script like this:
var cat=2;
$(function(){
$.ajax({
url:"DbManipulate.php?q="+cat.val(),
type:"POST",
data:"actionfunction=showData",
cache: false,
success: function(response){
$('#demoajax').html(response);
createInput();
}
});
But it doesn't work. The variable cat never gets into the function. How to pass the variable "cat" so that the DbManipulate.php file receives the $q variable and I can use it using $_GET?
Thank you
Try simply this way to sent your data variable(cat) using GET Method
var cat=2;
$(function(){
$.ajax({
url:"DbManipulate.php",
type:"GET",
data:{actionfunction:showData,cat:cat},
cache: false,
success: function(response){
console.log(response);
$('#demoajax').html(response);
createInput();
}
});
// in DbManipulate.php, try to catch cat using $_GET like this
$cat=$_GET['cat'];
//do further processing
EDIT
cat=2;
url="DbManipulate.php";
function yourFunc(cat,url){
$.ajax({
type: "GET",
url: url+'?q='+cat,
dataType: "json",
cache: false,
success: function (response) {
$('#demoajax').html(response);
createInput();
}
});
}
//in DbManipulate.php
$cat=$_GET['q'];
More Info:http://api.jquery.com/jquery.ajax/
Related
Once again I've been beating my head against the wall, trying to pull this part of returned data from ajax to a variable outside the function.
When I return the value it always comes up undefined when I alert() inside it shows the proper values.
function getItemInfo(itemHashPass) {
$.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
success: function(data){
return data.Response.data.inventoryItem.itemName;
}
});
}
I've also tried
function getItemInfo(itemHashPass) {
var tmp = null;
$.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
success: function(data){
tmp = data.Response.data.inventoryItem.itemName;
}
});
return tmp;
}
Like Jonathan said you should write your business logic in the callback or you can try Deferred syntax. In this case it will looks like
function yourBusinnesLogicFunction() {
...
getItemInfo("password_hash_value").done(
function(data){
alert(data.Response.data.inventoryItem.itemName);
}
)
}
function getItemInfo(itemHashPass) {
var tmp = null;
return $.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
})
}
This is what I am trying to do. On a home page.. say /home.jsp, a user clicks on a link. I read value of the link and on the basis of which I call a RESTful resource which in turn manipulates database and returns a response. Interaction with REST as expected happens with use of JavaScript. I have been able to get information from REST resource but now I want to send that data to another JSP.. say /info.jsp. I am unable to do this.
I was trying to make another ajax call within success function of parent Ajax call but nothing is happening. For example:
function dealInfo(aparameter){
var requestData = {
"dataType": "json",
"type" : "GET",
"url" : REST resource URL+aparameter,
};
var request = $.ajax(requestData);
request.success(function(data){
alert(something from data); //this is a success
//I cannot get into the below AJAX call
$.ajax({
"type": "post",
"url": "info.jsp"
success: function(data){
alert("here");
("#someDiv").html(data[0].deviceModel);
}
});
How do I go about achieving this? Should I use some other approach rather than two Ajax calls? Any help is appreciated. Thank You.
You can use the following function:
function dealInfo(aparameter) {
$.ajax({
url: 'thePage.jsp',
type: "GET",
cache: false,
dataType: 'json',
data: {'aparameter': aparameter},
success: function (data) {
alert(data); //or you can use console.log(data);
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': data},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
});
}
Or make the AJAX call synchronous:
function dealInfo(aparameter) {
var request = $.ajax({
async: false, //It's very important
cache: false,
url: 'thePage.jsp',
type: "GET",
dataType: 'json',
data: {'aparameter': aparameter}
}).responseText;
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': request},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
In this way I'm using.
"type": "post" instead of type: 'post'
Maybe it will help. Try it please. For Example;
$.ajax({
url: "yourURL",
type: 'GET',
data: form_data,
success: function (data) {
...
}
});
In the success function I want to call a function. The problem is that ajax does not fire, so the data is never triggered and display. Here is my ajax call with a javascript function call in the success function.
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
window.location = "api/home.php";
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: handleData
});
}
function handleData(data) {
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
}
I cant figure out why the ajax in the retrieveUserBlogData() function is not being triggered.
Any help would be appreciated Thanks.
Even if the AJAX succeeds, you are redirecting the browser to a different page after the first AJAX request:
window.location = "api/home.php";
So I would suggest removing that.
Try the following code for redirecting to another window
window.location.assign(URL);
then it may work.
Try it like this
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: function(data){
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
window.location = "api/home.php";
}
});
}
Here I am using ajax call to get the json object from controller.
<script>
$(document).ready(function(){
$.ajax({
cache: false,
type: "GET",
url: "userid_12345.json",
dataType: 'json',
success: function(data){
somemethod();
},
error:function(){
alert("Sorry!");
}
});
});
</script>
Here, this userid_12345.json file will be in same path.
There will be multiple json files will be there based on the userid like userid_12345.json, userid_22345.json, userid_55345.json.
So, I need to give dynamic URL's to get the .json file from the path.
something like this.. userid_?.json. ? will replace the userid
How to achieve this?
Like this:
<script>
var myDynUrl = "http://wherever/userid_" + dynamicValue + ".json"
$(document).ready(function(){
$.ajax({
cache: false,
type: "GET",
url: myDynUrl,
dataType: 'json',
success: function(data){
somemethod();
},
error:function(){
alert("Sorry!");
}
});
});
</script>
just add a variable (outside the $.ajax request) that cantains the user id
var myUserId = "12345"; than in the url url: "userid_" + myUserId + ".json",
The .each() functions inside the .click() are not running. I do not know how to structure them to make it syntactically correct so jQuery will recognize and run them.
I tried tacking them on before the closing }); but I either didn't do it right or that isn't how it's done. I tried Googling but other than my topic title I was at a loss for what to search. I did try jquery function inside function but that turned out to be a lost cause.
EDIT: I have managed to get the first one to fire properly (//POST specials) however, the second one still isn't working. I even tried to put the extras POST inside the .ajax() of the specials and it didn't work.
$('.class').find('#button').click(function() {
//all kinds of variables here
var dataString = {//variables:variables}
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/reserve.php",
data: dataString,
cache: false,
success: function(html)
{
//POST specials
$('#specialscheck input:checked').each(function() {
var reservation = $('#reservation').val();
var special = parseInt($(this).attr('id'));
dataString = {reservation:reservation, special:special};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/insert_specials.php",
data: dataString,
cache: false,
success: function(html)
{
//$('.unitinfolist').html(html);
}
});
});
//POST extras
$('#extrascheck input:checked').each(function() {
var reservation = $('#reservation').val();
var extra = parseInt($(this).attr('id'));
dataString = {reservation:reservation, extra:extra};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/insert_extras.php",
data: dataString,
cache: false,
success: function(html)
{
//$('.unitinfolist').html(html);
}
});
});
}
});
});
You should move the .each up into the success function of the jquery post, or set its async: false, to follow this pattern.
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType,
async:false
});