Calling Ajax request function in href - javascript

I have an href in an html page and i have an AJAX request in a method in a javascript file.
When clicking on href i want to call the JS function and I am treating the response to add it to the second html page which will appear
function miniReport(){
alert('TEST');
var client_account_number = localStorage.getItem("numb");
var request = $.ajax({
url: server_url + '/ws_report',
timeout:30000,
type: "POST",
data: {client_language: client_language, PIN_code:pin,client_phone:number}
});
request.done(function(msg) {
//alert(JSON.stringify(msg));
});
if (msg.ws_resultat.result_ok==true)
{
alert('success!');
window.open("account_details.html");
}
request.error(function(jqXHR, textStatus)
{
//MESSAGE
});
}
I tried with , and also to write the function with $('#idOfHref').click(function(){}); not working.
All I can see is the alert TEST and then nothing happens. I checked several posts here but nothing works for me.

Function can be corrected as,
function miniReport(){
alert('TEST');
var client_account_number = localStorage.getItem("numb");
$.ajax({
url: server_url + '/ws_report',
timeout:30000,
type: "POST",
data: {"client_language": client_language, "PIN_code":pin,"client_phone":number},
success : function(msg) {
//alert(JSON.stringify(msg));
if (msg.ws_resultat.result_ok == true)
{
alert('success!');
window.open("account_details.html");
}
},
error: function(jqXHR, textStatus)
{
alert('Error Occured'); //MESSAGE
}
}
});
1. No need to assign ajax call to a variable,
2. Your further work should be in Success part of AJAX request, as shown above.

It's a bad practice use an onclick() so the proper way to do this is:
Fiddle
$(document).ready(function(){
$('#mylink').on('click', function(){
alert('onclick is working.');
miniReport(); //Your function
});
});
function miniReport(){
var client_account_number = localStorage.getItem('numb');
$.ajax({
url: server_url + '/ws_report',
timeout:30000,
type: "POST",
data: {
'client_language': client_language,
'PIN_code': pin,
'client_phone': number
},
success: function(msg){
if (msg.ws_resultat.result_ok==true)
{
alert('success!');
window.open("account_details.html");
}
},
error: function(jqXHR, textStatus)
{
//Manage your error.
}
});
}
Also you have some mistakes in your ajax request. So I hope it's helps.

Rectified version of your code with document .ready
$(document).ready(function(){
$("#hrefid").click(function(){ // your anchor tag id if not assign any id
var client_account_number = localStorage.getItem("numb");
$.ajax({
url: server_url + '/ws_report',
timeout:30000,
type: "POST",
data:{"client_language":client_language,"PIN_code":pin,"client_phone":number},
success : function(msg) {
if (msg.ws_resultat.result_ok == true)
{
window.open("account_details.html");
}
else
{
alert('some thing went wrong, plz try again');
}
}
}
});
});

Related

Calling an AJAX function to a PHP function script in a REST (Paypal) section, works in jQuery not in REST

I'm in a bit of braiunfreeze here, puzzling for hours.
In a Paypal REST success section, i am trying to call a function. Before I moved it to the REST section I tested with a regular button onclick event. Worked fine.
Here the code:
...
onAuthorize: function(data, actions) {
return actions.payment.execute()
.then(function() {
// window.alert('Payment Complete!');
$.ajax({
type: "POST",
url: 'functions.php',
//dataType: "json",
data: {cuf_credits: '<?php echo $cuf_credits; ?>'},
success: function(data){
console.log(data);
$("#output").text("Thanks for buying " + data.cuf_credits + " credits");
}
});
// Show a thank-you note
document.querySelector('#paypal-button-container').style.display = 'none';
document.querySelector('#thanks').style.display = 'block';
document.querySelector('#orderdetails').style.display = 'none';
});
}
...
The query selectors are filled in fine, so is some basic text in the jQuery success section They return "undefined" though, but that is fine, I'm just trying to SEND, not GET back data.
The functions inside the functions.php are not executed, but when I use it in this code, it is:
var testme = document.getElementById('test');
testme.onclick = function () {
console.log('Test Started');
$.ajax({
type: "POST",
url: 'functions.php',
data: {cuf_credits: '<?php echo $cuf_credits; ?>'},
success: function(data){
console.log(data);
}
});
function error(err) {
console.log('Not Closed!');
}
};
If anybody could point me back in the right direction, that'd be awesome!
Let's try some debugging...
Modify your AJAX block like so:
...
onAuthorize: function(data, actions) {
return actions.payment.execute()
.then(function() {
// window.alert('Payment Complete!');
//check to make sure your code is getting this far
////////start debug
console.log("Calling AJAX...");
////////end debug
$.ajax({
type: "POST",
url: 'functions.php',
//dataType: "json",
data: {cuf_credits: '<?php echo $cuf_credits; ?>'},
success: function(data){
console.log(data);
$("#output").text("Thanks for buying " + data.cuf_credits + " credits");
}
//add a 'complete' function to get the status of the call
////////start debug
complete: function(obj, textStatus){
console.log("AJAX Status: " + textStatus);
}
////////end debug
});
// Show a thank-you note
document.querySelector('#paypal-button-container').style.display = 'none';
document.querySelector('#thanks').style.display = 'block';
document.querySelector('#orderdetails').style.display = 'none';
});
}
...
Let me know what your console log looks like after trying this...
I tried hardcoding the variables and noticed they work fine then. Sorry for the mishap, seems to work okay after a couple hours of not looking at it and taking another approach. Again, I apologize.

I am not able to clear me textare value after the ajax is submited successful

$(document).on('click','#commentsubmitimage',function(e) {
console.log("beni");
e.preventDefault();
var content =$('#commenttext').val();
console.log(content);
var imageid = $('#imagecomid').val();
$.ajax({
type: 'POST',
url: "/user/postcoment/" + imageid,
data:{
contenta:content
},
success: function(data) {
// have try this
document.getElementById(commenttext).innerHTML = '';
// have try this
$('#commenttext').val('');
},
error: function(data) {
console.log(data);
}
});
});
I want to clear my textareaa with id ="commenttext" i have try all the methods and it doesnt happen nothing any suggest ?
if your success call back working correctly then write
success: function(data) {
alert("working");
$("#commenttext").val("");

jQuery AJAX function on success not working

Having an issue. I have two different buttons included with each image displayed. One is remove, the other is assign as "main".
Remove works. It hides the image, deletes the file, and the MySQL row.
Assign Main sort of works. It updates the row in the database changing "main" value to 1, as it should, however, it should also alert(), but it does not.
<script>
$(document).ready(function() {
$(".remove_image").click(function() {
var image_id = $(this).attr('id');
$.ajax({
type:"post",
url:"imagecontrol.php",
data: { image_id:image_id,
image_remove:1},
success: function(response) {
$('#image_'+image_id).fadeOut(400);
showUploader();
}
})
})
});
$(document).ready(function() {
$(".assign_main").click(function() {
var assign_this_id = $(this).attr('id');
$.ajax({
type:"post",
url:"imagecontrol.php",
data: { assign_this_id:assign_this_id,
image_assign:1},
success: function(response) {
alert("Success");
}
})
})
});
</script>
The success method is only called when a HTTP 200 or HTTP 304 is returned, therefore you may need to double check to see if this is actually the case.
This can be done in the ‘Inspector’ panel in most modern web browsers, usually under the ‘Network’ tab.
You can also add a error: function() {} event handler to catch any HTTP 4xx / 5xx codes.
Try and alert the error which for sure is there:
$(document).ready(function() {
$(".assign_main").click(function() {
var assign_this_id = $(this).attr('id');
$.ajax({
type:"post",
url:"imagecontrol.php",
data: { assign_this_id:assign_this_id,
image_assign:1},
success: function(response) {
alert("Success");
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
})
})
});
This will show you if there is something wrong in your PHP code
Use done() instead of it :
$.ajax({
type: "post",
url: "imagecontrol.php",
data: {
image_id: image_id,
image_remove: 1
}
}).done(function(response) {
$('#image_' + image_id).fadeOut(400);
showUploader();
);

ajax not called..even alerts are not working

i am writing this code in my html page to hide one id in that page..alerts are also not working..method is not called
*<script>
alert("yo");
$(function checkUsertype(email_id)
{
alert("yup")
var usertype = $("#txtusertype").val();
$.ajax({
alert("hide")
url: 'rest/search/userType?email_id='+email_id,
type : "GET",
datatype : 'json',
cache : false,
success : function(data)
{
if(usertype=='webuser')
{
$("#themer").hide();
}
},
error : function(xhr, data, statusText,errorThrown)
{
}
});
})
alert("yo");
<script/>*
This is the problem.
$.ajax({
alert("hide")
You're trying to alert inside the ajax which is Syntax error. Try removing the alert inside ajax and it should work.
You can use alert in success, error callbacks as follow:
$(function checkUsertype(email_id) {
var usertype = $("#txtusertype").val();
$.ajax({
url: 'rest/search/userType?email_id=' + email_id,
type: "GET",
datatype: 'json',
cache: false,
success: function(data) {
alert('In Success'); // Use it here
console.log(data); // Log the response
if (usertype == 'webuser') {
$("#themer").hide();
}
},
error: function(xhr, data, statusText, errorThrown) {
alert('In Error'); // Use it here
console.log(errorThrown); // Log the error
}
});
});

missing } after property list in my ajax method///

function LoadAdvListPage() {
$.ajax({
type: 'post',
url: <%= generatecharts %> ,
data: {
},
success: function (data) {
alert("success");
}
});
}
$(document).ready(function () {
LoadAdvListPage();
});
Above is my java script function which calls the Ajax method but don't know some how its throwing error like missing } after property list
can anybody guide me whts the problem?
I don't know if something is above code you posted but here is an extra }
$.ajax({
type : 'post',
url : <%=generatecharts%>,
data : {
},
success : function(data) {
alert("success");
}
});
} <------ this one you don't need if you don't have opening { somewhere up
Edit:
So there is opening { above. Try doing like #Yuriy Rozhovetskiy wrote in comment, it's url param so for sure it shouldn't be json, but "" are still needed .
you should try thisL
$(document).ready(function(){
LoadAdvListPage();
function LoadAdvListPage() {
$.ajax({
type : 'post',
url : <%=generatecharts%>,
data : {
},
success : function(data) {
alert("success");
}
});
};
});

Categories

Resources