I have a template where I have like link for my article :
<div id="voteUp">
<h4>Like {{article.up_vote}}</h4>
</div>
Here I want to increase the vote count for my article when user clicks it.
I have written view for it and it is working nicely.
But now I dont want to refresh the page.
I want to call it from ajax. Here is what I am doing.
<script>
$('#voteUp').click(function(){
$.ajax({
//type: "POST",
url: "/service/vote/up/{{article.id}}",
success: function(response) {
alert("success");
alert('Liked');
},
}
});
})
I just want when the user click the like button it should be increased without refreshing the page.
When I see from firebug I dont see any javascript called.
Whats wrong in here ?
Thank you
valentjedi is right: #voteUp is targeting the <div>, but the click event will be on <a>.
Either you give an id to the <a> tag, or you should change your jquery selector.
You will also have to prevent the default behaviour of the browser (that is, open the page in the browser)
<a id="voteUp" href="{% url "vote_up" article.id %}">Like {{article.up_vote}}</a>
<script>
$('#voteUp').click(function(evt){
$.ajax({
//type: "POST",
url: $(evt.currentTarget).attr("href"),
success: function(response) {
alert("success");
alert("Liked");
}
});
evt.stopPropagation();
});
</script>
Related
I am trying to pop-up a feedback banner, when a particular page is loaded.
Here is the code for that.
$(window).on('load', function() {
$('#review_modal').modal('show');
});
Now I want if someone clicks any button of pop up banner, (either Give feedback or No thanks) it runs a particular URL which only does is (Never show that user feedback again)
Here is my code for that which is wrong.
$(window).on('click', function() {
$.ajax({
type: "POST",
url: "/update_feedback_status",
});
});
I am very very new to ajax, but I need this to be done as soon as possible.
How should I fix it? HO wto tell ajax that On click means clicking on the button of that popup banner which is #reviewmodal.
You should add the click event listener to the elements in popup model instead of window.
For example:
<div id="review_modal" class="modal">
<button>Give feedback</button>
<button>No thanks</button>
</div>
<script>
$('#review_modal button').on('click', function() {
$.ajax({
type: "POST",
url: "/update_feedback_status",
});
});
</script>
I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}
I want to make ajax call to load some specific div to my webpage. But the content I wanna load is itself loaded via ajax, so I can't get the full html content as I want.
function loadajax(){
$.ajax({ url: 'http://callcom-com-au.myshopify.com/products/repair',
crossDomain: true,
method:'post',
dataType: 'html',
success: function(response) {
$('#customer_reviews').html(jQuery(response).find('.spr-header').html());
$('.spr-icon').css('color','#f3b41b');
}
});
}
$('document').ready(function(){
setTimeout(loadajax,10000);
});
Is there any workaround. Any help would be appreciated.
Simply open this page http://callcom-com-au.myshopify.com/products/repair and firebug/google-chrome-web-tools etc. and click tab Network. Then grab direct link to content you want to get.
This is a simplistic version of what I'm trying to do, but when you click on the link it redirects the page to the url + #, this is creating an additional navigation step when attempting to use the browser back button.
If I remove the href it doesn't work, if I change it to href='' then it refreshes the page every single time.
What is the proper way to handle this? I'm still attempting to learn jQuery / AJAX, so this may be a very basic question.
http://jsfiddle.net/bvp8xa5x/
HTML
<div id='updateMe'>Old Value</div>
<a href='#' id='test'>Test</a>
jQuery
$(function(){
$('#test').click(function(){
$.ajax({
type: "GET",
url: '',
success: function(data) {
$('#updateMe').html('New Value');
}
});
return false;
});
});
another way to stop the link being followed, is to call preventDefault() on the click event.
$('#test').click(function( e ){
e.preventDefault();
$.ajax({
...
});
});
I have the newest Fancybox and I just want to update the content of a Ajax Fancybox with a Button in the Fancybox.
Is there any Method in Fancybox which reload the content?
$('#button').click(function(){
$.ajax({
data:
{
//whatever you need to send back to the server
//this could be the id of the element to refresh
},
url: 'your_url_to_send_it_to'
cache: false,
type: 'POST',
success: function (result) {
//update the element with result
}
})
});
I've written down a very simple ajax call on a button with id "button". This is exactly what you need in order to refresh the Fancybox element. There isn't a method you can use within Fancybox itself to perform this, you have to write your own ajax call. Hope I was of some help.