Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Therman Trotman
Therman Trotman
50 Points

Trying to hide div on page reload

I have some JavaScript that, on succession, reloads the page. This works fine. However, I've added a step where I want to remove a div after the reload. It looks like it works, but then the div immediately reappears. I'm not sure what I'm doing wrong.

For context, I'm having the user request the services of a mentor. After they click request, they shouldn't see the request button anymore.

function requestMentor() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('RequestList');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);

    oListItem.set_item('ProfileID', profileId);
    oListItem.set_item('RequestStatus', 'Pending');
    oListItem.set_item('Title', _spPageContextInfo.userLoginName);
    oListItem.set_item('RequestType', 'Request For Mentor');
    oListItem.set_item('NameOfRequested', fullName);

    oListItem.update();

    clientContext.load(oListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Thank you! The Mentor will be notified.'); 
    document.getElementById("MSOZoneCell_WebPartWPQ6").style.visibility = "hidden";  //this is the div I'm trying to hide 
    location.reload();
}


function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

1 Answer

Steven Parker
Steven Parker
231,140 Points
Steven Parker
Steven Parker
231,140 Points

All DOM manipulation is done on the current page. The loaded page will always start with all states at the initial values. The async code apparently has just enough time to react to the event and remove the button before the new page is fully rendered and everything is reset.

You could use local storage to set a value that would then be examined by the incoming page code to remove the button.

Another approach might be to use AJAX to pass information to the server without reloading the page at all.

Therman Trotman
Therman Trotman
50 Points

That sounds great. thx. I'm interested in the AJAX approach. I'm just not sure how to do that. Do you know how I would do that? I'm still a novice at JavaScript.

Steven Parker
Steven Parker
231,140 Points
Steven Parker
Steven Parker
231,140 Points

If you're already comfortable with JavaScript in general, you might enjoy the intermediate-level AJAX Basics course. :wink:

Therman Trotman
Therman Trotman
50 Points

I appreciate that. Thanks for responding