JS Ajax: local vs absolute path issue when using SEO friendly urls - javascript

here's the thing:
i built my site with SEO friendly urls...but i have problem now calling ajax files becaus eth epath is wrong and I cant set an absolute url when i call my files in background..
for instance my page is here (similar to StackOverflow..)
www.domain.com/product/123/this-is-a-product
but my javascripts functions, in folder /js,now they try to reach the files but they cant obvisouly because are set to relative path...
how can i solve this issue??
EDIT: Found this How to get the root path in JavaScript?

When you are using freindly urls, then you have to use path started with /. But then you are starting path from main path.

Related

I keep having to change window.location.href depending on whether i'm developing on localhost or pushing to the server

I'm using google sign in and that's working. Once signed in I've got some code in app.js that opens a new webpage using:
window.location.href
But if I'm developing then the webpage is at:
localhost:3000/webpage.html
But then the URL changes when I push to the server.
Is there a way to use "or" so it will open on the localhost or on the server depending on where this is hosted?
The answer is: Use relative links.
Simply strip the host part from urls in your JavaScript file, like this:
From:
http://example.com/yourpage.htm
To:
/yourpage.htm
Now it will work, both locally and on your production server.
When you set 'location.href' to the relative url, the browser will add the current host name to the url.
Relative Paths
You might be asking about relative paths. A relative path doesn't contain the main domain, it only includes the path.
Instead of using:
localhost:3000/webpage.html
You could use: /webpage.html
Learn more about absolute vs. relative paths here
Google Sign In
Alternatively, if the question is about how to redirect to the public url (a .com address instead of localhost) when in production, take a look at this already answered question.

Localize app with jQuery.i18n

I would like to ask for your help about localizing my apps.
I need to translate some js files. For this I use jQuery.i18n.
My problem is that I could load my external resource file.
How can I correctly specify my path to one of my resource json files ?
And I try to load my specific resource string
I tried to used ~/Scripts... also ./Scripts...
but I could not load this json file.
Thanks
Krpo
I think you're looking for a relative file path. If you provide the layout of your file structure I can help further, but basically...
Go back one folder:
../Scripts/app/Localization/Resources/i18n/sk.json
Go back two folders:
../../Scripts/app/Localization/Resources/i18n/sk.json
Go back three folers:
../../../Scripts/app/Localization/Resources/i18n/sk.json
Etc...

MVC5 and Javascript relative image paths confusion

My mvc5 webApp can´t seem to display images if I run it on the virtual server, however if I run it locally it works.
So I have tried several approaches and none that allowed me to run the app on the virtual server or on my pc worked I have tried:
(these worked if I was running this locally)
Images/arrow.png
/Images/arrow.png
This path works for the virtual server but not locally.
webAPP/Images/arrow.png
I know about #Url.Action but I have a lot of different images, around 15, and I don´t know if using #Url.Action is a good idea for that many.
any small example would help tremendously!
If you know the path to the images from the site root you can do the following in MVC:
#Url.Content("~/images/my-image.jpg")
The "~/" will map from the site root.
EDIT:
If you're working within a JS file and struggling with relative paths maybe you could add a 'basepath' variable to the top of the file and work with that:
var basePath = "http://www.mywebsite.com/images";
Then in your code, your image URL returned would be something like:
var imgUrl = basePath + "/my-image.jpg";
try this:
#Url.Content("~/Images/arrow.png")

Javascript is unable to resolve correct path of image when a page is requested using URL Routing in ASP.Net

In my ASP.Net project, I have implemented URL Routing. So even if my page is in the root directory, I am accessing it using URL routing as given below:
My actual Page is projectpage.aspx, which is in the root directory. I have registered its route as project/{projectname}/{cityname}/{projectid}.
There is another javascript which is included in this page. In this javascript, there is a code to access images in "resources" folder which is done by simply resources/{imagename}, but when I do View Source of the page, the path is shown like project/{projectname}/{cityname}/{projectid}/resources/{imagename}. But the "resources" folder is also in the root folder.
I also tried using "~/" before resources folder, but same thing happens.
Please let me know in case anyone has a solution to this problem.
Thanks & Regards,
Munjal
it think you should try /resources/{imagename}

JQuery ajax .load() to reference to the correct url

I have a localhost with a few projects, so this project in VS2010 properties->web->use local IIS web server = 'localhost/project4/'. (I can't use the normal debug VS Development Server as some components won't work in my project) Anyhow, localhost is fine no big deal, so I go on coding.
Now, in ajax when I call .load('/Account/LogOn'); it gives me 'localhost/Account/LogOn' but what I really want is 'localhost/project4/Account/LogOn' because it is sitting in the project4 directory, not the root.
Any idea how to tell ajax I need that virtual directory prefix between domain name and the rest of the url?
EDIT --------------------------------------------
Thanks guys, combined with all your knowledge, I guess the best ways to do it are:
Include the js script into .cshtml server side and use "~/Account/LogOn/" let .net figure out the path.
Make a global var remove_me_debug_only_virtual_directory = "/project4/"; in js code. append it to the domain name. this way we don't have to pull .net into the water and write js code in .cshtml.
Move the project to localhost/ root if you can, in this case I can't, because other people at work wants to access this networked server and do demo.
If your JS code is in an MVC cshtml file, use it like this:
.load('#Url.Action("LogOn", "Account")');
The proper URL will be placed in the concrete JS code.
According to .net documents,
Absolute and relative path references in a server control have the following disadvantages:
Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
Relative paths in the style of client elements can be difficult to maintain if you move resources or pages to different folders.
To overcome these disadvantages, ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.
So as described above, using ~ will lead you to the root of your web project using asp:
<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />
For more information go to: Web Project Paths
Based on your update: Possible duplicate of: base url using jQuery
Where stated by #gregguida:
var l = window.location;
var base_url = l.protocol + "//" + l.host + "/" + l.pathname.split('/')[1];
//all you need to do is work with l.pathname.split('/') to find what you need.
I am a java developer but the context is same in both case,
In your can follow the steps
Check the context of your server if root is "/" then you have to call something like,
.load('/project4/Account/LogOn');
If your application is root and you can calling this request from itself then
.load('Account/LogOn');

Categories

Resources