We Keep Coding

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.

Using js and ajax to retrieve data from django server

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.

Replace the URL, contents and title without reloading the page

I want to create one page site by change div content with out load new page.
So, I've implemented my code like this:
HTML:
<title>Post title</title>
<body>
<a class="js-post-bt" href="/post/1" data-id="1"></a>
<a class="js-post-bt" href="/post/2" data-id="2"></a>
<a class="js-post-bt" href="/post/3" data-id="4"></a>
<div id="post-container"></div>
</body>
Script
$(function() {
$(".js-post-bt").on("click", function(e) {
var post_id = $(this).attr("data-id");
$.ajax({
url: "post_title.php?id="+post_id,
success: function(data) {
var title = data;
$.ajax({
url: "post.php?id="+post_id,
success: function(data2) {
// how to change url to post/post_id?
document.title = title;
$("#post-container").html(data2);
}
});
}
});
e.preventDefault();
});
});
Is it possible to create only one ajax call and get returned data either title and post data.
ANd how to change browser address to post/post_id after anchor link clicked.

You can use history api in HTML5
Demo -> http://html5demos.com/history
Howto ->
http://diveintohtml5.info/history.html
http://html5doctor.com/history-api/

If you want to make just one ajax call, which is a good idea, you will also need to change the code on your server.
It should respond a json object:
json_encode( array( "title" => $title, "post_data" => $post_data ) );
And you ajax call becomes:
$(function() {
$(".js-post-bt").on("click", function(e) {
var post_id = $(this).attr("data-id");
$.ajax({
url: "post_title.php?id="+post_id,
dataType: "json",
success: function(json_data){
document.title = json_data["title"];
$("#post-container").html(json_data["post_data"]);
}
});
e.preventDefault();
});
});

Pass the link on blur function instead of clicking another link

I want to pass the link on textbox blur function.
Jquery code
<a id="checkEmail" href="#" ></a> | <a id="getCandidate"></a> */* this is the link for get the profile details*/*
<script type ="text/javascript">
$('#getCandidate').text('Get Profile') // Sets text for email.
.attr('href', '#');
$("#Email").blur(function () {
$('#checkEmail').trigger('click');
//$('#checkEmail').trigger('GetCandidateDetail?validateEmail=' + $('#Email').val());
$('#getCandidate').text('Get Profile')
.attr('href', 'GetCandidateDetail?validateEmail=' + $('#Email').val());
});
$(document).ready(function () {
$('#checkEmail').click(function () {
var name = $('#Email').val();
var data = 'validateEmail=' + name;
$.ajax({
type: "GET",
url: "ValidateCandidate",
data: data,
success: function (data) {
alert(data);
}
});
return false;
});
});
</script>
Html code
<%: Html.TextBox("Email",Model.Email, new {#title="Enter the Candidate Email Id"})%>
<a id="checkEmail" href="#" ></a> | <a id="getCandidate"></a>
In the above code when I type the email id in textbox it triggers email id is registered or not. Then I give one more link getdetails. If I click that link then the profile will come by using the link GetCandidateDetail?validateEmail=' + $('#Email').val()).
But Now I want when I type the email id in textbox, if exists means it will load the link GetCandidateDetail?validateEmail=' + $('#Email').val())automatically otherwise false. How to do this? Help me to come out this issue?

You can do just like this:
$(document).ready(function() {
$("#Email").on('blur', function() {
// Check mail on blur
var email = $(this).val();
$.ajax({
type: "GET",
url: "ValidateCandidate",
data: {validateEmail:email},
success: function(data) {
// handle your response
}
});
});
});

function verify() {
var name = $('#Email').val();
var data = 'validateEmail=' + name;
$.ajax({
type: "GET",
url: "ValidateCandidate",
data: data,
success: function (data) {
alert(data);
return false;
});
}
$("#Email").blur(function(){verify();)
$("#checkEmail").click(function(){verify()})
thats it !!

Getting error on remove var data

I'm making hover card on click for every users so i did for one and its working but i want this to work on every user like i have given them unique title and based on that the server will get the data of that particular users but the problem is this is working on only 1 links not for all the links...maybe its because var data is kept store (please correct me if i'm wrong) so i tried to do this on ajax cache: false but didn't help then i tried return false;, return data; still not use.
So, here is the users links example :
<a class="hover" title="user101" href="#">John</a>
<a class="hover" title="user102" href="#">Tonya</a>
Ajax :
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$('.hover').click(function () {
var get_val = $('.hover').attr('title');
var data = 'vall=' + get_val + '';
$.ajax({
type: 'POST',
url: 'xx.php',
data: data,
success: function (data) {
box.dialog({
message: data
});
return false;
}
});
});
});

I would do it this way.
HTML
<div class='links'>
<a title="user101" href="#">John</a>
<a title="user102" href="#">Tonya</a>
</div>
JS
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$('.links').on('click', 'a', function (event) {
event.preventDefault();
var get_val = $(this).prop('title');
$.ajax({
type: 'POST',
url: 'xx.php',
data: {vall: get_val},
success: function (data) {
box.dialog({
message: data
});
}
});
});
});

the problem is this is working on only 1 links not for all the links...maybe its because var data is kept store (please correct me if i'm wrong)
you are wrong.. only 1 links is working beacuse you have same id for multiple elements.. each elements should have unique id.
use class instead
<a class="hover" title="user101" href="#">John</a>
<a class="hover" title="user102" href="#">Tonya</a>
and a class selector and return false after ajax success callback function , at the end
$('.hover').click(function () {
var get_val = $('.hover').attr('title');
....
$.ajax({
....
success:function(){
....
}
});
return false;
..
or simply use preventDefault() instead of return false
$('.hover').click(function (e) {
e.preventDefault();
var get_val = $('.hover').attr('title');
.....