none
How to refresh an Image Viewer webpart after updating properties using javascript? RRS feed

  • Question

  • OK. I have everything working in my javascript now and my updates are successfully completing. However now I have the problem of somehow needing to refresh the page using javascript. If I refresh the page manually my dropdown select box goes back to the initial value, but my image viewer does retain the image that I updated it with before the page the manual page refresh. So how do I asynchronously refresh my image viewer webpart, since its the only thing that's been updated? Here's a copy of my current and complete version of all my code thus far:

    <script type="text/javascript">

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
        console.log("Initiating SP.ClientContext") });
    ExecuteOrDelayUntilScriptLoaded(processSelectedTeamMember, "sp.js");
    ExecuteOrDelayUntilScriptLoaded(UpdateSpecificWebPart, "sp.js");

    var jq = jQuery.noConflict();

    var picPath = "";
    var filRefFnd = false;
    var host = location.hostname;
    var prtcl = location.protocol;
    var webPrtTitles = new Array(5);
    var webPrtTitl = "";

    function UpdateWebPartProperties(webPartDef, properties, imgPath)
    {
     var chngMade = false;
     var hiddnProp;
     var imgLinkProp;
     var hghtProp;
     var widthProp;
     
     try
     {
      // Properties List
      
      hiddnProp = properties.get_item("Hidden");
      imgLinkProp = properties.get_item("ImageLink");
      hghtProp = properties.get_item("Height");
      widthProp = properties.get_item("Width");
      
      // generic height webpart property
      if((typeof hghtProp != 'undefined') && (hghtProp != null))
      {
       properties.set_item("Height","300");
       
       chngMade = true;
      }
     
      // generic width webpart property
      if((typeof widthProp != 'undefined') && (widthProp != null))
      {
       properties.set_item("Width","200");
       
       chngMade = true;
      }
      
      // generic webpart property
      if((typeof hiddnProp != 'undefined') && (hiddnProp != null))
      {
       if(hiddnProp)
       {
        properties.set_item("Hidden",false);
       
        chngMade = true;
       }
      }
      
      // image viewer property  
      if((typeof imgLinkProp != 'undefined') && (imgLinkProp != null))
      {  
       properties.set_item("ImageLink",imgPath);
       
       chngMade = true;
      }
      
      
      return chngMade;
     }
     catch(excptn)
     {
      alert("Exception: "+ excptn.name + " - " + excptn.message);
        }
        finally
     {

        }
    }

    function UpdateSpecificWebPart(webPrtTitl)

     try
     {
      if((typeof webPrtTitl != 'undefined') && (webPrtTitl != null))
      {
       var imgPath = jq("#slctdMembrHidn").val();
       var serverRelativeUrl = _spPageContextInfo.serverRequestPath;
       var myCtx = new SP.ClientContext.get_current();
       var web = myCtx.get_web();
       var oFile = web.getFileByServerRelativeUrl(serverRelativeUrl);
       var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
       var webPrtCnt = 0;
       var webPrtsStr = "";
       
       this.collWebPart = limitedWebPartManager.get_webParts();
       
       myCtx.load(collWebPart, 'Include(WebPart.Properties)');
       
       myCtx.executeQueryAsync(Function.createDelegate(this, function(){VerifyWebPartTitleAndUpdate(myCtx, collWebPart, webPrtTitl,imgPath);}),
        function()
        {
         alert('WEBPARTS COLLLECTION QUERY FAILURE!');
        }
       );
      }
     }
     catch(excptn)
     {
      alert("Exception: '"+ excptn.name + "'  -  " + excptn.message);
        }
        finally
     {

        }
    }

    function GetWebPartDefinition(collWebPart, properties, webPrtTitl)
    {
     var trgtWebPartDef;
     
     try
     {
      for (var i = 0; i < collWebPart.get_count(); i++)
      {
       var webPartDef = collWebPart.getItemAtIndex(i);
       var properties = webPartDef.get_webPart().get_properties();
       var webPartTitle = properties.get_item("Title");
           
       if(webPartTitle == webPrtTitl)
       {
        trgtWebPartDef = webPartDef;
        return trgtWebPartDef;
       }
      }
      
      throw new Exception("TARGET WEB PART NOT FOUND ON PAGE!");
     }
     catch(excptn)
     {
      alert("Exception: '"+ excptn.name + "'  -  " + excptn.message);
        }
        finally
     {

        }
    }

    function VerifyWebPartTitleAndUpdate(myCtx, collWebPart, webPrtTitl, imgPath)
    {
     try
     {  
      if (collWebPart.get_count())
      {   
       var webPartDef = GetWebPartDefinition(collWebPart, properties, webPrtTitl);
       var properties = webPartDef.get_webPart().get_properties();
       
       myCtx.load(properties);
       myCtx.executeQueryAsync(Function.createDelegate(this, function(){UpdateTargetWebPart(myCtx, webPartDef, properties, imgPath, webPrtTitl);}),
       function()
       {
        alert('PROPERTIES QUERY FAILURE!');
       });
        }
      else
      {
       alert("NO WEB PARTS FOUND ON PAGE!");
      }
     }
     catch(excptn)
     {
      alert("Exception: '"+ excptn.name + "'  -  " + excptn.message);
        }
        finally
     {

        }
    }

    function UpdateTargetWebPart(myCtx, webPartDef, properties, imgPath, webPrtTitl)
    {
     try
     {
      webPartDef.openWebPart();
     
      var webPrtUpdtd = UpdateWebPartProperties(webPartDef, properties, imgPath);
         
      if(webPrtUpdtd)
      {
       webPartDef.saveWebPartChanges();
       webPartDef.closeWebPart();
       myCtx.load(webPartDef);
       myCtx.executeQueryAsync(
       function()
       {
        console.log("'"+webPrtTitl+"' WEB-PART PROPERTIES UPDATE SUCCESSFUL!");
       },
       function(sender, args)
       {
        alert("'" + webPrtTitl + "' WEB-PART PROPERTIES UPDATE FAILED!\nERROR INFO ( MESSAGE-" +args.get_message() + ", \nSTACK-" + args.get_stackTrace() + ")."); 
       });
      }
      else
      {
       webPartDef.closeWebPart();
       alert("NO CHANGES MADE TO '" + webPrtTitl + "' WEB-PART.");
      }
     }
     catch(excptn)
     {
      alert("Exception: '"+ excptn.name + "'  -  " + excptn.message);
        }
        finally
     {

        }
    }

    function getListData(myval)
    {
     try
     {
      var serverRelativeUrl=_spPageContextInfo.serverRequestPath;
      var myCntxt = new SP.ClientContext.get_current();
      var oWeb = myCntxt.get_web();
      var list = oWeb.get_lists().getByTitle("Team Member Pictures");
      var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
       
      myCntxt.load(items);
      myCntxt.executeQueryAsync(
       Function.createDelegate(this,function(){captureCorrectPicturePath(items,myval);}),
       function(sendera,args)
       {
          console.log(args.get_message());
       }
      );
     }
     catch(excptn)
     {
      alert("Exception: '"+ excptn.name + "'  -  " + excptn.message);
        }
        finally
     {

        }
    }

    function captureCorrectPicturePath(items,myval)
    {
     try
     {
      filRefFnd = false;
       
      for(var i = 0; i < items.get_count(); i++)
      {
       var item = items.getItemAtIndex(i);   
       var fields = item.get_fieldValues();
       var title = fields.Title.toString();
        
       if(myval == title)
       {
        picPath = fields.FileRef.toString();
        picPath = prtcl + "//" + host + picPath;
        jq("#slctdMembrHidn").val(picPath).trigger('change');
        filRefFnd = true;
        
        break;
       }  
      }
     }
     catch(excptn)
     {
      alert("Exception: '"+ excptn.name + "'  -  " + excptn.message);
        }
        finally
     {

        }
    }

    function processSelectedTeamMember(myval)
    {
        getListData(myval);
    }

    jq(document).ready(function()
    {
        var slctdTmMmbr;
     var slctdName;
     
        jq("#slctdTeamMember").on("change", function(event)
        {
      slctdTmMmbr = jq("#slctdTeamMember").val().toString();
           
      if(slctdTmMmbr != " ")
            {
       // format name title
       //slctdName = jq("#slctdTeamMember").find('option:selected').attr("name");
       //jq("#tstTitle").val(slctdName).trigger('change');
       
                processSelectedTeamMember(slctdTmMmbr);
            }
      else
      {
       jq("#tstTitle").val("").trigger('change');
       jq("#slctdMembrHidn").val("").trigger('change');
      }
      
        });
     
     jq("#slctdMembrHidn").bind('change', function(event)
     {
      webPrtTitles[0] = "Team Member Image";
     
      webPrtTitl = webPrtTitles[0].toString();
      
         UpdateSpecificWebPart(webPrtTitl);
     });
     
     
    });

    </script>

    and here is the html code that goes with it:


    <div id="divPagCntrl" >
    <label>NetOps Team Members:</label><br />
    <select id="slctdTeamMember">
    <option value=" " name="select a team member" >select a team member</option>
    <option value="" name="">dummy</option>
    .
    .
    .
    </select>
    </div>

    <input id="slctdMembrHidn" type="text" ></input>


    Thanks for the help.

    Henry

     
    Tuesday, March 14, 2017 8:43 PM

All replies

  • Hi,

    You can refresh web part automatically using JavaScript, please refer the demo below:

    SharePoint 2013 Custom List View Web Part Refresh

    Thanks

    Best Regards


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

    Friday, March 17, 2017 8:12 AM
  • Jerry, thanks for the response. in our Sharepoint 2013 environment, the Image Viewer web part we have does not seem to currently offer any ajax asynchronous options, as shown for the List View Web part, in the demo you referred me to. So is it possible to turn on ajax/asynchronous updates for the Image Viewer web part that I'm using, to give me that capability? If so how?

    Let me know as soon as you can.

    Thanks.

    Henry

     
    Monday, March 20, 2017 3:01 PM