We Keep Coding

Django ajax: How to pass a jquery variable to url

I have to make an ajax call from my template.html. The view takes in an id parameter which I have obtained from the jquery part. How do I append it to my url?
Thank you
Here is the code:
<script>
..... #some codes
app_div_id = $(this).closest('div').attr('id')
var index = app_div_id.lastIndexOf("_");
var result = app_div_id.substr(index+1);
var app_id = parseInt(result);
$.ajax({
url:"{% url 'update_status' %}", #this url takes in an id param
data:{
'new_app_status':app_status,
},
success: function (response) {
},
error: function (response) {
console.log(response.errors);
},
});
});
</script>

AJAX is not working in macOS WebView

I have created a WebView for macOS app and it contains one AJAX call. The same WebView is working fine when the app calls my local URL, but when it calls the live URL, the AJAX call is not working.
$(document).ready(function () {
$('#pripolcheck').click(function () {
var pripolcheck = $('#pripolcheck').val();
var app = $('#app').val();
var user_id = $('#user_id').val();
var contact = $('#contact').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'pripolcheck1=' + pripolcheck + '&app1=' + app + '&user_id1=' + user_id;
if (pripolcheck == '') {
alert('Please Fill All Fields');
} else {
// AJAX Code To Submit Form.
$.ajax({
type: 'POST',
url: 'http://mywebsite.com/ajaxformsubmit.php',
data: dataString,
cache: false,
success: function (result) {
// alert(result);
// $(".pripol").hide();
$('.pripolcheck').prop('checked', true);
$('input.pripolcheck').attr('disabled', true);
}
});
}
return false;
});
});
My local PHP version is 7.1.8 and my live server PHP version is 5.4.

Change your function to onclick of checkbox directly,put this code in your checkbox onclick="MyFuncion",why I'm telling this is for web view we need to give exact command in exact position it's not a browser
And your AJAX call will be like below,
function myFunction()
{
var pripolcheck = $("#pripolcheck").val();
var app = $("#app").val();
var user_id = $("#user_id").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'pripolcheck1='+ pripolcheck + '&app1='+ app + '&user_id1='+ user_id;
if(pripolcheck=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxformsubmit.php",
data: dataString,
cache: false,
success: function(result){
// alert(result);
// $(".pripol").hide();
$('.pripolcheck').prop('checked', true);
$("input.pripolcheck").attr("disabled", true);
}
});
}
return false;
}

"My local PHP version is 7.1.8 and my live server PHP version is 5.4."
I think this explains everything.
However, try setting an absolute URL in your call:
url: 'ajaxformsubmit.php',
to
url: '/ajaxformsubmit.php',
Or whatever the actual path would be. Just a single slash will give you
http://wherever.com/ajaxformsubmit.php

if u use same site url plz use relative path not absolute path then its ok.
if use defrant site url plz comment me so give me new solution
PLZ try
$(document).ready(function () {
$('#pripolcheck').click(function () {
var pripolcheck = $('#pripolcheck').val();
var app = $('#app').val();
var user_id = $('#user_id').val();
var contact = $('#contact').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'pripolcheck1=' + pripolcheck + '&app1=' + app + '&user_id1=' + user_id;
if (pripolcheck == '') {
alert('Please Fill All Fields');
} else {
// AJAX Code To Submit Form.
$.ajax({
type: 'POST',
url: '/ajaxformsubmit.php',
data: dataString,
cache: false,
success: function (result) {
// alert(result);
// $(".pripol").hide();
$('.pripolcheck').prop('checked', true);
$('input.pripolcheck').attr('disabled', true);
}
});
}
return false;
});
});

jQuery Ajax GET request not working correctly

I'm trying to call an AJAX query and have had lots of trouble recently.
Im trying to call a api that I have custom made myself, it displays this when the url api/reverse/test - tset (is just uses a php function to reverse the text given in the slug3.
That function works fine, just wanted to give some back on what gets requested.
reverse.php - HTML File
<textarea id="input"></textarea>
<div id="output">
</div>
index.js - All of my jQuery and AJAX
$(document).ready(function(){
var $input = $('#input');
var $output = $('#output');
$input.on('keyup', function(){
var text = $input.val();
var url = 'http://coder.jekoder.com/api/?area=reverse&text='+text;
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
success: function(data) { var output = data; },
error: alert('fail')
}) // End of AJAX
$output.html = output;
});
});
api.php - PHP file being called
<?php
$area = $_GET['area'];
if ($area == 'reverse') {
if (isset($_GET['text']) ) $text = $_GET['text'];
else $text = 'Hello';
echo strrev($text);
}
It's then supposed to take the output variable and display that in a div but that's not the main thing that matters.
error removed - was trying to see if it fixed it

There are several issue I found:
Jquery:
var text = $('#input').val(); // if you are getting value from any inputbox - get value using .val() function
var url = 'http://localhost/test.php?data='+text; // pass data like this ?data='+text
// AJAX START
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
async: true,
success: function(data) { var output = data; alert(output)},
error: function(data) { alert('fail') }
});
In php you ca get data like this:
echo $_GET['data'];
exit;

Try this. Scope of variable output is within the success call and you are using it outside the ajax call.
$(document).ready(function()
{
var $input = $('#input');
var $output = $('#output');
$input.on('keyup', function()
{
var text = $input.val();
var url = 'http://coder.jekoder.com/api/?area=reverse&text='+text;
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
success: function(data) { var output = data; $output.html = output;},
error: alert('fail')
}) // End of AJAX
});
});

Running AJAX to retrieve logged in users is returning undefined

Hi so I am in the process of learning AJAX and have decided for a better UX on my admin system to have users online, messages, tasks updated and so on updated every 30 seconds or so depending on the load (in the code i have it set to 5 seconds for testing purposes).
The PHP file works fine and outputs the following JSON:
[{"username":"columkelly","time":"2013-12-18 14:13:55"}]
PHP
header('Content-Type: application/json');
if($_GET['function'] === "users_online"){ users_online(); }
function users_online(){
$result=mysql_query("SELECT * FROM sessions");
while($array = mysql_fetch_assoc($result)){
$dataArray[] = $array;
}
echo json_encode($dataArray);
}
The problem comes when I try to output the users that are online... The console log shows that it has picked it up but I am unable to get it to work with the users_online function with the callback. Here is the AJAX:
AJAX
var timer, delay = 5000;
timer = setInterval(function(){
val = $(this).serialize();
$(document).ready(function () {
$.when(
$.ajax({
url: "ajax.php?function=users_online",
dataType: "json",
type: "GET",
data: val,
success: function(data)
{
console.log(data);
}
}),
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: "bird",
tagmode: "any",
format: "json"
})
).then(function (users_online, images) {
$("#users_online").html('');
$.each(users_online, function(data){
$('#users_online').html(data.username +':' + data.time);
}
),
$("#dvImages").html('');
random = Math.floor((Math.random()*3)+1);
$.each(images[0].items, function (i, item) {
var img = $("<img/>");
img.attr('width', '200px');
img.attr('height', '150px');
img.attr("src", item.media.m).appendTo("#dvImages");
if (i == random) return false;
})
});
});
}, delay);
What i end up getting is 1-4 images appearing from the flicker api (used this as a test base) and undefined:undefined. I know it has to have something to do with the success (i tried putting them into a javascript array but that did not work) and the function to grab the data:
function (users_online, images) {
$("#users_online").html('');
$.each(users_online, function(data){
$('#users_online').html(data.username +':' + data.time);
}
)
Thanks for all the help so far guys. I have searched far and wide but am unable to get anything to work with this.
Colum
EDIT:
This is the finished code that worked:
var timer, delay = 5000;
var users_online = [];
timer = setInterval(function(){
val = $(this).serialize();
$(document).ready(function () {
$.when(
$.ajax({
url: "ajax.php?function=users_online",
dataType: "json",
type: "GET",
data: val,
success: function(data)
{
console.log(data);
users_online = data; // Now call and loop through users_online wherever you need
}
}),
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: "bird",
tagmode: "any",
format: "json"
})
).then(function (users_online, images) {
$("#users_online").html('');
$.each(users_online[0], function (i, item) {
$('#users_online').html(item.username +':' + item.time);
}
),
$("#dvImages").html('');
random = Math.floor((Math.random()*3)+1);
$.each(images[0].items, function (i, item) {
var img = $("<img/>");
img.attr('width', '200px');
img.attr('height', '150px');
img.attr("src", item.media.m).appendTo("#dvImages");
if (i == random) return false;
})
});
});
}, delay);

Although people would argue how optimal this solution is, it will fix the issue granted you don't overwrite it:
var timer, delay = 5000;
var global_users_online = []; // create a global array
timer = setInterval(function(){
val = $(this).serialize();
$(document).ready(function () {
$.when(
$.ajax({
url: "ajax.php?function=users_online",
dataType: "json",
type: "GET",
data: val,
success: function(data)
{
console.log(data);
global_users_online = data; // Now call and loop through global_users_online wherever you need
}
}),
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: "bird",
tagmode: "any",
format: "json"
})
)

jquery autocomplete not populating unless entered text is in the first result

Im having an issue with jquery autocomplete plugin. the textbox im using wont populate the results of autocomplete until i enter a value that is in the first entry of my data. After it populates that, then the autocomplete works how its supposed to.
$(document).ready(function () {
});
function textChange() {
var callback = function (request, response) {
var searchText = request.item;
var searchField = $(".ddlist > option:selected").attr("value");
$.ajax({
type: "GET",
dataType: "text",
url: "SearchCallback.aspx?searchText=" + searchText + "&searchField=" + searchField,
success: function (data) {
var splitData = data.split(",");
response(splitData);
}
});
}
$(".searchTextBox").autocomplete({
source: callback,
autoFill: true
})
}
after playing around with it i got the following code to work, before i was using an onkeyup event in the text box but i guess i didnt need it. i dont know if this is efficient but it is working correctly now.
$(document).ready(function () {
$(".searchTextBox").autocomplete({
source: callback,
autoFill: true
});
});
var callback = function (request, response) {
var searchText = request.term;
var searchField = $(".ddlist > option:selected").attr("value");
$.ajax({
type: "GET",
dataType: "text",
url: "SearchCallback.aspx?searchText=" + searchText + "&searchField=" + searchField,
success: function (data) {
var splitData = data.split(",");
response(splitData);
}
});
}

You have to use a callback as the source option when you initialize the autocomplete (in your example you initialize the autocomplete every time a key is being pressed):
var callback = function(request, response) {
var searchText = request.item;
// Set searchField somehow here
$.ajax({
type: "GET",
dataType: "text",
url: "SearchCallback.aspx?searchText=" + searchText + "&searchField=" + searchField,
success: function (data)
{
var splitData = data.split(",");
response(splitData);
});
});
};
$( ".searchTextBox" ).autocomplete({
source: callback,
autoFill: true
});
There are some more examples and a more detailed description in the documentation.