in

Dot Net Mafia

Group site for developer blogs dealing with (usually) .NET, SharePoint 2013, SharePoint 2010, Office 365, SharePoint Online, and other Microsoft products, as well as some discussion of general programming related concepts.

Kyle Kelin on .Net

January 2009 - Posts

  • Disable a Button When the User Clicks It

    A common solution that I had to implement recently is users on a client's site were double clicking buttons and causing issues. In addition to causing issues users weren't sure if the site was working correctly on long running processes. The JavaScript code I wrote to solve this problem can be divided into two segments. One part handles buttons that make asynchronous calls and another part that handles buttons that cause post-backs. For the buttons that cause post-backs we loop through all buttons and assign the CanSubmitFunction as the click event for that button. In the CanSubmitFunction we keep track of if the user has clicked the button before and if they have we display an alert and prevent the button from submitting. I should mention that I originally tried to disable the button. But doing this prevents the button from submitting and trying to force a submit is difficult to say the least.

     

    // wire up the disable click event

    var buttonControls = document.getElementsByTagName("input");

    for (i = 0; i < buttonControls.length; i++) {

    // if this input type is button, disable

    if (buttonControls[i].type == "submit") {

    addClickEvent(buttonControls[i], CanSubmitForm);

    }

    }

     

    function addClickEvent(obj, fn) {

    if (obj.addEventListener) {

    obj.addEventListener('click', fn, false);

    } else if (obj.attachEvent) {

    obj.attachEvent('onclick', fn);

    }

     

    }

     

    var isSubmitted = false;

    function CanSubmitForm() {

    var canSubmit = false;

    if (!isSubmitted) {

    isSubmitted = true;

    canSubmit = true;

    }

    else {

    alert("Please wait for page to load before making another selection.");

    }

    return canSubmit;

    }

     

    For buttons that makes asynchronous calls we can disable the button. In addition to disabling the button we change the cursor so it shows the hourglass. I think the code below is pretty self-explanatory. One issue I do have with this solution is having to different types of behaviors on the buttons throughout the site. I may change the asynchronous code show it also displays an alert when the user clicks on the button twice.

    // wire the callbacks for the Ajax events

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_initializeRequest(InitializeRequest);

    prm.add_endRequest(EndRequest);

    //--------------------------------------

     

    function InitializeRequest(sender, args) {

    document.body.style.cursor = "wait";

    var buttonControls = document.getElementsByTagName("input");

     

    for (i = 0; i < buttonControls.length; i++) {

    // if this input type is button, disable

    if (buttonControls[i].type == "submit") {

    buttonControls[i].disabled = true;

    }

    }

    }

     

    function EndRequest(sender, args) {

    document.body.style.cursor = "default";

    var buttonControls = document.getElementsByTagName("input");

     

    for (i = 0; i < buttonControls.length; i++) {

    // if this input type is button, enable

    if (buttonControls[i].type == "submit") {

    buttonControls[i].disabled = false;

    }

    }

    }

     

    The solution is deployed to an existing SharePoint site so it needed to work for all buttons instead of specifying each button by name. You can see above I made use of the unobtrusive JavaScript pattern to make this possible. We also need to put this code in a JavaScript file and add it to the master page that the SharePoint site is using. One more thing to note is I had the JavaScript file reference just above the closing tag to ensure that all the DOM elements have been loaded before the JavaScript code executes.

    *Warning - This has not been tested in Firefox. This was a closed intranet and not a requirement for this solution. Though I doubt it would take long to make this code cross-browser compatible.

     

  • Searching Boolean Values in SharePoint

    By no means am I an expert in Search but I did want to make a note of one thing. A Boolean is represented by yes/no in a SharePoint list but in your search query string you should use true/false as the value. For example I had a published field that I wanted to append to the query string based on certain user selections. So I added "Published:true" via code. If you say add "Published:1" you will get the following error: "Your search cannot be completed because of a service error. Try your search again or contact your administrator for more information".

    One final thing when you are mapping your properties be sure and select the type before clicking "Add Mapping". It isn't obvious at first but SharePoint is filtering the results based on the type.

2015 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems