ajax url showing undefined on console logging

Question

I am trying to pull some content with ajax and at my first step i have fallen wrong .

Here is my simple code

<a href="page.php" data-content="ajax"</a>

and my js is

(function($){

    'use strict';

     var ajaxcontent = $('[data-content="ajax"]'),
         ajaxUrl;

     ajaxcontent.each(function(index, el) {
         var ajaxUrl = $(this).attr('href');
     });

     console.log(ajaxUrl);

})(jQuery);

but it shows undefined in console.

I have also tried with --

<a href="" data-content="ajax" data-url="page.php"></a>

(function($){

    'use strict';

     var ajaxcontent = $('[data-content="ajax"]'),
         ajaxUrl;

     ajaxcontent.each(function(index, el) {
         var ajaxUrl = $(this).data('url');
     });

     console.log(ajaxUrl);

})(jQuery);

result is same .

You can try this.. `var ajaxUrl=el.getAttribute('href')` http://jsfiddle.net/scdbfduk/ — Rakesh_Kumar, May 11 '15 at 05:47

Pranav C Balan · Answer 1 · 2015-05-11T05:52:42.970

Remove the var inside the callback function otherwise it act as a local variable

(function($){

    'use strict';

     var ajaxcontent = $('[data-content="ajax"]'),
         ajaxUrl;

     ajaxcontent.each(function(index, el) {
         ajaxUrl = $(this).data('url');
     });

     console.log(ajaxUrl);

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="" data-content="ajax" data-url="page.php"></a>

Also value of ajaxUrl will be the href attribute value of last item with the selector. So if there is only one item then use the following

(function($) {

  'use strict';

  var ajaxUrl = $('[data-content="ajax"]').data('url');
  console.log(ajaxUrl);

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="" data-content="ajax" data-url="page.php"></a>

score 0 · Answer 2 · edited May 23 '17 at 11:43

First of all, please take a look at this post

Then you can see that (function(){})() is mealy a function that is executed in place.

it means that if you have your <a> tag before this script in your page, your code will work and if your <a> tag is after your script, it will return undefined because at the moment your script is running, there is no such element in your DOM

So the best way to achieve what you want is to use $(document).ready(function(){ or the shorter method $(function(){

So your script will look like this:

$(function(){
   'use strict';

     var ajaxcontent = $('[data-content="ajax"]'),
         ajaxUrl;

     ajaxcontent.each(function(index, el) {
         ajaxUrl = $(this).data('url');
     });

     console.log(ajaxUrl);
});

score 0 · Answer 3 · answered May 11 '15 at 06:39

The below fiddle works. Remember to use the callback after the dom element else the element wont be inserted, else use ready function as shown.

    $(document).ready(function () {
    (function($){

        'use strict';

         var ajaxcontent = $('[data-content="ajax"]'),
             ajaxUrl;

         ajaxcontent.each(function() {
             ajaxUrl = $(this).attr('href');
             console.log('each is ' + ajaxUrl);
         });

         console.log('last one is' + ajaxUrl);

    })(jQuery);
});


<a href="page.php" class="a" data-content="ajax"></a>
<a href="page2.php" class="a" data-content="ajax"></a>
<a href="page3.php" class="a" data-content="ajax"></a>
<a href="page4.php" class="a" data-content="ajax"></a>

JSFiddle

ajax url showing undefined on console logging

Here is my simple code

and my js is

I have also tried with --

3 Answers3