locked
Trying to populate a NewForm’s input field with a value returned from an AJAX call RRS feed

  • Question

  • Hello, in a recent post I was able to make an AJAX call to a utility that creates a new external network directory and then returns new directory reference number and now I’m having a problem populating the NewForm’s input field with the new document reference number. Where the “<<<<<<<<<<<” arrows are below, i’ve tried to reference the NewForm’s input field and populate it with the new documenet reference number, but its looking like the NewForm is no longer available or in focus. So any suggestions on how to populate the NewForm’s input field with the reference number returned by the AJAX call would be greatly appreciated!

    <script type="text/javascript">
    
    var originalSaveButtonClickHandler = function(){};
    
    $(document).ready( function () {
      var saveButton = $("[name$='diidIOSaveItem']") //gets form save button and ribbon save button
      if (saveButton.length > 0) {
        originalSaveButtonClickHandler = saveButton[0].onclick;  //save original function
      }
      $(saveButton).attr("onclick", " getData()"); //change onclick to execute our custom validation function
    });
    
    function getData() {
      var def = $.Deferred();
      qaToken.getUserToken().done(function (eToken) {
    
        var d = {};
        var str = " ";
        d['parentObjectID'] = 1550109;
        d['objectName'] = "NewFormRecDir60";
        d['objectTypeID'] = 1;
        
        $.ajax({
            url: "http://apps.qa.corp/_services/webdocs/webdocs.ashx?action=object.CreateFolder",
            data: d,
            headers: { "X-QA-UserToken": eToken.userToken },
            type:"POST"
        }).done(function(ajaxData) {
            def.resolve(ajaxData.d);
    
            //$('f9b34484-e365-44d3-95fc-5c27b31abfcb').val(ajaxData.d);  //<<<<<<<<<<<<<<<<<<<<<<<<
            //$('input[name="DirectoryRef"]').val(ajaxData.d);                        //<<<<<<<<<<<<<<<<<<<<<<<<
            //$("[name$='DirectoryRef']").setvalue(ajaxData.d)                      //<<<<<<<<<<<<<<<<<<<<<<<<
            //$('DirectoryRef').val(ajaxData.d);                                                    //<<<<<<<<<<<<<<<<<<<<<<<<
            //SPUtility.GetSPField('DirectoryRef').SetValue(ajaxData.d);       //<<<<<<<<<<<<<<<<<<<<<<<<
            
            originalSaveButtonClickHandler();                                                      //run the SaveButtonClickHandler             
    
        }).fail(function (jqXHR, textStatus, errorThrown) {
            def.reject(jqXHR, textStatus, errorThrown);
            alert("fail1");
        });
      });
      return def.promise();
    }
    
    var qaToken = {
        userToken: "",
        userId: "",
        getUserToken: function () {
            var that = this;
            var def = $.Deferred();
            if (that.userToken !== "") {
                def.resolve(that);
                return def.promise();
            }    
            $.ajax({
                url: "http://apps.qa.gov/_Services/Authentication/UserToken.ashx",
                dataType: "jsonp"
            }).done(function (eToken) {
                that.userToken = eToken.userToken;
                that.userId = eToken.userId;
                def.resolve(that);
                alert("success2");
            }).fail(function (jqXHR, textStatus, errorThrown) {
                def.reject(jqXHR, textStatus, errorThrown);
                alert("fail2");
            });
            return def.promise();
        }
    }
    </script>
    

    Tuesday, December 29, 2015 3:33 AM

Answers

  • Thanks Cheng and Patrick, its working now by using the ms-formbody with field ID statement highlighted below, but because I need to make this script portable, I will need to try and use the field name as a reference, so experimenting with that how and am definitely going to try your alls recommendations in the next iteration! thanks again guys! 

      }).done(function(ajaxData) {

            def.resolve(ajaxData.d.object);

            str = loopobjaray(ajaxData.d.object);

            var hyperlinkvar = "file://qa.corp/o/"+str;

            $(".ms-formbody input[name='ctl00$ctl37$g_e1cecff8_aa5e_4f89_84a7_e454cd21d774$ff21$ctl00$ctl00$TextField']").val(hyperlinkvar);

            originalSaveButtonClickHandler();

    • Proposed as answer by Patrick_Liang Thursday, December 31, 2015 6:10 AM
    • Marked as answer by Patrick_Liang Wednesday, January 6, 2016 1:21 PM
    Wednesday, December 30, 2015 4:15 PM

All replies

  • Hi Man,

    Can you delete the var def = $.Deferred(); from within your GetData Method and always return FALSE?

    The save button handler cannot handle Deferred object


    Cheng

    Tuesday, December 29, 2015 9:38 AM
  • Thanks Cheng, i tried to see if i could do a simple update of a NewForm.aspx field independent of the AJAX calls and it turns out I'm unable to directly update the "Title" field, so it looks like i need figure out how to do a simple update before trying to update a field via the AJAX call:

    Here's a test that i did and the Title field is not being updated:

    <script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

    var test1 = "abcdefg";
    $("input[Title='Title']").val(test1);

    });
    </script>

    Tuesday, December 29, 2015 7:04 PM
  • I don't usually use document.ready to update SharePoint's DOM. I always prefer to use

    ExecuteOrDelayUntilScriptLoaded(function(){$("input[id^=Title_]").val("Helo");}, "sp.js")

    the ExecuteOrDelayUntilScriptLoaded function. as shown above.

    Just for your additional information, if you want to inject custom JS Code before submitting the form you can declare a function with name "PreSaveAction"

    PreSaveAction = function (){$("input[id^=Title_]").val("Helo");return true;}

    Upon clicking Save button, SharePoint JS will check if this method is declared and if yes, it will run it.

    Maybe you can try to put the code there

    Another things that may interest you is the async option in jQuery.Ajax();

    If you could not manage Deferred Object, you can consider using this Async:false option to do ajax call.


    Cheng

    Wednesday, December 30, 2015 1:35 AM
  • Hi,

    In my environment, the value of the “title” attribute of the “Title” field in the NewForm is “Title Required Field”:

    Thus, I use the code below to set value to the input:

    $(document).ready(function(){
    
    	var test1 = "abcdefg";
    	$("input[title='Title Required Field']").val(test1);
    
    });
    

    Please modify your code as above and make another test.

    Feel free to let me know if there is any progress.

    Best regards,

    Patrick

    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Wednesday, December 30, 2015 5:50 AM
  • Thanks Cheng and Patrick, its working now by using the ms-formbody with field ID statement highlighted below, but because I need to make this script portable, I will need to try and use the field name as a reference, so experimenting with that how and am definitely going to try your alls recommendations in the next iteration! thanks again guys! 

      }).done(function(ajaxData) {

            def.resolve(ajaxData.d.object);

            str = loopobjaray(ajaxData.d.object);

            var hyperlinkvar = "file://qa.corp/o/"+str;

            $(".ms-formbody input[name='ctl00$ctl37$g_e1cecff8_aa5e_4f89_84a7_e454cd21d774$ff21$ctl00$ctl00$TextField']").val(hyperlinkvar);

            originalSaveButtonClickHandler();

    • Proposed as answer by Patrick_Liang Thursday, December 31, 2015 6:10 AM
    • Marked as answer by Patrick_Liang Wednesday, January 6, 2016 1:21 PM
    Wednesday, December 30, 2015 4:15 PM