Javascript function not properly defined?

Question

I have a simple javascript code that calls another page using AJAX to update my database records. Im using onclick in a link to pass my variable and call the function. In debug, I get the common error "Function addFeatured not defined".

I have read many posts here on StackOverflow and I realize the most common problem I've found is that the function itself, while defined, is not accessible globally. I'm very new to javascript, and still don't fully understand how to tell if my particular script is global or not. I have looked at other scripts from slideshows and my one script from a lightbox effect, and what I have seems (to me) to be what it should, however, my lightbox is not using an onclick handler.

It is also my understanding, from what I've read so far, that using onclick in markup is not a good practice. Is this generally true? If so, what would be the proper way to accomplish what Im trying to do?

Here is the code block from my page (exactly as I have written in my IDE):

<li><a onclick="addFeatured(<?php echo $r['id']; ?>)"><i class="icon-trash">    </i> Add to Featured</a></li>
                        <script type="text/javasript">

function addFeatured(itemId)
{
 $.ajax({
  'url': 'addFeatured.php', 
   'type': 'GET',
  'dataType': 'json', 
  'data': {itemid: itemId}, 
   'success': function(data) 
   {
       if(data.status)
       {
           if(data.added)
            {
                    $("span#success"+itemId).attr("innerHTML","Added Dog to Featured Categories.");
             }
             else
             {
                    $("span#success"+itemId).attr("innerHTML","This item is already on your list");
            }
        }
   },
   'beforeSend': function() 
     {
           $("span#success"+itemId).attr("innerHTML","Adding Dog to Featured...");
     },
      'error': function(data) 
      {
      // this is what happens if the request fails.
        $("span#success"+itemId).attr("innerHTML","An error occureed");
    }
});
              }
 </script>

I really have an interest in learning javascript and understanding how it works. Any pointers would be Great!

Great that you are learning javascript. My advice is don't use stack overflow as a learning tool. You will get a lot of inconsistent and at times incorrect answers. Check out these free books. Really helped me understand javascript. github.com/getify/You-Dont-Know-JS — Yasin Yaqoobi
– Yasin Yaqoobi, Commented Aug 12, 2016 at 13:49

pwolaq · Accepted Answer · 2016-08-12 13:30:17Z

3

you have missing letter in your code

replace

<script type="text/javasript">

with

<script type="text/javascript">

using type other than text/javascript prevents browser from parsing the contents

bonus tip - don't use attr('innerHTML', ...) because it is wrong on many levels... element.innerHTML / $(element).html() (if you use jQuery) should be used instead

answered Aug 12, 2016 at 13:30

pwolaq

6,41221 silver badges45 bronze badges

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

5 Comments

Matthew Davis Over a year ago

That seemed to fix my initial problem. I can't believe I missed the letter. real quick, I just got this after I added the c. index.php:43412 Uncaught TypeError: Cannot read property 'status' of null. Any Pointers? Thanks

pwolaq Over a year ago

try some debugging - console.log(data) at the line before should help

Fortune Over a year ago

"text/javascript" is obsolete though, you should use "application/javascript".

Olivier Boissé Over a year ago

it seems your data object doesn't have the status property

Matthew Davis Over a year ago

I figured the status out. I had the wrong variable in the database query so there was nothing being returned. It's working now! Thanks all for the quick and fast responses.

Collectives™ on Stack Overflow

Javascript function not properly defined?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related