We Keep Coding

jQuery AJAX Cannot Find Local File in WordPress Installation

I'm having trouble with a WordPress plugin I've been working on. A JS file is loaded as a resource with each page/post opened, which in turn has a request to load the contents of an HTML file.
Being that the page/post directories change frequently, I'm having a difficult time making the jQuery dynamically pin down the location of the file (even though it's in the same location as the rest of the plugin resources).
An example:
jQuery('body').append('<section id="asub00LOAD"></section>');
var url = jQuery(location).attr('hostname');
var dir = url + '/wp-content/plugins/adsenseunblock/html/adunblock.html #asub00AJAX';
jQuery('#asub00LOAD').load(dir);
That was placing the whole URL path to the file after the local install ("root.com/CHEETOS/" in this case):
After which, I did this, which works fine for the root directory only:
jQuery('body').append('<section id="asub00LOAD"></section>');
var dir = 'wp-content/plugins/adsenseunblock/html/adunblock.html #asub00AJAX';
jQuery('#asub00LOAD').load(dir);
After you venture to another page, obviously the directory location is wrong again.
I tried to place some PHP into my JS file before so I could take advantage of the $plugins_url feature, but that became very convoluted and it's hard to track any errors without a PHP console to work from...
I hope someone here will have a solution for me!

The first example probably fails because there's no http:// (or //)
Use var url = "//" + location.hostname;
The second example should work everywhere if you use a root-relative path:
var dir = '/wp-content/plugins/adsenseunblock/html/adunblock.html #asub00AJAX';

how to include multiple html files from www folder in one page locally phonegap

I have multiple html files which I want to append them into different dynamic DIVs of default.html. I have done it using ajax jquery. But as per apple requirement documents, I should not be downloading any code, so is there any way i can access these html files from www folder locally packaged in phonegap build.
kindly help please...

You would simply include the HTML files in the with the other assets of your application and load them locally using relative URLs when you need them. You could also consider using a templating engine such as Handlebars if you need to inject dynamic data into placeholders in your HTML at runtime.

Simon Thank you for the response.
Previously I was trying to load it with absolute path but that was not the right way to do it, so I used following line of code and it worked like a charm.
$.get('js/a.html').done(function(resultHTML){
//some code
})
I also had to introduce base path to the application for all other ajax requests to be routed to server, therefore had to tweak ajaxSetup for server side requests.
$.ajaxSetup({
beforeSend: function(xhr, options) {
var pathOrURL = options.url;
var _parts = pathOrURL.split(".");
var pathExtension = _parts[_parts.length-1] || ''; //to get extension if any
if(pathExtension !="js" && pathExtension !="css" && pathExtension != "html")
{
if (!(new RegExp('^(http(s)?[:]//)','i')).test(pathOrURL)) { // to check if it is relative or absolute path
options.url = baseUrl + options.url
}
}
});
Its already a well cooked application and at this stage I cannot introduce any template engine.

Paths in nodejs

I'm facing a problem with paths in nodeJs, I route the user to the index page when he specifies the language in the url like this :
app.all('/:locale?/index',function(req,res,next){
if(!req.params.locale){
console.log('no param');
res.render('index');
} else {
var language = req.params.locale;
i18n.setLocale(language);
res.render('index');
}
});
However, in my index.html page the source of images are specified this way : ./images/img1.png , when I route the user, my index.html shows image not found because it considers the path " lang/images/img1.png , it considers the languge in my URL, could you please help?
Thank you

The . in your path is telling the app to look at the current folder, which is lang. You should be able to get around this by specifying either a URL:
<img src="http://myApp.com/images/img1.png">
or by specifying the path from the root directory (everything except http://myApp.com)
<img src="/images/img1.png">
This is probably a better solution, since you can swap your domain easily; for example, working on your local machine (http://localhost:3000/) vs. a deployed app (http://myApp.com)
Generally speaking, I'd almost always use the path from root rather than a relative path (e.g., ./...), since I may move pages around in refactoring, and it's easier to look for direct references than relative ones if I have to change anything.

Is it possible to make it clear if the application run under the root of the site or under an application in js

When deploy the application , it may be deployed under a port directly(a web site in IIS) like this:
http://localhost:8080
Or under a directory(a directory in IIS) like this:
http://localhost:8080/appname
Then I wonder if I can get the root path of the appliation?
Why I ask this question:
In my appliation, I have lots of javascript files, and they would need to know the root path of the applciaiton, for example, it will create a icon, and the image is saved under the /images path under the root of the app, then in this case, how to dertime the location of the image path?

Javascript does not know what directory are you running your application from, only the url of the current site - it does not know, if the host is e.g. stackoverflow.com, stackoverflow.com/questions, or stackoverflow.com/questions/16952967. The best way to deal with that would be to compute such information server-side.
But if you're not using much of url rewriting and most of the time application is run from the main directory, you can create url using information available in window.location:
var url = location.protocol + "//" + location.host + location.pathname

Java Script to get localhost+htdocs folder

I have following url to be build,
http://localhost/myweb/cart/index.php
I want to get the http://localhost/myweb/ bit build dynamically.
To do that on my live web site which is http://www.myweb.com/cart/index.php I can use the following JavaScript code,
var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);
But how do I get my development environment to work since it has http://localhost/myweb/? If I run the above code it will give me http://localhost/ only.
Any suggestions?

window.location.pathname is the thing you search for.
I would suggest you to read the MDN description of window.location. Like everything else in MDN, this is also really straightforward and informative.
If you know that the URL has an unnecessary index.html part at the end you can:
var path = window.location.pathname.split('/');
path.pop();
path.join('/');
or you can slice it (since it is generally faster):
path.slice(0,path.lastIndexOf('/')+1)
EDIT:
Seeing your new question I can say that what you want can't be done consistently and safely by only the current URL.
You need the http://localhost/myweb/ part, which is the URL root of your application. In javascript you are able to get the protocol and domain of the url. On your live site these 2 match, but if your application resides in a subfolder (like the myweb folder at your localhost), this will fail.
What you need is to somehow identify the application URL (the URL root of your application).
The problem is that by only examining the URL, javascript cannot tell where your application resides.
Let's say you deploy your site to: http://localhost/myweb/site1/
You will have the following URL: http://localhost/myweb/site1/cart/index.php
Javascript can split your URL by the slashes (/) but it has no way of nowing how many subfolders it should select. For example from the URL above your application root can be any of the following: http://localhost/, http://localhost/myweb/, http://localhost/myweb/site1/, http://localhost/myweb/site1/cart/.
By an other approach (which I suggested first) you can drop the end of the URL (in your case the cart/index.php part). This will only work if your URL structure IS very rigid, so all the pages this script is executed on reside in one subfolder.
So it will break on the following URL: http://localhost/myweb/site1/gallery/old/index.php or similar.
Your best bet would be to make this a "config variable" in a separate file which you edit on every location it is deployed to.
Either as a PHP variable ($appRoot = "http://localhost/myweb/") which you generate the javascript with.
Or more simply a javascript variable (var appRoot = 'http://localhost/myweb/'). Make a separate js file, call it something like config.js, add the above line to it and reference it before your other javascripts.