We Keep Coding

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

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.

Data appears below in each child div

I am creating a page in which when an anchor tag is click it pulls in data from the URL associated with that anchor. I want the data pulled in to only display in the div class popup associated with that anchor. Each anchor and div class popup are in a parent div named employee. When it is click now it pull in the data but to every div class popup on the page. I have tried .find and .children but neither is working. Can anyone help me?
(function($) {
function find_page_number(element) {
return parseInt(element.html());
}
$('.leadership').on('click', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
$(".popup").empty();
$('.popup').append($(html).find('.single-member').html());
}
});
})
})(jQuery);
<div class="employee">
<a class="leadership" href="different for each">
<img src="#" />
</a>
<div class="popup"></div>
</div>
<div class="employee">
<a class="leadership" href="different for each">
<img src="#" />
</a>
<div class="popup"></div>
</div>

That's because you're using the class selector .popup and you have multiple popups on the page.
To get a reference to the popup you want, you can go up to the parent and look for a popup in the element, or look at the siblings of .leadership.
Something like this may work:
$('.leadership').on('click', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
// Get a reference to your parent employee div
var parent = $(this).parent();
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
var popup = parent.find(".popup");
popup.empty();
popup.append($(html).find('.single-member').html());
}
});

I think this will do it for you - you need to target the child popup tag with .find()
$('.leadership').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent();
^^^^^^^^^^^^^^^^^^^^
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
var popup = $this.find(".popup");
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
popup.empty();
popup.append($(html).find('.single-member').html());
}

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 !!

jQuery Img toggle Ajax post

I have two images, when I click on green.png it changes to red.png. But when I load the page and its already set as red.png I need to click the img twice before it changes.I would like to only click once.
$(".page-state").toggle(function(event){
this.src = "images/red.png";
var id = event.target.id; //the Div ID variable
var dataString = 'page='+ id + '&view=off';
$.ajax({
type: "POST",
url: "pageState.php",
data: dataString,
cache: false,
});
$('#mainFrame')
.attr('src', $('iframe')
.attr('src'))
}, function(event) {
this.src = "images/green.png";
var id = event.target.id; //the Div ID variable
var dataString = 'page='+ id + '&view=on';
$.ajax({
type: "POST",
url: "pageState.php",
data: dataString,
cache: false,
});
$('#mainFrame')
.attr('src', $('iframe')
.attr('src'))
});
How can I improve this?

jQuery:
$(".page-state").click( function() {
var s = $(this).attr("class").split(" ");
if(s[1] == 'red') {
this.src = 'green.png';
$(this).removeClass('red').addClass('green');
// more code for green
}
else {
this.src = 'red.png';
$(this).removeClass('green').addClass('red');
// more code for red image
}
});
HTML:
<img class="page-state red" src="red.png" />
As you can see that .page-state has class which indicates that what by default, it consists red or blue.