jquery parents/closest not working

Z

2

5

I have a link which posts some data to a controller. It is working fine and updates the data. But I want to change the css of the parent div but it is not happening. I have tried a lot of variations but I must be doing something stupid.

The code is below

View:

@foreach (var item in Model)
{
    <div class="added-property-excerpt">
        ...
        <div class="added-property-links">
        ...
        @if (!item.IsPropertyDisabled) { 
                @Html.ActionLink("Take off the Market" , "Disable", "Property", new { id = item.PropertyId }, new { id ="disable-link" })
            }
            else {
                @Html.ActionLink("Bring on the Market" , "Enable", "Property", new { id = item.PropertyId }, new { id ="enable-link" })
            }
        </div>
    </div>
}

JQuery

 <script>
     $(function () {
         $('a#disable-link').click(function (e) {
             $('.added-property-links').text('loading...');
             $.ajax({
                 url: this.href,
                 dataType: "text json",
                 type: "POST",
                 data: {},
                 success: function (data, textStatus) { }
             });
             $(this).closest('.added-property-excerpt').css("background", "red");
          // $(this).parent('.added-property-excerpt').css("background", "red");
             e.preventDefault();
         });
     });
 </script>

Zodiac answered 14/10, 2012 at 0:17 Comment(6)

Could you post a sample of the exported HTML? – Timekeeper 14/10, 2012 at 0:21

Have you tied parents() instead of parent() – Suborbital 14/10, 2012 at 0:21

You are generating invalid markup. IDs must be unique. – Milstone 14/10, 2012 at 0:23

what does the debugger / log say? could the ajax call throw an exception? – Vengeance 14/10, 2012 at 0:34

'undefined' - thanks I didnt realise it .. as of now i just have one property so it didnt matter! will make them unique – Zodiac 14/10, 2012 at 0:53

@Ja͢ck You Legend!!!! – Almaalmaata 27/1, 2016 at 11:44

C

4

Try this

$(function () {
    $('a#disable-link').click(function (e){
        var parentDiv=$(this).closest('.added-property-excerpt');
        $('.added-property-links').text('loading...');
        parentDiv.css("background", "red");
        $.ajax({...});
        e.preventDefault();
    });
});

See the difference in a working example and non-working example.

Cowans answered 14/10, 2012 at 0:49 Comment(2)

works perfectly... thanks. But can you tell me why the previous code was not working? – Zodiac 14/10, 2012 at 0:52

@Tripping, I think $('.added-property-links').text('loading...'); line is clearing the link/<a> tag from the dom and $(this) was not able to reference it after that line. – Cowans 14/10, 2012 at 0:55

T

5

did you try:

$(this).parents('.added-property-excerpt').css("background", "red");

parents with an s.

What it does is that it goes from parent to parent until it find the class you want.

Timekeeper answered 14/10, 2012 at 0:19 Comment(1)

Good point. I've never used closest but I've now read the documentation. Thanks – Timekeeper 14/10, 2012 at 0:23

C

4

Try this

$(function () {
    $('a#disable-link').click(function (e){
        var parentDiv=$(this).closest('.added-property-excerpt');
        $('.added-property-links').text('loading...');
        parentDiv.css("background", "red");
        $.ajax({...});
        e.preventDefault();
    });
});

See the difference in a working example and non-working example.

Cowans answered 14/10, 2012 at 0:49 Comment(2)

works perfectly... thanks. But can you tell me why the previous code was not working? – Zodiac 14/10, 2012 at 0:52

@Tripping, I think $('.added-property-links').text('loading...'); line is clearing the link/<a> tag from the dom and $(this) was not able to reference it after that line. – Cowans 14/10, 2012 at 0:55

Recommended topics

Hot tags