why it isn't working. Am trying to call a php file when onclick of a button occurs with some parameters. It is getting executed till alert statement in jsfile.js. After that the ajax part is not getting executed.. Help me out.. Thanks in advance..
main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jsfile.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="cart(0)"> hi </button>
<p id="disp"></p>
</body>
</html>
jsfile.js
function cart(id1)
{
var id=id1;
alert("enterd "+id);
document.getElementById("disp").innerHTML ="hi";
$.ajax({
url:"/add.php ",
type:"POST",
data:{
item_id: id,
},
success:function(response) {
//document.getElementById("total_items").value=response;
document.getElementById("disp").innerHTML =response;
},
error:function(){
alert("error");
}
});
}
add.php
<?php
if(isset($_POST['item_id']) && !empty($_POST['item_id'])){
//if(count($_POST)>0)
echo "success";
exit();
}
?>
In your jsfile.js file, please correct the following points which I have mentioned as comments on the following code.
function cart(id1)
{
var id=id1;
alert("enterd "+id);
document.getElementById("disp").innerHTML ="hi";
$.ajax({
url:"/add.php ",
method:"POST", //First change type to method here
data:{
item_id: id,
},
success:function(response) {
document.getElementById("disp").innerHTML =response;
},
error:function(){
alert("error");
}
});
}
Change it and try
type:"POST" -> method: "POST"
If your jquery version is >= 1.5 use it this way.
$.ajax({
url: "add.php",
method: "POST",
data: { item_id: id},
}).done(function(response) {
......
}).fail(function( jqXHR, textStatus ) {
......
});
Load Jquery Before your JS file.
Related
I am trying to test AJAX in CodeIgniter, with no luck so far. Please tell me where I am going wrong.
Here is my test_page.php:
<!DOCTYPE html>
<head>
<script src="<?php echo base_url();?>assets/libs/jquery/jquery-2.2.3.min.js"></script>
<script src="<?php echo base_url();?>assets/libs/jquery/jquery-2.2.3.min.js"></script>
<script src="<?php echo base_url();?>assets/libs/js-cookie/js.cookie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="btn" onclick="gethtml()">ajax Test</button>
<script type="text/javascript">
function gethtml(){
var url = "<?php echo base_url();?>home/ajax_test";
alert(""+url);
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
success: function(data){
alert("ajax success");
}
});
}
</script>
</body>
</html>
Here is my function in controller:
public function ajax_test() {
echo "return from ajax";
}
This Type of AJAX Call dataType is not required
Remove
dataType: 'json'
Use like
<script type="text/javascript">
function gethtml(){
var url = "<?php echo base_url();?>home/ajax_test";
alert(""+url);
$.ajax({
url: url,
type: 'POST',
success: function(data){
alert("ajax success");
}
});
}
</script>
You can use below mentioned solution.
<button id="btn">ajax Test</button>
$(document).ready(function(){
$('#btn').Click(function(e){
e.preventDefault();
var url = "<?php echo base_url();?>home/ajax_test";
alert(""+url);
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
success: function(data){
alert("ajax success");
}
});
});
});
Let me know if it not works for you.
Error in the above code is the response from the ajax_test() is not encoded into json. So, the error event of json is triggered and the code inside success is not executed.
Always make sure to send json encoded data if you are specifying dataType as json.
Try on view
<button id="btn">ajax Test</button>
<script type="text/javascript">
$('#btn').on('click', function(e) {
// e.preventDefault(); Not sure if you need it.
$.ajax({
url:"<?php echo base_url('home/ajax_test');?>",
type: 'POST',
dataType: 'json',
// data: {
// someinput: $('#someinput').val()
//},
success: function(data){
alert(data['test']);
}
});
});
</script>
On controller you can use the output class also.
public function ajax_test() {
$json['test'] = "return from ajax";
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($json));
}
I have a little problem with a test program I wrote with Javascript,Jquery and ajax.
This is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<button> Push here </button>
</body>
</html>
JS
$(document).ready(function(){
$('button').on('click',function(e){
callPage()
})
});
function callPage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
succes: function (response) {
var data = response;
console.log("hey");
console.log(data.title);
},
error: function(error){
console.log("the page was not loaded", error);
},
});
}
However if I check the network, I see that I got the request, but
I don't get the the succes, so the console does not log anything.
How is this possible?
Use .done() instead success
function callPage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
error: function(error){
console.log("the page was not loaded", error);
},
}).done(function(response) {
var data = response;
console.log("hey");
console.log(data.title);
});
}
I tested with some code here, basically the purpose of the html file code is to echo the value from the php file, depending which h3 title the user clicked.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h3 id="random1" name="random_request1">Click here to get number from php</h3>
<p id="randomnumber">Number here</p>
<h3 id="random2" name="random_request2">Click here to get string from php</h3>
<p id="randomtext">Text here</p>
<script>
$('#random1').click(function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
</script>
</body>
</html>
This is the action.php code:
<?php
if ($_POST['random_request1']) {
$random = rand();
echo $random;
}
else if ($_POST['random_request2']){
echo 'abcd';
}
?>
Unsurprisingly, php doesn't recognize the random_request1 and 2 name in $_POST[]. I think I still hasn't grasped the POST function quite well to answer this problem by myself in this case.
use just one click event
$('h3[id^="random"]').on('click',function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
data: {id : $(this).attr('id')},
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
and in your action.php
<?php
$id = $_POST['id'];
?>
You will want to have a way to differentiate between the senders. Maybe pass a parameter:
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action.php?action=random2",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
Or have them go to different endpoints:
$('#random1').click(function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action2.php",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
There are of course more methods. This might not fit what you're eventually trying to do, but it's a simple way to get started.
When i press the link the program should go to the ajax function to update the database without reloading the page.
the problem is when the link is pressed doesnt enter in the JS function (doesnt show the alert)
<a href="#" onclick="xpto2()" >Remind later</a>
<script>
function xpto2(){
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get', )
success: function(output) {
alert(output);
}
});
</script>
Fix your xpto2 function. There are syntax errors. This should be something like this.
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
Make sure jQuery is present.
Keep browser console opened for better insights.
Here's a full template to try.
updates
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
</head>
<body>
<a href="#" onclick="xpto2()" >Remind later</a>
</body>
</html>
I using this code
function testfunction(ttl){
jQuery.ajax({url:"index.php",
type: "POST",
cache : false,
data: { 'data1': ttl},
success:function(res){
//Do something
},error: function(requestObject, error, errorThrown) {
console.log(error);
}});
}
I got a error = 'error' and errorThrown = ""
This issue is only in Google chrome.
How to solve this issue ?
Following code works for me - might be problem with parameter ttl which you send via ajax call
index.php:
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script language="JavaScript">
$('document').ready(function(){
$('button').click(function() {
$.ajax({
url: "index2.php",
type: "POST",
cache: false,
data: { 'data1': $(this).attr('rel')},
success: function (res) {
console.log(res);
},
error: function (requestObject, error, errorThrown) {
console.log(error);
}
});
});
});
</script>
</head>
<body>
<button rel="test">test</button>
</body>
</html>
and index2.php
<?php
echo json_encode($_POST);