Calling a PHP function with parameters form URL via Ajax - javascript

Please have a look at the following code
....The Javascript code in ctp file...
<script type="text/javascript">
$(document).ready(function(){
$( ".btn-danger" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".btn-success" ).click(function(){
console.log("Red Button");
idOfButton = $(this).attr('id');
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
increment(idOfButton);
alert(idOfButton);
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".xy" ).click(function(){
$(this).find("#enside1").toggle();
$(this).find("#ptside1").toggle();
console.log(this);
});
function xxx(id)
{
alert(id);
}
function increment(uniqueWord)
{
$.ajax({
url: "http://localhost/cake2/flip2/correct",
data: {word: uniqueWord}
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
}
});
</script>
Please consider this function
function increment(uniqueWord)
{
$.ajax({
url: "http://localhost/cake2/flip2/correct",
data: {word: uniqueWord}
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
}
Here I am trying to call a method in a PHP file. That method contains a parameter.
public function correct($word)
{
$this->Flip2->correctAnswer(89,$word);
}
However there is an issue in passing the parameter values to the PHP method. It simply do not work. If I remove the parameters from "all" the places and just call the url: "http://localhost/cake2/flip2/correct", this works fine. What I have done wrong when passing the values to the PHP method via the Ajax call?

You can just pass the word in the URL:
function increment(uniqueWord)
{
$.ajax({
url: "http://localhost/cake2/flip2/correct/" + uniqueWord,
//...

As Another solution you can change ajax call to be post request and get data in your controller from $this->request->data
$.ajax({
url: "http://localhost/cake2/flip2/correct",
data: {word: uniqueWord},
type: 'post'
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
Controller will be
public function correct()
{
$this->Flip2->correctAnswer(89,$this->request->data['word']);
}

Related

multiple ajax calls with codeigniter

excuse me sir/ma'am
i'm new to ajax, i'm trying to do multiple ajax call in one function to dislay info after an option in dropdown is selected and it goes into separate field ,something like
a goes into description field, b goes into schedule field
i already got the function for a 1 call but when i'm trying to do 2 it's just doesn't work
here is the code that i made for multiple call
<script>
// multiple ajax calls code that i make
// #paket is the dropdown id
$.when(
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
$.ajax({
url:'bttdev3/tour/s1',
method: "POST",
data: {
sel_op:opt_sel
}
}),
$.ajax({
url:'bttdev3/tour/s2',
method: "POST"
data: {
sel_op:opt_sel
}
});
});
);
.then(function(a,b){
$.('#detail').html(a);
$.('#jadwal').html(b);
});
</script>
here is the previous code that works for 1 data call
<script>
1 call function
(function(){
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
var baseurl = "www.dev3.gatra.com/bttdev3";
$.ajax({
method:"POST",
url: '/bttdev3/tour/s1',
// url: "/bttdev3/tour/" + s1,
data:{
sel_op:opt_sel
}
}).done(function(a){
$('#detail').html(a);
}).fail(function(){
alert("gagal memanggil data.");
});
});
});
</script>
any help would be appreciated
try this one
$(document).on('change', '#packet', function(){
_ajax('bttdev3/tour/s1', 'POST', {sel_op: $(this).val()}, function(res){
$('#detail').html(res);
});
_ajax('bttdev3/tour/s2', 'POST', {sel_op: $(this).val()}, function(res){
$('#jadwal').html(res);
});
});
function _ajax(url, method, data, callback){
$.ajax({
method,
url,
data
}).done(function(a){
if(typeof(callback) != 'undefined'){
callback (a);
}
}).fail(function(){
alert("gagal memanggil data.");
});
}

document.getelementById("").value does not work in case of Ajax call?

I want to do search and it can search many times. when it is submitted, it will show value in textbox by using document.getelementById("").value. All work well but I added ajax for filter search, document.getelementById("").value couldn't work.
$(document).ready(function() {
$('#job_no').change(function() {
$.ajax({
type: 'POST',
data: {JOB_NO: $(this).val()},
url: 'select.php',
success: function(data) {
$('#input_na').html(data);
}
});
return false;
});
});
<script type="text/javascript">document.getElementById('input_na').value = "<?php echo $_POST['input_na'];?>";</script>
Try this:
$(document).ready(function() {
$('#job_no').change(function() {
var $this = $(this); //add this line
$.ajax({
type: 'POST',
data: {JOB_NO: $this.val()}, //change this line
url: 'select.php',
success: function(data) {
$('#input_na').html(data);
}
});
return false;
});
});
the 'this' in $.ajax(..) function will not refer to $('#job_no'), so it should be assigned to another variable "$this" for use inside the ajax function.

Set interval to ajax form

So I'm trying to send the form info to php with ajax form every second, but for some reason it doesn't want to.
Here is my latest attempt, I tried every other similar combination(like put everything in the function or just put everything into the setInterval).
$(document).ready(function() {
var ajaxCall=function() {
$("#myForm").ajaxForm(function(e) {
$.ajax({
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data) {
document.getElementById("result").innerHTML=data;
}
});
});
}
setInterval(ajaxCall,1000);
});
EDIT
Solved with M.M answer, thank you for the help!
Simply change ajaxForm to ajaxSubmit
See this (question) and this (documentation) for more information on AjaxForm vs AjaxSubmit
Essentially AjaxForm submits when the user clicks the button and AjaxSubmit does it immediately so your code should be:
$(document).ready(function()
{
var ajaxCall=function()
{
$("#myForm").ajaxSubmit(function(e)
{
$.ajax(
{
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data)
{
document.getElementById("result").innerHTML=data;
}
});
});
}
setInterval(ajaxCall,1000);
});
Update after comment explanation
$(document).ready(function(){
//live feed
var ajaxCall=function(){
$("#myForm").ajaxSubmit(function(e){
ajax_submit();
});
}
setInterval(ajaxCall,1000);
//real submit
$("#myForm").ajaxForm(function(e){
ajax_submit();
});
function ajax_submit(){//ajax_code
$.ajax({
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data) {
document.getElementById("result").innerHTML=data;
}
});
}
});
If you wish to differentiate the feed from the submit you can pass a parameter to the ajax_submit function
Getting rid of the ajaxForm() call seems to accomplish what you are trying to do:
$(document).ready(function() {
var ajaxCall = function() {
$.ajax({
type: 'post',
url: 'php1.php',
data: $("#myForm").serialize(),
success: function(data) {
document.getElementById("result").innerHTML = data;
}
});
}
setInterval(ajaxCall, 1000);
});

Updating div content after form submit without page reload

alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.
Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>
You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);

Getting variable from success function ajax

I have a variable in the success part of ajax and I want to reuse it in another function (which executed every 3 seconds), I tried to declare it global, but it does not work; Tdata is not known.
I know that $.ajax is an asynchronous function and I saw some posts similar to mine but it did not help me.
Help me please. Thank you.
This is a part of my code:
<script language='Javascript'>
var Tdata;
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
////
}
});
window.setInterval(function() {
$(window).load(function() {
$.each(Tdata, function(variable) {
/////////////
});
});
}, 3000);
</script>
Why not wait until the AJAX request has successfully returned data before starting your interval? Since any executions of the interval's function aren't going to do anything (due to no data) before that point waiting isn't going to change the way the page would function in any way.
$.ajax({
method: "GET",
url: "load-data.php",
dataType: "json"
success: function(data) {
var Tdata = data;
// do some more stuff with the response of the AJAX request
var interval = setInterval(function() {
$.each(Tdata, function(variable) {
// do something with variable
});
}, 3000);
}
});
Note that I've removed the binding of the load event to the window every time the interval runs because doing so really doesn't seem to make any sense. I've also added a dataType property with a value of json to the options object passed to $.ajax() so you don't have to parse the response as JSON yourself.
try this,
<script language='Javascript'>
var Tdata;
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
////
}
});
$(window).load(function() {
window.setInterval(function() {
$.each(Tdata, function(variable) {
/////////////
});
}, 3000);
});
</script>
Function that uses the variable from AJAX call should be called from inside AJAX success, like this:
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.each(Tdata, function(variable) {
/////////////
});
}, 3000);
}
is callback tdataAjax function ajax success method run; #param parseJSON
var tdataAjax = function(callback) {
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
var Tdata=jQuery.parseJSON(data);
setInterval(function() {
callback(Tdata);
}, 3000);
}
});
};
is Callback function #param data in tdataAjax function
tdataAjax(function(data) {
$.each(data, function(variable) {
// code
});
});
tdataAjax ++ :)
tdataAjax(function(data) {
$.each(data, function(variable) {
// cla bla
});
});

Categories