Develop Reference

Urls that don't finish with / won't load properly other embebed pages

Has anyone encountered this problem?
I have been working with c# MVC in Visual Studio and when we publish our pages if the user tries to access the page and doesn't end the URL with / some pages won't load properly.
We use a lot that we have a main page and then somewhere in the middle is a div that is updated through javascript (I know that's what the render from mvc does when using the layout, but our boss doesn't like it that way and also it tends to interfere with her multiple layers of javascript)
It is these div parts that are loaded this way that won't load when the main page doesn't have a / at the end.
we have tried using #url.action and also hard typing the URL of the second page in the javascript and both yield the same result.
Is there a way to configure the project so that it doesn't matter whether the url that was typed in the browser has the / at the end?
EDIT: Added javascript function
function refreshdiv(divid, url) {
var seconds = 15;
$.ajax({
type: 'POST',
url: url,
context: document.body,
async: true,
timeout: 15000,
success: function (data) {
$("#" + divid).html(data);
$("#" + divid).find("script").each(function (i) {
eval($(this).text());
});
}
});
Thanks in Advance for any help

Call AJAX state based on URL

I am loading content in an overlay with its own URL and it is running pretty good. But I have the problem that when I enter the URL in the browserbar, it links directly to the page of the url, but I want to stay (on the homepage) and the overlay with the project should fade in.
I've tried it with the window.location.href but it killed my function completely. (I am also pretty newbie when it comes to ajax stuff)
My Code
//AJAX Function to fetch project content
var url = $('.load').data('url');
function openUrlInModal(url, target){
$.ajax({
url: url,
type: "GET",
dataType: "html",
contentType: "text/html",
cache: false,
success: function(url) {
$(target).append(url).addClass('modal');
$('.modal').fadeIn('fast');
console.log("target:" + target);
console.log("url:" + url);
}
});
}
// Adds content to the modal on click
$('.load').bind('click', function(e) {
var target = $(this).data("target");
//History Pushstate
fetchedProjectUrl = $(this).attr("href");
history.pushState(null, null, fetchedProjectUrl);
//Call Ajax Function
openUrlInModal($(this).attr('href'), target);
e.preventDefault();
});
//Hitting Back Button
$(window).on("popstate", function(){
history.pushState(null, null, "");
$('.modal').fadeOut('fast');
function empty(){
$('.modal').empty();
}
setTimeout(empty, 300);
});
Thanks for any help in advance :)

I do not understand where the URL for modal come from. If you want to stop the browser to go to the URL which was tipped in the browserbar and then executed - this isn't possible due to security reasons and senseless programming in mind of a browser. In this meaning you must code an own browser, than it's ok - whatever your browser should want to do.
If the URL is a kind of dynamic, you must have a new window reference in your modal, like an iframe, than you can execute a separate location for it.
Otherwise only paste the response-html in your modal innerHTML

url for ajax is not working

my ajax code is
$.ajax({
url: "http://www.web-tutor99.com/ajax/template0.php",
beforeSend: function() {
$('div#divLoading').show();
},
complete: function() {
$('div#divLoading').hide();
},
success: function(data) {
var menuStyleSheets = $("head .menuStyleSheets");
var i;
for (i = 0; i < menuStyleSheets.length; i++) {
//code
$(menuStyleSheets[i]).remove();
}
$('<link rel="stylesheet" type="text/css" class="menuStyleSheets" href="styleSheets/styleSheet' + index + '.css" >').appendTo("head");
$("#menuThm").remove();
$(".showMenu").append(data);
temp = Tempo.prepare('list');
createMenu();
},
error: function() {
alert("try another theme");
},
type: "GET",
})
and in the tamplate.php file i'm just echoing the html code but the ajax call is not fetching it showing the error alert, please help me, Thank you.

Ensure your Syntax is Correct / No Cross Origin Issues
Try removing the trailing , at the end of your AJAX call (after your type parameter). It's likely that your code is expecting another parameter that isn't there :
type: "GET",
Additionally, you will want to ensure that you are making this request from the same domain, otherwise you may encounter a cross-site "Access-Control-Allow-Origin" scripting error.
Use Your Developer Tools To Examine The Request
You may want to try using the Developer Tools (F12) within your browser and try examining the Request / Response content within the Network tab (seen below using Chrome) :
This should give you any specific server-side errors within the response if they are present.

Is there another way to disable cache when fetching script?

I use this to fetch script;
$.getScript("http://www.example.org/");
However, I dont want it to be cached. Means that if I use getScript again, the script should fetch it again.
This one works in theory;
$.getScript("http://www.example.org/?" + Math.random());
But in practically, it's not. Because the "?" is disabled on the remote site url, so my question is, is there any otherway to tell browser to not cache ?

Recreate the function for your needs:
(function () {
$.getScript = function(url, callback) {
$.ajax({
type: "GET",
url: url,
success: callback,
dataType: "script",
cache: false
});
};
})();
Now it won't cache anymore when you call the function like
$.getScript('script.js', function()
{
// non cached script.js
});

The remote site cannot disable the effectiveness of "http://www.example.org/?" + Math.random() to prevent caching.
The point of the "?" + Math.random() is to create a unique URL that will not be in the local browser cache. It is the local browser that makes this caching decision and, for local browser caching, it does not matter if the remote site is ignoring the "?" + Math.random() part of the URL or not.
FYI, another way to address caching is for your server to return proper cache headers when this script is retrieved that instruct the browser to never cache this file.

How to check for availability before automatic refresh?

I want to update a webpage periodically and I want the browser only to update if the page is available. Right nov I'm using using this:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
setInterval("location.reload()", 66000);
});
</script>
Is it possible not to update if the page for some reason isn't available?

You could use an ajax check for a tiny resource ahead of time, something like:
$(document).ready(function() {
setInterval(maybeRefresh, 66000);
function maybeRefresh() {
$.ajax({
url: "/path/to/tiny/resource",
type: "GET",
success: function() {
// That worked, do the full refresh
location.reload();
}
});
}
});
...but I would tend to think you'd be better off just loading the updated content instead. Put all of the primary content in an element with the id "main", then:
$(document).ready(function() {
setInterval(function() {
$("#main").load("/path/to/new/content");
}, 66000);
});
That replaces the content of the #main element with the content received from the GET to /path/to/new/content. If the GET fails, no update.
I would probably also use a chained setTimeout instead of a setInterval and handle errors by trying to refresh more aggressively. Something like:
$(document).ready(function() {
setTimeout(refresh, 66000);
function refresh() {
$.ajax({
url: "/path/to/new/content",
type: "GET",
success: function(html) {
// Success, update the content
$("#main").html(html);
// Reload in 66 seconds
setTimeout(refresh, 66000);
},
error: function() {
// Failed, try again in five seconds
setTimeout(refresh, 5000);
}
});
}
});

You may want to use the HTML5 cache manifest feature.
In order to do that, specify a manifest file path in your html element's manifest attribute:
<!DOCTYPE HTML>
<html manifest="cache.manifest">
Then add all the website's resources to the manifest file, e.g.:
CACHE MANIFEST
# v11
/index.html
/main/features.js
/main/settings/index.css
http://example.com/images/scene.jpg
http://example.com/images/world.jpg
Now, if you do a GET request for index.html, the browser will only do an actual request if the cache manifest file is available and it has changed (in order to force an update you can store a version number in cache manifest comment and update it when needed). Otherwise, the page will be reloaded from browser's cache.