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.
Related
I'm using php and jquery and trying to get a notification to appear after a user submits a form. I'm using ajax for the form submission so that the page does not reload. I want the notification to contain some of the information from the form so they know if it has been entered already. The notification is just a hidden div that is shown when the ajax data is sent. Is there any PHP statements or something in javascript or JQuery that can do this?
Use ajax like this:
ajaxCall("formHandler.php", yourForm);
function ajaxCall(url, postData){
$.ajax(url, {
dataType: "json",
method: "post",
data: {postData}
success: function(data) {
// your Code, example:
document.getElementById("yourDIV").style.display="block";
});
return true;
}
I have an AJAX function which triggers my function before the redirection at a URL. So, I need to trigger it later.
Here is the code, I will explain it below.
$('#backToLogin').click(function(e){
$.ajax({
url: "/login/",
success: function(result){
$('#member-space').show();
$("#form-container").html(result);
console.log('success');
},
complete: function(complete){
},
error: function(er) { alert(er); },
});
});
backToLogin is the button on the first page which make the redirection.
member-space is the DIV on the second page that I want to show but it's hidden. I have a button to show it but I want that DIV appear without any click event.
PROBLEM : The DIV member-space appears before the redirection.
Any idea?
I have a form on a pop up window called add_weekly_job.php and once it has been successfully submitted I want to load content from diary_weekly_load.php to a div on another page diary_weekly.php.
I know how to use .load() to get content from a different page but not how to send content to a different page or even if it can be done?
$(".add_weekly_job_submit").on( "click", function (){
var week_start = $('input[name=week_start]').val();
var user_id = $('input[name=created_by]').val();
alert(user_id);
jQuery.ajax({
type: "POST",
url: "ajax/diaries_change_ajax.php",
dataType: "json",
data: $('#add_job_form').serialize(),
success: function(response){
if(response.success === 'success'){
$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
}
},
});
});
The button add_weekly_job_submit is displayed on the pop up page add_weekly_job.php and the page I want the content to load on is diary_weekly.php
The reason I am using a pop up page rather than just a javascript pop up is because the user needs to be able keep it open if they navigate away from diary_weekly.php
I finally managed it by using
if(response.success === 'success'){
window.opener.$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
window.close();
}
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>
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.