We Keep Coding

What is the syntax to pass a query in the ajax url using Django

I'm opening a modal with ajax, but I'm having a problem because I need to access a url on my site that needs a query
<script>
document.getElementById('myBtn2').onclick = function(){
$.ajax({
url:"{% url 'add_data' %}?filter=crew",
type:'GET',
success: function(data){
$('#modal-content2').html(data);
}
});
}
</script>
I can't access url with the query, just the url alone. for example:
url:"{% url 'index' %}"
But if I put a query in the url it still doesn't work. I think the syntax is wrong and I can't figure out what it looks like.
url:"{% url 'add_dados' %}?filter=crew" --> doesn't work
Any suggests?

You pass the querystring as dictionary when making an AJAX request:
document.getElementById('myBtn2').onclick = function(){
$.ajax({
url:"{% url 'add_data' %}",
type:'GET',
data: {
filter: "crew"
},
success: function(data){
$('#modal-content2').html(data);
}
});
}

URL jQuery ajax

I would want to post data to my "mail.py" script. But I don't know the URL to that file.
My jQuery AJAX code and this javascript file is placed in
RKProjects/scripts_js/contactform.js
My python script is placed in
RKProjects/scripts_js/mail.py
Here is my jQuery ajax code (without the URL)
var toPost = {
voornaamPost: document.getElementById('fnameInput').value,
achternaamPost: document.getElementById('lnameInput').value,
gsmPost: document.getElementById('gsmInput').value,
mailPost: document.getElementById('emailInput').value,
berichtPost: document.getElementById('berichtInput').value
};
var jsonToPost = JSON.stringify(toPost);
$.ajax({
type: 'POST',
url:'',
data: toPost,
success: function(){
alert('succes')
},
error: function (){
alert('error')
}
})

You have to specify the URL where to send the request to, otherwise it will point to the URL of the page you are on.
You have the following options:
$.ajax({
url: 'http://example.com/path/mail.py', // absolute
});
$.ajax({
url: '/path/mail.py', // relative to root
});
If you add the URL without the first "/" it will just append whatever you have to the URL of the page you are on.

access django urls from javascript

url(r'^(?P<code>[-\w]+)/$',views.Listing.as_view(),name='stat_details'),
How can I access this django url from my javascript file where I am sending an ajax call to this url:
/mycode/
$(document).ready(function(){
var url = {% url stat_details code='abc' %}.replace('abc', 'mycode');
alert(url);
$.ajax({
url: url,
success:function(result){
populateTable(result.data.m_data);
},
error:function(xhr){
alert("Fail"+ xhr.status+ " "+ xhr.responseText);
}
});
});
This doesn't work.Can someone help me in correcting this.
Thanks

Firstly,to avoid any confusion,update your URL as :
url(r'^stat_details/(?P<code>[-\w]+)/$',views.Listing.as_view(),name='stat_details'),
And then render your url just as a string like this :
<script>
$(document).ready(function(){
var code = your_code;
var url = "/stat_details/"+ code;
alert(url);
$.ajax({
url: url,
success:function(result){
populateTable(result.data.m_data);
},
error:function(xhr){
alert("Fail"+ xhr.status+ " "+ xhr.responseText);
}
});
});
</script>
You don't need to complicate the URL request process and please don't forget the first / in var url = "/stat_details/"+ code;
And if the method is post,then you should also mention it. Thanks.

jQuery AJAX GET Request not calling properly

I'm calling a GET request from a jQuery AJAX function, but the GET request doesn't seem to be calling properly. After running the script, the address bar only shows "index.php?", instead of the expected "index.php?searchterm=searchterm".
index.php
$(function(){
$("form").submit(function(){
var searchterm = document.getElementByID("searchterm").value;
$.ajax({
method: "GET",
url: "search.php",
data: searchterm
})
.done(function(res) {
document.getElementById("item1").innerHTML = res;
});
});
});
If it's any relevance, here is search.php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
$searchterm= isset($_GET['searchterm']) ? $_GET["searchterm"] : '';
exec("C:\Users\Callum\AppData\Local\Programs\Python\Python35-32\python.exe search.py $searchterm", $output, $result);
echo $result[0];}
?>

Correct data in ajax call as :
.......
$.ajax({
method: "GET",
url: "search.php",
data : { searchterm : searchterm } // Change here
})
.......
According to docs ,data in ajax call is data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. Object must be Key/Value pairs.
Reference

You should open the firebug console and see if you ajax request is visible there. If it is visible you can click on it and you will see what data it is passing to the requested url search.php
Also You didn't pass the data correctly using ajax. And if you are using ajax then browser address bar will not be updated as the page is not getting reloaded.
$(function(){
$("form").submit(function(){
var searchterm = document.getElementsByID("searchterm").value;
$.ajax({
method: "GET",
url: "search.php",
data: { searchterm : searchterm }//This is how to pass data correctly
})
.done(function(res) {
document.getElementById("item1").innerHTML = res;
});
});
});

the data property of the ajax function is an object so it should look like this:
data: { searchterm: searchterm }

AJAX request for many links

I'm new to jQuery AJAX. I want to build bookmarking system something like Twitter do (favorites). I have a lot of links. So it's not useful to write AJAX request for each link. That's why I want use just one request script for all links.
Let's say I have the links something link this:
<i class="icon-star-empty"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
So I want to write AJAX request that do something like this when user clicks to one of those URLs.
if (class="icon-star-empty"){
ajaxURL = "/insertBoomark"
} else{
//it means class=icon-start
ajaxURL = "/deleteBookmark"
}
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID}, // I don't know how to get linkID too :(
success: if class was icon-star empty then change it to icon-star-empty else change it to icon-star
});
I know that is not correct syntax.
How can I solve this problem? Please help :(
Thanks in advance.

$("i").on("click", function() {
if ( $(this).hasClass("icon-star-empty") ){
ajaxURL = "/insertBoomark"
} else{
//it means class=icon-start
ajaxURL = "/deleteBookmark"
}
var linkID = $(this).parent().prop("id");
var obj = $(this);
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID},
success: function() {
obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
}
});
})

You can also use the href attribute and just prevent the default action from the jquery event.
html
javascript
$(function(){
$(document).on('click','a',function(e){
e.preventDefault(); //prevent default click action
var $this = $(this); // keeps "this" accessable
var ajaxURL = $this.attr('href'); // get the url from the "a" tag
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID},
success: function() {
if($this.hasClass("icon-star"))
$this.removeClass("icon-star").addClass("icon-star-empty");
else
$this.removeClass("icon-star-empty").addClass("icon-star");
}
});
});
});

$('a').click(function(){
var _ajaxURL,
_self = $(this);
if($(this).hasClass('icon-star-empty')){
_ajaxUrl = "/insertBookmark";
}else{
_ajaxUrl = "/deleteBookmark";
}
$.ajax({
url: _ajaxUrl,
type: 'POST',
data: {id : $(this).prop('id')},
success: {
//I have no idea what you want to do right here.
}
});
});

Okay, first, class is a reserved name in javascript.
Secondly, if you're doing it with a jQuery.click function, then you can just do $(this).attr('id') to get the id.
Also, for the success part, you seem to be confused about javascript's function syntax. What exactly are you trying to do?