Jquery relative and absolute path - javascript

I need determinate this path in jquery , actually i have one file called functions.js and inside of this one function for load url with jquery
The problem it´s the js load in the index of website and the file really in subfolder
<script src="http://www.domain.com/wp-content/includes/themes/mytheme/js/functions.js"></script>
The js called in the index of website it´s into wp-content/includes/themes/mytheme/js
And the load jquery call to : wp-content/includes/themes/mytheme/index_loader.php
I can put the absolute path to index_loader.php in jquery , but my question it´s if it´s possible no use this and calculate the path into js file
Actually :
$("#test").load("http://www.domain.com/wp-content/includes/mytheme/index_loader.php");
It´s possible this or calculate inside jquery file ? - I try and no works .....
$("#test").load("../index_loader.php");
This it´s my problem really , thank´s regards

The way JavaScript works it that it loads from the file it was called from and now the file it was written in.
In order to do what you need you need to supply the relative path from the current page you're viewing.
Example:
If current page is http://www.domain.com then you'll need to do:
$("#test").load("wp-content/includes/mytheme/index_loader.php");
If current page is http://www.domain.com/wp-content/index.php then you'll need to do:
$("#test").load("includes/mytheme/index_loader.php");
As a side note CSS is not the same way and CSS the relative path is based on the file it's written in.

this is very very late...
but I'm using this method and I'm just adding it here, in case somebody needs it in the future:
i had this problem when trying to use the same load statement from pages existing in different URLs (different parts of the site)
you can use the location js variable
location returns the current path
for example wwww.blog.mysite.com/posts/postn25/comment64
location.origin returns the domain and host (so the root of the site)
for the previous URL, it would be
wwww.blog.mysite.com/posts/postn25/comment64
so when you do
$('#my_tag').load(`${location.origin}/mypath/mypage`)
it will always look for /mypath/mypage starting from the root directory,
so even if the domain changes it will still works
PS: (unrelated)
i found out today that you can use > * to load all of what inside a tag in another, for example:
$('#my_tag').load(`${location.origin}/mypath/mypage #my_tag > *`)
would load all the HTML from #my_tag that exists in /mypath/mypage into #my_tag in the current page

Related

jQuery ajax request relative path

I'm implementing a jQuery plugin that needs to use some html markup. I try to load the html code by ajax request but the problem I'm facing is it doesn't accept relative paths. I can't specify the path from root folder because I need this plugin to run as library and I don't know on which path the user of the library will put the library folder.
If it's not possible to do something like that what is the best possible workaround. Personally I don't like to put the html markup inside of the javascript code.
UPDATE
html import seems to solve my issue but unfortunately most of the browsers don't support this future yet. Here is a link that describes what html import is http://www.html5rocks.com/en/tutorials/webcomponents/imports/
You shouldn't have to specify an absolute path. jQuery.ajax will accept a relative path. Just be sure to prefix the path with '/'.
The result here is that it will access the relative path of whatever domain/host the script is currently executing.
Alternatively, you can also make the host configurable within your app.

Load aspx into a div: wrong path

I have a page that I want to load into a div.
I am found at Trial.js:
$('#mydiv').load('../Views/Employer/Tracking.aspx');
but the div is not loaded.
What is my problem?
thanks.
The path to a file will be relative to the current path of the page you're on, not to the javascript file. Make sure your relative path is positioned from there, or use an absolute path.
Since this is MVC, your current "page" may or may not be a page, but from the browser's perspective, whatever "directory" you're in will be what it uses to determine the path.
For example, if your current page is:
http://example.com/Marketing/Home/Index
then ../Views/Employer/Tracking.aspx will think that your directory is "Home", and will try to get http://example.com/Marketing/Views/Employer/Tracking.aspx, and it should work (EDIT: This won't work either, because "Areas" is missing). If however, your current page is
http://example.com/Marketing/Home/Index/34
then it will think "Index" is your directory, and the relative path will return http://example.com/Marketing/Home/Index/Views/Employer/Tracking.aspx, which will not exist.
One solution that will work globally would be to define the URL on the server-side markup into a javascript variable, then use that variable in your js file. For example, in your layout/master page will assign the relative path to a global variable, and it will always build this URL properly.
<script type="text/javascript">
var _trackingUrl = "<%= Url.Content("~/Areas/Marketing/Views/Employer/Tracker.aspx") %>";
</script>

How can I generate a path relative to a Javascript/jQuery file?

I have a CMS template that uses JavaScript/jQuery to insert an image onto the page. This works fine when I specify an explicit path to the image, but because I use the template on several sites, the path needs to be determined automatically.
Making things a little harder is the fact that the path to the template (and therefore the image I'm linking to) changes periodically with each revision to the template.
Here's the (extremely simple) relevant code at the moment - which technically works in the short term, but is not the solution I'm looking for:-
src = '../template_v1/images/pdf_small.png'
This correctly generates the base URL, but breaks as soon as the template version is incremented (and the path changed) to template_v2 or template_v3, for example.
The JavaScript/jQuery file (again, included with the template) is located at http://www.domain.com/template_v1/js/this_file.js - so with that in mind, I want to be able to automatically generate a path to the image relative to the location of the this_file.js file. If this were CSS this would be easy, as non-explicit paths are relative to the CSS file calling the path - but I don't know how to accomplish this with JavaScript/jQuery.
Thanks in advance for any tips.
Do you need to go up a folder at the start of the source? Would going from the current directory work and stay within the template folder entirely:
src = './images/pdf_small.png'

Can you change the output location for the Randori generated html files?

I'm creating a new project and I want to customize the location of the generated files from Randori. How can I do this?
Check out Lesson-02: Creating an Initial HTML file & Run Configuration
From here you will see how to edit your Randori configuration. You can make the generated output anything you want. However just make sure to update your main html file and point to the correct (customized) generated folder.
One more point on this when you call the launch() method of RandoriBootstrap, you can pass two arguments. The first is whether you want debug mode on or off (debug mode does cache busting) the second is the URL that the class loader will use to find your classes. Should you put things in generatedFoo folder, you need to make sure the RandoriBootstrap knows this.

Including javascript files

I'm finishing my project right now and see that I've got a lot of javascript code on each page. It's not included as a ".js" file, but rather coded in the page itself. I figured it's a bad idea, so now I'm trying to put them all in one .js file and include it in each page.
The only problem I'm facing now is this: Some functions are only called on certain pages and are depending on the inclusion of jquery plugins. Not all pages needs the plugin however.
Example:
On the home page I need to chain the Country dropbox with the City dropbox, thus I need the jchained.js plugin for jquery. The code I need to use is:
$(function(){
$("#city").chained("#country");
});
When I add this function to the .js file, and I open a page where I don't need to chain the dropboxes I get logically an error:
TypeError: $("#city").chained is not a function
So if I understand this correctly, in order to use a .js file with all my different functions for different plugins, I need to include all the plugins to all the pages?
Thanks for your ideas & help.
Personally, I don't think you should worry about including alot of .js files, that's part of web development. Another option, albeit slightly more tedious, is you can make a check for the function to exist (if the plugin .js has been included) and then call it if it does:
if(typeof yourFunctionName == 'function') {
yourFunctionName();
}
It completely depends on how the code is structured or how complex the current code is.
An immediate solution will be,
Give an id to each page (may be on body tag).
Put all the code in a single external JavaScript file.
Execute the code meant for that particular page only if it has required id on that body element.
Something like :
if ( $('body').attr('id') == "home" ) {
/* Add home page JS here */
}
You can try this.
Correct me if I am wrong.

Categories