jQuery Ajax SlideUp Not Working?

JavaScript
1

Hi all, I have written some jQuery but the slideUp is not working. If I use alert(‘Saved’); as the success then it works but slide up isn’t…any ideas?

     <script>
         $(document).ready(function(){
         $('#productAddRightCol ul li').click(function(){
             
            $.ajax({
              type: "POST",  
              url: "/admin/adminincludes/delete_accessories.php",
              success: function(){
                  $(this).slideUp();
              }
            });
            
         });
         
         });
     </script>
2

I think this is a scope problem.

You’re referencing this, but in the context of the ajax request this will be (I think) the window object.

Try this instead:


<script>
         $(document).ready(function(){
         $('#productAddRightCol ul li').click(function(){
             var self = this;
            $.ajax({
              type: "POST", 
              url: "/admin/adminincludes/delete_accessories.php",
              success: function(){
                  $(self).slideUp();
              }
            });
           
         });
         
         });
     </script>

That might work a bit better :slight_smile:

3

Hey dude, that’s perfect, exactly what I needed. Thanks for the help and pointers, it’s appreciated :slight_smile:

4

Hi there, another quick question, I’ve realised that it would be better to use an onclick function for this as I need to pass a couple of parameters. The slideUp isn’t working, it was when I was using the on document ready. Any ideas dude?

     <script>
         function removeAccessory(prodId, accessoryId){

             var bring = $(this);

            $.ajax({
              type: "POST",  
              url: "/snuffy/adminincludes/delete_accessories.php",
              data: "prod="+accessoryId+"&master="+prodId,
              success: function(data){
                  bring.slideUp();
              }
            });
            
    
         } 
      
     </script>
5

The most simple solution i can think of is to add this to your onclick event as an argument as it cannot be referenced from inside a function that doesn’t return the element object.

<a href="#" onclick="removeAccessory(this, ...)">Click me</a>
6

How about not using inline events to associate the event?
When you associate the event from JavaScript, the this keyword automatically references the element that fired the event.

If you absolutely must use an inline event though, you can achieve the same thing without needing to change the function parameters with:

<a href="#" onclick="removeAccessory.call(this, ...)">Click me</a>

Where the first parameter provides the context within which the function will be called, and the second parameter will be the first argument that the function receives.

7

Hey chaps, thanks for the quick replies. So generally, is it bad practice to use inline events such as the onclick function, etc?

8

Here’s the best information about events.

Show the site navigation on the left side of the screen, where you’ll find a section all about the early event handlers, which is what you’re asking about.