Home/ Questions/Q 6692611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:53:15+00:00

I am building a little widget that displays information from a different section of

  • 0

I am building a little widget that displays information from a different section of the site (Joomla) when users mouse over a particular menu option. Based on the behavior I am seeing, it seems to me like this method doesn’t work w/ something like a CMS article because I keep getting an empty (see: http://cl.ly/1k3n151n3o0d1f2A1e3k) response.

The code below works great and does exactly what I want it to do when I reference a static file:

<!DOCTYPE html>
<html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">

  <title>Div/Scraping Testing</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="http://scripts.dri.edu/Other/modernizr.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
  {
    $("#wifi").mouseover(function()
    {
      $("#show").load('wifi.php #wifi');
      $("#show").show();
    });
    $("#wifi").mouseout(function()
    {
      $("#show").hide();
    })
  });

  </script>

</head>
<body>
  <div id="container">
    <header>

    </header>

    <div id="main" role="main">
      <div id="nav">
        <center>
          <a href="wireless.php" id="wifi">WiFi</a> || <a href="#">Test</a>
        </center>
      </div>
      <div id="show" style="display:none;">
        <center><h3>Wireless Info.</h3></center>
      </div>
    </div>

    <footer>
    </footer>
  </div>
</body>
</html>

As you would expect the data inside the div w/ ID=”wifi” is displayed in my “show” div. When I change the JavaScript to the following:

  $("#show").load('http://cmsurl.com/is/is-network-access/22-wireless-access/ #wifi');

I get the empty response from the picture I link to above. Is this just a limitation of the .load() method in the sense that it can’t parse the data from a CMS article and needs a static file or am I just going about things in the wrong way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re running into restrictions imposed by the Same Origin Policy. In short, AJAX calls to a different domain are prohibited and will always fail.

    You need to either use JSONP (mostly applicable to data returned by APIs) or proxy the request through your own server/domain.

    • 0