calling a file jQuery file from html page

Question

I created some test code that uses Ajax to refresh/update two fields. It works great and now, to keep things neat, I have created a file called Ajax.js

In my HTML page where all my fields are, I would like to call this file and make it update the two variables.

I did the following:

In my HTML page:

  <--- included the meta lines needed for the Ajax file ---->
  <--- included: my jQuery includes needed ---------->
  <---- my link to the Ajax.js file -------------->
 <script src="Ajax.js"></script>

 <----- made the call this way, I am not sure is right ------->
 <!----- Ajax Update Fields Function ----->
 <script>
   jQuery('nav').Ajax();
 </script>

The call doesn't work, it doesn't update the fields. Here is the actual Ajax.js code:

// JavaScript Document
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 


$(function()
{
  setInterval(function()
   {
$.get("ajax_v00.html",function(data,textStatus, jqXHR)
 {
  var temperature=$(data).filter('#variable1').text()
  var time=$(data).filter('#variable2').text()
  $('#variable1').text(temperature)
  $('#variable2').text(time)
 })
 .fail(function(jqxhr,textStatus,errorThrown) //Callback failed
  {
   $('#errors').text("Errors:" + textStatus + " " + errorThrown)
  })
 .done(function() //Callback succeeded
  {
   $('#errors').text('Errors:');
  })
   },1000);
})

How can I call this properly? Hopefully, I explained myself correctly?

What do you see in the console? What URL are you loading the page through? What is $(...).Ajax()? — SLaks
– SLaks, Commented Sep 9, 2013 at 16:05
If console is my screen's website, I see the first values given, but that is all, it doesn't refresh. I am not sure what you mean with the second question? $(...).Ajax() is how I imagined that I was suppose to call the function. I really, have no idea on how to call the function, but I would like for it start the second the page is loaded. — Neil Porven
– Neil Porven, Commented Sep 9, 2013 at 16:10
Archer, so if I understand you correctly. I don't need something that actually calls the function or Ajax.js file, but just including <script src="Ajax.js"></script> it will trigger the function to execute? — Neil Porven
– Neil Porven, Commented Sep 9, 2013 at 16:19

Reinstate Monica Cellio · Accepted Answer · 2013-09-09 19:02:18Z

2

Put this in the head of your html page...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Ajax.js"></script>

Remove the script tags from Ajax.js.

Remove jQuery('nav').Ajax(); You don't need this. It's looking for a jQuery function called Ajax(), which does not exist. Your code in Ajax.js will already run when the page is loaded as you have wrapped it in the shorthand version of document.ready...

$(function() {
    setInterval(function() {
        $.get("ajax_v00.html",function(data,textStatus, jqXHR) {
            var temperature=$(data).filter('#variable1').text();
            var time=$(data).filter('#variable2').text();
            $('#variable1').text(temperature);
            $('#variable2').text(time);
        })
        .fail(function(jqxhr,textStatus,errorThrown) {
            $('#errors').text("Errors:" + textStatus + " " + errorThrown);
        })
        .done(function() {
            $('#errors').text('Errors:');
        })
    },1000);
});

edited Sep 9, 2013 at 19:02

answered Sep 9, 2013 at 16:16

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Neil Porven Over a year ago

I tried it, and it seems to get executed once. It actually needs to go there continually to grab the next value, the next, ...etc. At least it does go in, I can hit F12, place a breakpoint and see that it does go there. You don't need to invoke it or call it, it runs once.

Reinstate Monica Cellio Over a year ago

I've just tidied the code and added the missing semi-colons, but I can't see any reason why that wouldn't run every second. Maybe someone will spot something, but I can't see anything wrong with it.

Neil Porven Over a year ago

Hi Archer, I ran the code (the HTML portion) thru W3 and it found some errors. I am trying to correct those errors, although I don't think it has anything to do with the Ajax portion.

Neil Porven Over a year ago

I just thought of something, but I don't know how to fix it? variable1 and variable2 are declared in Ajax.js, so even though I use it in .html page, they might only exists inside Ajax.js. If you feel that, this might be the problem, then how can I make variables 1 & 2 global?

Reinstate Monica Cellio Over a year ago

variable1 and variable2 are not declared in Ajax.js. They're elements on the page that includes Ajax.js, unless there's more that we haven't seen?

Kalaiarasan Manimaran · Accepted Answer · 2013-09-09 16:07:41Z

0

Please use this script.

   <script>
    $(document).ready(function() {
                      jQuery('nav').Ajax();});
  </script>

answered Sep 9, 2013 at 16:07

Kalaiarasan Manimaran

1,6781 gold badge13 silver badges19 bronze badges

1 Comment

Neil Porven Over a year ago

Sorry, I did have that originally.... it didn't work so I took out $(document).ready(function() { });

Collectives™ on Stack Overflow

calling a file jQuery file from html page

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related