jQuery-AJAX Head Script Error

JavaScript
1

I want to display a list of lists in a sidebar on every page of my website. Visitors can click on a button labeled “Africa,” and a list of countries in Africa drops down. Or they can choose a list of Eurasian countries, U.S. states, etc.

But rather than add all that code to my HTML, I’d like to give users the choice of fetching whatever list they want to see. I did a little research, and it sounds like I need to learn how to use jQuery + AJAX, using the Post method.

I’m confused by the tutorials, though. Some focus on AJAX, AJAX with various versions of jQuery, JSON, etc. I haven’t found a working example that really works for me.

I finally put together the following script…

<head>
<script>
$(document).ready(function(){
    $("button#lam").click(function()
        $.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php", function(response) {
            $("#lam-result").html(response);
        });
    });
});
</script>
</head>

<body>
  <button id="lam">Latin America<button>
  <div id="lam-result"></div>
</body>

Now I’m trying to troubleshoot the reason it isn’t working. I don’t see any errors when I preview it, however I do see an error on this line when I view it with Dreamweaver in code view:

$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php", function(response) {

So I’m basically asking if anyone sees an error in my script. If the script is OK, then maybe I need to link to a special jQuery file? I’m already hooked up to the main jQuery files; I have other jQuery functions that work.

Thanks.

1 Like
2

P.S. All the page on my site end with .php. According, I changed $(“#lam-result”).html(response); to $(“#lam-result”).php(response); but the results are the same.

3

Since you’re not sending any parameters, you probably want to use $.get() instead. However, I don’t think this is an error, but I don’t see anything else wrong with it. You’re probably getting some weird data back from the requested URL.

My suggestion is to drop Dreamweaver, and debug this with a real browser like Chrome, Firefox, IE11+/Edge, or Safari. Do it this way, you can look at your network tab and view the request errors.

If you’re using Chrome, open Developer Tools, refresh the page, then look for the Network and Console Tabs.

The Network tab will show you the requests you’re making, which you should see a request to http://gx/2b/inc/C/Shared/DBLists/World/lam.php when you click the buttonl and a response. If there was some kind of error, then it will be red. Otherwise it will be the same color as the rest of the requests. If it was good, then if you click the URL in the list, it will give you some new tabs: Headers, Preview, Response, Timing. You’ll want to look at Preview and Response to see what is actually coming back. Headers will be useful down the road when you start sending data, but for now, for this, it’s probably not that important.

The Console tab will show you any JavaScript errors you may be getting. Most of the time you can Google these errors word for word and get a relevant StackOverflow post that answers your question.

I suggest using Chrome, even if it’s not your main browser of choice, but the other major browsers all have the “Developer Tools” feature. Google should help you get started with the one

4

Thanks for the tips; I’ll check them out.

I thought Post might be the best way to go because there’s reportedly no limit on the file size you can include. Some of the files I want to include feature tables with over 200 rows.

5

That’s probably a configuration thing in your PHP, it’s not part of the GET/POST spec AFIAK. I routinely use both for requests of several megabytes.

But, 200 rows is not much unless you have some seriously big rows! :smiley: Either should be fine for all the countries in the world, regardless of your configuration.

When you go to a URL from your browser, you are making a GET request. The average HTML it sends back it probably much larger than the country list you are using. You can even view the source here to see.

6

Thanks again. I just discovered my problem - the file I’m trying to include is on a different domain. More precisely, the page I’m working with is on a subdomain.

When it’s online, it will look something like this:

www.mysite.com/ajax.php (File with the data to be included)

dos.mysite.com/world.php (File on which the data from ajax.php will be displayed)

I was able to make a working jQuery-AJAX script using two files on the same site, but it doesn’t appear to include files from subdomains.

7

You can use relative URLs, and that should get around that for development. There’s not a whole lot of reason to use a full domain for your own site and opening it up can cause security issues.

eg:

$.post("/world.php", function(response) {
   $("#lam-result").html(response);
});
8

I’m confused. If there’s a page named world.php on both the main site and the subdomain, wouldn’t I have to change $.post(“/world.php” to $.post(“mysite/world.php” ?

But maybe I should rethink this whole thing because of the security issues you mentioned. Basically, I planned on using jQuery AJAX to display data from mysite/ajax.php on several subdomains. But maybe it would be better to instead put copies of mysite/ajax.php on all of my subdomains - e.g. dos.mysite/ajax.php.

It would be convenient to have a single collection of AJAX files in one location, but copying them to the subdomains would make it easier to work with them, and I’d avoid the security issues you mentioned.

I have to go to work now, but I’ll play with your tips later tonight. Thanks again.

9

If you’re copying the files over to your server, as long as it’s relative to the path you’re calling it from on both sites, it should be fine. As long as it exists in the same folder structure in both places.

eg:

\project
│   index.php
│   world.php    
│
└───\css
    │   style.css
    │
|
└───\images
    │    hello.jpg

Don’t think too much about the security thing I mentioned. I meant that for enabling cross domain requests in your server configuration. Nothing else. It’s a very specific configuration change you’d have to make to your Apache.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.