jquery ajax in codeigniter returns nothing - javascript

this is my function in controller
function show_data()
{
return " this is me ";
}
this is my view:
<html>
<head>
<title>ajax call first time</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
$.ajax({
type:'POST',
dataType: "text",
url:'elements/show_data',
success:function(res){
console.log(res);
$('#response').html(res);
},
fail:function()
{
$('#response').html("done");
}
});
});
</script>
</head>
<body>
<div class="response" id="response" ></div>
<div class="container" id="container" ></div>
</body>
</html>
the console says empty string returned why?

This is how I use $.ajax
$.ajax({
type: 'POST',
dataType: 'text',
url: 'the/url',
data: {data1: "value", data2: "value"}
}).done(function(res) {
console.log(res);
});
You may want to check your url elements/show_data with browser (use GET) to make sure that your controller works.

Related

AJAX callback does not see jQuery plugin's method

I'm receiving a data from AJAX response and I'm trying to update a jQuery plugin with that value in the success callback:
$.ajax({
url: '/some/url',
type: 'GET',
dataType: 'json',
success: (data) => {
$(".my-rating").starRating('setRating', data.rating);
}
});
I'm using the star-rating-svg plugin to show ratigns (http://nashio.github.io/star-rating-svg/demo/). The problem is that I'm having an error:
Uncaught TypeError: $(...).starRating is not a function
However, this function works perfectly when is called outside AJAX callback. Do you know how to deal with this?
EDIT:
Larger piece of my code:
show.ejs
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/star-svg/src/jquery.star-rating-svg.js"></script>
<link rel="stylesheet" type="text/css" href="/star-svg/src/css/star-rating-svg.css">
</head>
<body>
<div class="my-rating mb-1"></div>
<script>
function getUserRating() {
$.ajax({
url: '/some/url/rating',
type: 'GET',
dataType: 'json',
success: () => {
$(".my-rating").starRating('setRating', data.rating);
}
});
}
function webpageReady() {
if($(".my-rating").is(':visible')) {
$(".my-rating").starRating({
starSize: 20,
disableAfterRate: false,
callback: function(currentRating, $el){
$.ajax({
url: '/some/url/setRating',
type: 'POST',
data: {'rating' : currentRating}
});
}
});
getUserRating();
}
}
</script>
<script type="text/javascript">webpageReady();</script>
</body>
</html>
rating.js
router.get("/some/url/rating", function (req, res) {
Rating.findOne({'author.id': req.user._id}).populate("ratings").exec(function(err, rating){
if(err){
console.log(err);
}
else{
res.send({userRating : rating});
}
});
});
I had the same question, and I figured it out like this - I use jQuery StarRatingSvg v1.2.0:
callback: function(rating, $el){
$.post(
URL,
{ rating: rating, _token : "csrf_token" }
).done(function (resp) {
$el.starRating('setRating', parseFloat(resp.rating), false);
});
}
The callback function has two parameters: rating - the value set by a user when they click the stars, and $el - the rating element.
I hope it helps someone.
Here is simple demo for this plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/star-rating-svg#3.5.0/src/jquery.star-rating-svg.js"></script>
</head>
<body>
<div class="my-rating"></div>
<script>
$(document).ready(function(){
$(".my-rating").starRating({
starSize: 25,
callback: function(currentRating, $el){
// make a server call here
}
});
});
</script>
</body>
</html>
Problem solved: In a footer there was another link to a jquery.

Hitting token error exception unexpectedly?

I am getting unexpected token error from below code and not sure which part have gone wrong
<script>
function delete(n){
alert("This is Called");
if (confirm("Are you sure?")) {
$.ajax({
url: 'functions/delete.php',
type: 'POST',
data: {id: n},
success: function(response) {
console.log(response);
alert('This Works');
}
});
} else {
}
}
</script>
Re-name your function and get rid of the <script> tag if the code is in an external script. Check out below for example:
function deleteFn() {
alert("This is Called");
if (confirm("Are you sure?")) {
alert('This Works');
//Make AJAX call here
}
}
deleteFn();
delete is reserved word in JavaScript, you need to rename "delete" function.
And I would split the code on small peaces and test them separately.
Here is a working example (https://next.plnkr.co/edit/BwG70k3cNQf9sy3A) and the same code below. It does the same as you wanted but without alerts and confirm popups, and I put different URL, it returns response:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button onclick="remove('7')">Run POST Request</button>
<div id="result"></div>
<pre id="data"></pre>
<script>
function remove(n){
$.ajax({
url: 'https://httpbin.org/post',
type: 'POST',
data: {id: n},
success: function(response) {
//console.log(response);
$('#result').html('POST request was successfull:');
$('#data').html(JSON.stringify(response, null, '\t'));
}
});
};
</script>
</body>
</html>

Undefined JS error only in IE11

I am getting this error only in IE 11. Basically a click button does not work and I am getting :
SCRIPT5009: 'search' is undefined
The calling code is:
<div>
<p><b>Surname search:</b></p>
<input id="searchBox" name="Search" placeholder="Search" type="text" value="" />
<button onclick="search()">Search</button>
<div class="fa fa-circle-o-notch fa-spin" id="spinner" style="display: none;">
</div>
</div>
This calls:
<script>
function search() {
showSpinner();
var searchString = $('#searchBox').val();
$.ajax({
type: "POST",
url: '/Search',
data: ({ name: searchString}),
dataType: 'html',
success: response => updateTable(response),
});
}
</script>
The key problem line in the calling code is:
<button onclick="search()">Search</button>
Which creates the error:
SCRIPT5009: 'search' is undefined
This works fine in Chrome, Edge, Mozilla.
Finally JQuery library:
<script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
Much thanks in advance of any help.
My solution. I am putting it here as it was derived from the many comments.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script>
window.jQuery || document.write('<script src="~/Scripts/jquery-3.3.1.min.js"><\/script>')
</script>
<script type="text/javascript">
function search() {
showSpinner();
var searchString = $('#searchBox').val();
$.ajax({
type: "POST",
url: '/Search',
data: ({ name: searchString}),
dataType: 'html',
success: updateTable
});
}
</script>
<script type="text/javascript">
$('#btnSearch').click(function () {
search();
});
</script>
So I:
1) Upgraded to latest JQuery version
2) Sorted out my Search function:
success: updateTable
3) Used JQuery correctly to handle the click event.
Thanks to all.

Computer Vision API for javascript not working[Beginner's error]

I am new to Microsoft Cognitive services and this problem seems to have an easy fix but it has spoiled my two days. I have just copied the Computer vision for javascript code and replaced my the subscription key with mine and opened the .html file in my browser it says error.
DO I have to add something in the code
Also, I have nowt provided any image in this code what's he doing without an image?
The script code is here
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
var params = {
// Request parameters
"visualFeatures": "Categories",
"details": "{string}",
"language": "en",
};
$.ajax({
url: "https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{6e07223403d94848be20af6f126fsssd}");
},
type: "POST",
// Request body
data: "{body}",
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
</script>
</body>
</html>
code and preview of error
While it's not very obvious, in any code snippet from the Cognitive Service API reference page such as this one that I suspect you were using, you must provide a value (or remove) wherever it shows {something}. Here's code with suitable values:
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var myKey = "6e07223‌​403d94848be20af6f126‌​fsssd";
var myBody = {url:"http://www.gannett-cdn.com/-mm-/2d2a8e29485ced74b7537554043aeae2e0bba202/c=0-104-5177-3029&r=x1683&c=3200x1680/local/-/media/2015/07/18/USATODAY/USATODAY/635728260394906410-AP-GOP-Trump-2016.jpg"}
$(function() {
var params = {
// Request parameters
"visualFeatures": "Categories",
"language": "en",
};
$.ajax({
url: "https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", myKey);
},
type: "POST",
// Request body
data: JSON.stringify(myBody),
})
.done(function(data) {
alert("success");
debugger;
})
.fail(function() {
alert("error");
});
});
</script>
</body>
</html>

Login Process with jQuery Ajax and PHP

Hey guys I need some help.
My problem is the error div is not displaying the content that I want it to appear in the success function of my AJAX request. I tried alerting the response and it returns true if user-name and password is correct and returns false if incorrect.
I don't know why its not working.
so this is my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" name="main-div">
<div id="error">
AA
</div>
<center>
<div name="login-div">
<h2>LOGIN PAGE</h2>
<form method="post" class="login_form">
Username: <input type="text" name="username"></br></br>
Password: <input type="password" name="password"></br></br>
<button type="submit" name="button_login" id="button_login">LOGIN</button>
</form>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$("#button_login").click(function(){
var data = $(".login_form").serialize();
$.ajax({
type: 'POST',
url: 'login_process.php',
data: data,
beforeSend: function(){
alert(data);
},
success : function(response){
//alert(response);
if(response=="true"){
$("#error").html("CORRECT USERNAME AND PASSWORD")
//window.location="home.php";
}else{
$("#error").html('<a>WRONG</a>');
});
}
}
});
});
});
</script>
</body>
</html>
Thanks in advance
There is an extra closing bracket in the script what you wrote. Try to open the page in the chrome and open the developers console to see the syntax error.
Login.html:44 Uncaught SyntaxError: Unexpected token )
I corrected the syntax as below
$(document).ready(function(){
$("#button_login").click(function(e){
e.preventDefault();
var data = $(".login_form").serialize();
$.ajax({
type: 'POST',
url: 'login_process.php',
data: data,
beforeSend: function(){
alert(data);
},
success : function(response){
//alert(response);
if(response=="true"){
$("#error").html("CORRECT USERNAME AND PASSWORD")
//window.location="home.php";
}else{
$("#error").html('<a>WRONG</a>');
}
},
error : function(response) {
$("#error").html('error'+ error);
}
});
});
});

Categories