SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Ajax SlideUp Not Working?

    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?

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

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    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:

    Code JavaScript:
    <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

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey dude, that's perfect, exactly what I needed. Thanks for the help and pointers, it's appreciated

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code JavaScript:
         <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. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    HTML Code:
    <a href="#" onclick="removeAccessory(this, ...)">Click me</a>
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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.

    HTML Code:
    <a href="#" onclick="removeAccessory(this, ...)">Click me</a>
    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:

    HTML Code:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey chaps, thanks for the quick replies. So generally, is it bad practice to use inline events such as the onclick function, etc?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by coxdabd View Post
    Hey chaps, thanks for the quick replies. So generally, is it bad practice to use inline events such as the onclick function, etc?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •