Changing css in partial view using JQuery

Question

I've got a view with a button and below that a div that is filled using ajax and a partial view.

This is the code that belongs to the button on the view;

$(document).on('click', '.btn-release', function () {
    StartReleaseVersionEdit();
    ReleaseVersionEdit();
}

Using Ajax I can alter the data that is displayed inside the table, this happens when I click the button at the top of the page;

function StartReleaseVersionEdit() {
    var url = '@Url.Action("ChangelogMavisTabel")';
    url = url + '?order=0&paging=1000';
    $.ajax({
        type: "GET",
        cache: false,
        url: url,
        success: function (data) {
            $("div#changelog").html(data);
        }
    });
}

This code works flawlessly. Once I want to alter the css of an element inside this partial view using JQuery to set the display to none, it works for a split second but then returns to its default value right after.

function ReleaseVersionEdit(){    
    $('.releasebutton').css('display','inline');
    // .releasebutton default display=none
}

What can I do to make this work correctly? I can't put the JQuery inside the partial view's code because it is triggered by the button on the view.

Simply move the ReleaseVersionEdit function into the success method of your AJAX call — connectedsoftware
– connectedsoftware, Commented Sep 26, 2016 at 9:33
Ajax is async. Your calling the ReleaseVersionEdit() function before your view is loaded. Call the function in the success callback (after $("div#changelog").html(data);) — user3559349
– user3559349, Commented Sep 26, 2016 at 9:33

connectedsoftware · Accepted Answer · 2016-09-26 09:40:31Z

1

Move the ReleaseVersionEdit() function into the success method of your AJAX call, that way you can guarantee it is only called after the partial is loaded. Remember the AJAX call is asynchronous - jQuery.ajax():

$(document).on('click', '.btn-release', function () {
     StartReleaseVersionEdit();
  // ReleaseVersionEdit(); Remove from here as this could execute before the partial is loaded
}

function StartReleaseVersionEdit() {
    var url = '@Url.Action("ChangelogMavisTabel")';
    url = url + '?order=0&paging=1000';
    $.ajax({
        type: "GET",
        cache: false,
        url: url,
        success: function (data) {
            $("div#changelog").html(data);
            ReleaseVersionEdit(); // Added here so will always be called after the partial has been loaded
        }
    });
}

edited Sep 26, 2016 at 9:40

answered Sep 26, 2016 at 9:34

connectedsoftware

7,0973 gold badges33 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Changing css in partial view using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related