Javascript Relative Url Doesn't include Id - javascript

When I make an ajax request using JQuery, the relative url doesn't include the last part of the url. I have the following urls:
/Question/100
/Question/100/AddComment
I am trying to send an ajax request from the first page to the second page. The jquery I am using is:
$.ajax({
url: 'AddComment',
type: 'POST'
});
This ajax request goes to the url
/Question/AddComment
To fix the issue I can just do window.location.href + "/AddComment" However I was wondering why exactly does the relative url not include the Id value? Also is there a way to solve this issue without using window.location.href?

This has nothing to do with JavaScript or jQuery, it's just how browsers interpret relative URLs. And for good reason.
The browser doesn't know or care what the "Id" is in the URL. It just knows that you are requesting a resource (100) at the end of a path (/Question/). Any URL relative to that resource is going to be requested relative to that same path. So requesting only AddComment will result in the browser looking for AddComment in the /Question/ path.
Consider what would happen if this wasn't the case. What if you're on the page index.html and you click on a link to about.html. Would you expect or want the browser to navigate to /index.html/about.html? Of course not.
You just need to specify the correct URL. If you can write the full absolute path, great. If you can dynamically output it from server-side code (like the #Url.Route helper in ASP.NET MVC, for example), also great. If you can dynamically build it in JavaScript either based on known base values or from examining the current URL, that's likely just as good as long as you cover any edge cases you might encounter and whatnot. But ultimately you need to specify the URL.

Related

Reload from server for all files

I know it's possible to force reload from server using location.reload(true). However, let's say I used that to refresh index.html. If index.html loads a bunch of javascript files, those are still coming from the cache for me. Is there any way to ignore the cache for the duration of a request?
My use case is that I'm doing AB testing on my app, and want to provide a way for users to go back to the old version if something isn't working. But some of the URLs are the same, even though the files between versions are different. It would be nice to be able to handle this in JS rather than having to change every URL on the new version.
There is actually at least 535 different ways to reload a page via javascript, FYI ;).
Have you tried to put document on front? document.location.reload(true);
Try also this other option:
window.location.href = window.location.href;
or
history.go(0);
Sure, both are soft reload, but seems to work in certain situation.
If nothing works, you have to append random data to the url (like timestamp) to force the download from server, bypassing the cache.
If you want to bypass browser taking js files from cache, you need to fetch from server not just files like script.js but rather script.12345.js When you update your file on server, you change file's hash number to let's say script.54321.js And browser understands that the file is different, it must download it again. You can actually use Webpack for this purpose to automate things. In output instead of {filename: bundle.js} you write {filename: bundle.[hash].js}

Javascript detect which host it was loaded from

I have a Javascript library I'm working on. It can be self-hosted or run from another server. The script makes a number of AJAX calls and the preferred method is making POST requests to the same host as the including page. To allow for cross-domain calls it also supports JSONP, but this limits the amount of data that can be sent (~2K to safely accommodate most modern browsers' URL length limits).
Obviously the user including the script knows where they're getting it from and could manually select JSONP as needed, but in the interest of simplifying things, I'd like to detect, within the script itself, whether the script was loaded from the same host as the page including it or not.
I'm able to grab the script element with jQuery but doing a $('script').attr('src') is only returning a relative path (e.g. "/js/my-script.js" not "http://hostname.com/js/my-script.js") even when it's being loaded from a different host.
Is this possible and if so, how would I go about it?
Thanks in advance.
Don't use JSONP, use CORS headers.
But if you really want to do JS check, use var t = $('script')[0].outerHTML.
Effect on my page:
[20:43:34.865] "<script src="http://www.google-analytics.com/ga.js" async="" type="text/javascript"></script>"
Checking location.host should do the trick.

Random image upon refresh with only one single image URL

Tried googling for a readily available script, but to no avail. I'm trying to find a script that does the below. Im not sure of there is a name for it.
Thank you in advance!
Function: Banner rotator with a single URL (PHP based)
Example:
User uploads 5 images (468x60px)
The system generates a a single image URL (e.g. http://demo.com/image.gif)
When user goes to the generated URL, it randomly shows 1 of his 5 images
Every time he refreshes the URL, it randomly shows him another one of his images
You can have the server-side code that processes the given URL return a random image each time. If you specify the server-side language (PHP, ASP.Net, JSP, ...) that you are using, I can give an example.
The URL can be something like
http://demo.com/image/
It does not need to have a specific image name in it.
The key is to ensure that the browser does not try and cache that URL. Set appropriate cache headers when returning the image. Again, the mechanics of doing that are specific to your language.
PHP Example
This short tutorial shows you now to select a random image from a folder of images
http://www.heckdesigns.com/tutorials/tutorial-pull-in-a-random-image-from-a-folder-with-php/
URL
You really should not have to require your URL to end in .png or whatever. If you set the Content-Type appropriately (as the tutorial above does), any web browser should display it properly. If that is in fact a requirement, you can use Apache rewrite rules to do that.
See
mod_rewrite and image redirecting

check if an image exists + loading an image without knowing the whole name of it

how can I check if an image exist via javascript.
is it possible to load an image called 145_44.jpg and I only know the first 3 numbers 145?
The html image element has onerror and onload events that will fire if loading the image fails or succeeds respectively.
With regards to loading an image without knowing the correct URI, the answer is no. Its up to the web server to decide what to serve in response to an HTTP request. If the request is for a resource it doesn't know about its very unlikely to serve anything other than a 404 error.
I'm unsure if you'll be able to link to an image without knowing the full name of it, however with the new CSS3 '*" selector you might be able to.
example:
<img src="*145*.jpg" />
this might be able to catch it (i'm at work so i can't test) but give it a shot. the * replaces everything before/after it telling the browser to search for anything with the number 145 in it that is a .jpg

Is there a way to get the entire source of a page with yql?

I am trying to load the source of any page into a textbox for a client side only html editor. I need to be able to get the entire source of a web page, not just the body. This yql query returns just the body:
http://query.yahooapis.com/v1/public/yql?format=xml&callback=editor.handleLoad&q=select+*+from+html+where+url%3D%22example.com%22
Is there any way to get the entire source, or are there any other free json-p-x webservices that can?
I don't see an obvious way to do that with YQL, but here is a Yahoo Pipe that seems to work. It refuses to get sites that are disallowed by their robots.txt, but it is getting the entire source for other sites:
http://pipes.yahoo.com/pipes/pipe.info?_id=dCsGDO123hG6BNv70EypaA
The default is set to www.example.com, which is denied because of the robots.txt on that page. However, it accepts the URL as a parameter. Here's a link to an example usage of this pipe that gets the source of pipes.yahoo.com and returns the result wrapped in JSON:
http://pipes.yahoo.com/pipes/pipe.run?_id=dCsGDO123hG6BNv70EypaA&_render=json&url=http%3A%2F%2Fpipes.yahoo.com%2F
Does this help?

Categories