Develop Reference

Update HTML content after a webpage has been loaded without reload

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;
}

Ajax call when user presses back button

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);
}
});
}

jQuery .load() to a different page

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();
}

Is there a way to directly access a web page that PopUps from a MVC application?

The site I have is written in .NET MVC. This site has a footer in the view with some links that when clicked pops up a window. The popup is done using javascript and ajax. All of the popups work fine.
What I am after is a way to directly access the faq page in the popup via a URL. When I attempt to access the page directly via the URL "http://www.mysite.com/faq" I get page not found. I would like to access the page either as a popup or a full web page with the following:
http://www.mysite.com/faq
The code in the footer follows:
FAQs<span>|</span>
<script type="text/javascript">
$(function () {
$("div.Footer a").click(showPopUp);
$("a#close-button").click(hidePopUp);
});
function showPopUp(e) {
e.preventDefault();
var link = $(e.target).data("link");
loadHtml(link);
}
function loadHtml(link) {
if (!$.isShowingStaticContent) {
$.isShowingStaticContent = true;
$.ajax({
type: "POST",
cache: true,
url: '/home/' + link,
success: function (data, textStatus, jqXHR) {
$("body").prepend(jqXHR.responseText).find("#close-button").click(hidePopUp);
},
error: function(){$.isShowingStaticContent = false; }
});
}
}
function hidePopUp(e) {
e.preventDefault();
$("div:first").remove();
$.isShowingStaticContent = false;
}

The route for the FAQ page would actually be site.com/home/faq because the faq action is in your home controller (at least that's how it looks from just looking at your ajax call). If you want to be able to access site.com/faq, you need to either move the faq action it it's own controller, or edit your routes in App_Start/RouteConfig.cs

How can I reload a Fancybox?

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.