Using js and ajax to retrieve data from django server - javascript

I want to load info on mouse hover, mouse event is working but don't know if it's hitting the url
$(document).ready(function() {
$('.user').hover(function (e) {
var offset = $(this).offset();
var left = e.pageX;
var top = e.pageY;
var theHeight = $('#myPopoverContent').height();
$('#myPopoverContent').show();
$('#myPopoverContent').css('left', (left+10) + 'px');
$('#myPopoverContent').css('top', (top-(theHeight/2)-10) + 'px');
$.ajax({
url: $(this).closest(".username").attr("data-url")/,
type: 'get',
data: form.serialize(),
dataType: 'json',
});
});
$('#myPopoverContent').focusin(function (e) {
$('#myPopoverContent').active();
});
$('#myPopoverContent').mouseout(function (e) {
$('#myPopoverContent').hide();
});
});
<div class="user-block">
<span class="username" data-url="{% url 'pop_user' question.user %}">
<a class="user" href="{% url 'profile' question.user %}">
{{question.user.profile.get_screen_name }}
</a>
</span>
</div>
I have views function accordingly
I want to return the data from views, but it;s not working

you have an error in url: $(this).closest(".username").attr("data-url")/, change it to url: $(this).closest(".username").attr("data-url")+"/", then the syntax error would be resolved.
Or as mentioned by #ArpitSolanki in the comments, adding the "/" isn't required all together. So, you can remove it.

Related

Refreshing Data Div inside Ajax request

I am trying to create a profile picture editor with a dropdown having two options:
Update your Profile Picture
If there is any profile picture it will show Delete options otherwise it will hide this options
template code:
<div class="dropdown-menu">
<a class="dropdown-item"><input name="input_file" type="file" id="profile-pic-upload" style="display: none;" />
<label for="profile-pic-upload">Upload Profile Picture</label>
</a>
{% if user_profile.profile_pic %}
<a class="dropdown-item delete" href="javascript:" style="font-size : 14px;">Delete</a>
{% endif %}
</div>
JS code:
$(".delete").click(function () {
$('.loading').show();
var url = "{% url 'user-profile-image-delete' %}";
$.ajax({
type: 'POST',
url: url,
data: $("#new_form").serialize(),
cache: false,
success: function (data, status) {
$('#imagePreview').css('background-image', 'url('+'{% static 'assets/img/user-64x.png' %}'+')');
if (data['status'] == "success") {
}
else {
toastr.error(data.msg);
}
}
});
});
$("#profile-pic-upload").change(function () {
var input_detail = this;
var data = new FormData();
var file = this.files[0];
data.append("file", file);
$.ajax({
type: 'POST',
data: data,
contentType: false,
processData: false,
url: $("#profile-file-upload").data('action'),
cache: false,
success: function (data, status) {
if (data['status'] == true) {
toastr.success(data.msg);
var randomId = new Date().getTime();
$('#imagePreview').css('background-image', 'url(' + data.profile_pic + '?random=' + randomId + ')');
}
else {
toastr.error(data.msg);
}
}
});
});
But I am facing one issue: even if I click the delete option the dropdown is not refreshing and it still shows an option for deleting it. It only goes once I refresh the page.
Same way if there is no profile picture it only shows Upload Profile pic. If I update an image the dropdown will not shows the delete option. To see this I need to refresh the page.
How to avoid page reload to refresh dropdown contents?
I understand your problem. You can easily solve this issue in your ajax call success.
What you need to do is just simple hide and show using jquery or javascript.
Lets say user already has a profile pic and the person clicks on delete option and ajax call is success then you should hide the delete option. (you can also remove it but later you will have to create it via javascript)
$(".delete").click(function () {
$('.loading').show();
var url = "{% url 'user-profile-image-delete' %}";
$.ajax({
type: 'POST',
url: url,
data: $("#new_form").serialize(),
cache: false,
success: function (data, status) {
$('#imagePreview').css('background-image', 'url('+'{% static 'assets/img/user-64x.png' %}'+')');
if (data['status'] == "success") {
//$(".delete").hide(); // this will hide your delete option
//Instead of hiding we are now removing the button then generating the button dynamically via javascript.
$(".delete").remove();
// But note one thing if we use class then it will hide/delete all elements with class of delete. so it's better to use id for unique elements.
}
else {
toastr.error(data.msg);
}
}
});
});
For the other case where there is no profile pic and the user updates profile pic then you should create a dropdown menu and append it to the dropdown.
$("#profile-pic-upload").change(function () {
var input_detail = this;
var data = new FormData();
var file = this.files[0];
data.append("file", file);
$.ajax({
type: 'POST',
data: data,
contentType: false,
processData: false,
url: $("#profile-file-upload").data('action'),
cache: false,
success: function (data, status) {
if (data['status'] == true) {
toastr.success(data.msg);
$(".delete").remove();
let dropdown_menu_item = '<a class="dropdown-item delete" href="javascript:" style="font-size : 14px;">Delete</a>'
$('.dropdown-menu').append(dropdown_menu_item);
var randomId = new Date().getTime();
$('#imagePreview').css('background-image', 'url(' + data.profile_pic + '?random=' + randomId + ')');
}
else {
toastr.error(data.msg);
}
}
});
});
this should work but i think you should handle that show or hide dropdown using javascript by checking first if the profile pic is updated if there then show delete button else hide the delete button and when user updates profile pic then show delete button.

How to get the data attribute of clicked a href tag using jquery

I have problem passing the id to the api url of ajax, there is no response to my success function when I click the a href tag.
So first I need to fetch all the Albums, And It's already done and fetched well. so the codes is this.
Function Getting All the Albums:
$(document).ready(function(){
$.ajax({
url:'http://localhost:8000/api/peoplegallery',
dataType: "json",
contentType: "application/json",
success:function(response) {
var peoplegallery = response[0].gallery_table;
$.each(peoplegallery, function (index, el) {
var stringify_list_gallery = jQuery.parseJSON(JSON.stringify(el));
var gallery_file = stringify_list_gallery['file'];
var people_gallery_image = '<img src=/storage/' + gallery_file + ' class="d-block w-100">';
var gallery_id = stringify_list_gallery['content_id'];
var gallery_content_title = stringify_list_gallery['content_title'];
var gallery_event_dated = stringify_list_gallery['event_dated'];
var peoplegallery_data;
peoplegallery_data =
'<div class="col-md-4">\
<div class="card" style="margin-left:20px;">\
<img class="card-img-top" src="/storage/'+gallery_file+'" alt="Card image cap" style="height:200px;">\
<div class="card-body">\
<h5 class="card-tilte">\
'+gallery_content_title+'\
</h5>\
</div>\
<div class="card-footer">\
<small class="text-muted"><i class="icon ion-md-calendar" style="font-size:15px; color:#800000;"></i><i class="far fa-calendar-check"></i> '+gallery_event_dated+'</small>\
</div>\
</div>\
<br><br>\
</div>\
';
$('#list_peoplegallery').append(peoplegallery_data);
});
},
error:function(response) {
console.log(response);
}
});
});
So the output look likes this, I will give example
If I click that I want to get all the images inside of that album, so I created a function to get all the images but the problem is I can't get the ID.
Function to get the specific images to the album.
$(document).ready(function(){
$(document).on('click','.clicked_albums',function() {
var album_id= $(this).data('id');
$.ajax({
url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
dataType: "json",
contentType: "application/json",
success:function(response) {
console.log(response);
},
error:function(response) {
console.log(response);
}
});
});
});
So i give remedy to validate if the value is returning i use preventDefault it works, but when my browser go to the second page. the Id is refreshing.. that's why i can't get the response, so how it will solved.?
e.preventDefault();
To get the contents of the attribute data-attr-gallery-id you have to use
$(this).attr("data-attr-gallery-id")
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("attr-gallery-id")
If your code is inserted into DOM dynamically by JAvascript then you have to correct code as mentioned below
'+gallery_content_title+'
Because you have bind click event by id. By ID it binds event on the first element which is matched with id. So instead of using id, you have to use class for a bind click event on multiple elements.
Your JS code should be
$(document).ready(function(){
$(document).on('click','.clicked_albums',function() {
var album_id= $(this).data('id');
$.ajax({
url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
dataType: "json",
contentType: "application/json",
success:function(response) {
console.log(response);
},
error:function(response) {
console.log(response);
}
});
});
});
I also see that on server side PHP code function there is one mistake I can see about the return value. It is returning value from where you have called the function not given as output.
public function peoplegallery_album($id)
{
$url_id = $id;
$get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$url_id]);
echo $url_id;
die();
return $url_id;
}

Updating Like Button without Refreshing The Page

Here's my Like button,
<a class="wst-click update_data" wst-href="{% url 'data:like' content.id %}" href="{% url 'data:like' content.id %}" >{{ data.likes.count }} Like</a>
This is what I'm doing for 'Like' functionality,
$('.wst-click').click(function(e){
e.preventDefault();
var this_ = $(this);
var wstURL = this_.attr('wst-href');
$.ajax({
url: wstURL,
method: 'GET',
data: {},
success: function (data) {
$('.update_data').text(data);
}
})
});
So, when I press the Like button instead of Returning the number of new Likes, it's returning the raw html code of entire webpage. How can I fix that?
It's working perfectly alright. I have added dummy example here.
<a class="wst-click update_data" wst-href="data/like/10" href="data/like/10" >11 Like</a>
$('.wst-click').click(function(e){
e.preventDefault();
var this_ = $(this);
var wstURL = this_.attr('wst-href');
$('.update_data').text('12 Like');
/*$.ajax({
url: wstURL,
method: 'GET',
success: function (data) {
var like_text = $(data).find('.update_data').html();
$('.update_data').html(like_text);
}
});*/
});
JSFiddle

How do I disable anchor tag and change html() during an AJAX request

HTML:
<a class="mr-2 mb-2 btn btn-outline-primary btn-sm" onclick="edit_init(this)" href="#4CE10703YB"><i class="ti-info"></i></a>
jQuery:
function edit_init(anchor){
$("#edModal").html("");
ref = anchor.href.substr(anchor.href.lastIndexOf('/') + 1);
ref = ref.replace(/^#/, "");
$.post("modal.php",{ajax_get_edModal:1,ajax_modal_for:ref},function(data){
$("#edModal").html(data);
});
}
So everything is working fine, but now I want to change the html() inside that anchor tag to something like "loading.." and disable it during the duration of the ajax request.
You can apply below changes to your function, in order to achieve your task.
function edit_init(anchor){
$prevHtml = $(anchor).html();
$href = $(anchor).attr('href');
$(anchor).removeAttr('href');
$(anchor).html('Loading....');
$(anchor).attr('disabled',true);
$("#edModal").html("");
ref = anchor.href.substr(anchor.href.lastIndexOf('/') + 1);
ref = ref.replace(/^#/, "");
$.post("modal.php",{ajax_get_edModal:1,ajax_modal_for:ref},function(data){
$("#edModal").html(data);
$(anchor).html($prevHtml);
$(anchor).removeAttr('disabled');
$(anchor).attr('href',$href);
});
}
Use beforeSend to do something while ajax request, for example:
$.ajax({
type: 'post',
url: 'example.php',
data: form.serialize(),
beforeSend: function() {
$('.yourTag').html('loading...');
},
success: function(data) {
$('.yourTag').html(data);
},
error: function() {
$('.yourTag').html('error');
}
});

jquery show hide loader for the element which clicked

I am trying to show and hide loader image only for the element which has been clicked, on ajax process.
Here is my HTML
<table>
<tbody>
<tr>
<td class="status-item">
<!-- element to show/hide -->
<i id="1" title="" rel="tooltip" class="cursor help fa fa-envelope read" data-original-title="Read"></i>
<!-- element to show/hide -->
<span style="display:none" class="loader">
<img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
</span>
</td>
<td class="status-item">
<!-- element to click -->
<i id="2" title="" rel="tooltip" class="cursor help fa fa-envelope unread" data-original-title="Unread"></i>
<!-- element to show/hide -->
<span style="display:none" class="loader">
<img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
</span>
</td>
</tr>
</tbody>
</table>
JS code
// when click on read icon
$('.read').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
$('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$('span.loader').hide();
}
});
});
// when click on unread icon
$('.unread').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
$('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$('span.loader').hide();
}
});
});
I have tried $(this).next() but that didn't work and stop even show/hide the loader image
$('.read').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
$(this).next('span.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$(this).next('span.loader').hide();
}
});
});
$('.unread').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/seen/' + id;
$(this).next('span.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$(this).next('span.loader').hide();
}
});
});
Any idea how to resolve this when the loader image only shows for the element (icon) been clicked?
Use a different varaible for this as it will not work in success callback like,
var $this=$(this);
$.ajax({
type: 'POST',
url: url,
success: function() {
$this.next('span.loader').hide();// use $this here not $(this)
}
});
It can be done by using a simple approach like add a data-type attribute in <i> tag like,
HTML
<i id="1" data-type="seen" data-original-title="Read" ...
......
<i id="2" data-type="unseen" data-original-title="Unread" ...
And in Script try this,
$('.read, .unread').click(function() {
var id = this.id,// use this.id simply
$this=$(this), // take a copy of current jquery object
type=$this.data('type');// seen/unseen see above html
var url = base_url + 'admin/notifications/'+type+'/' + id;
$this.next('span.loader').show();
$.ajax({
type: 'POST',url: url,data:{id:id},
success: function() {
$this.next('span.loader').hide();
}
});
});
Try this :
// when click on read icon
$('.read').click(function() {
var current = $(this);
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
current.parent().find('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
current.parent().find('.loader').hide();
}
});
});
// when click on unread icon
$('.unread').click(function() {
var current = $(this);
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
current.parent().find('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
current.parent().find('.loader').hide();
}
});
});

Categories