none
Script Field Update Seems Slow RRS feed

  • Question

  • I have a couple of scripts one in each of two different Script Editor Web Parts.

    The first script reads a selected value from a drop-down select box control, and uses it to search an internal picture/image library, using the selected value. When it finds an image it takes its relative path and prefixes it with the current url's protocol and and domain name, to create a valid absolute url, for the image. Then it places the image absolute url into a hidden field using jQuery. then after returning back to the caller, I use jQuery to trigger a change event on the hidden field like this:

    jq("#slctdMembrHidn").trigger("change").delay(3000);

    Then in the second script I have a jQuery on "Change" handler which should respond to the trigger of the "change" event like this:

    jq("#slctdMembrHidn").on("change",function(event){.....});

    When I inspect the hidden field the correct path value seems to be there, but berfore calling the inner method to actually handle the newly formatted absolute Url and use it to update the "ImageLink" field in the Image Viewer web part I have an if-check in place to make sure I have a good value in the hidden field, before going to update the web part field with it. Here's what the main calling code in the second script looks like:

    jq("#slctdMembrHidn").on("change",function(event)
    {
     var picPath = jq("#slctdMembrHidn").val();
     
     if((typeof picPath != 'undefined') && (picPath != null) && (picPath != "") && (picPath != " "))
     {
         alert("THE PIC-PATH VALUE IS '" + picPath + "' AND SEEMS OK");
               RetrieveWebPartsForUpdate(picPath);
     }
     else
     {
         alert("BAD PIC PATH!!");
     }
    });

    So when I actually try to use the code on the page I select an item from the select control, and I keep getting the "BAD PIC PATH" message. I could increase the time delay for the trigger, from the first script, but its already set to a value of 3000, so I doubt that will work.

    I'm not sure what makes it update so slowly. So is there a way to refresh the value of the hidden field dynamically, so I won't need to delay the trigger, of the "change" event, as the first script ends?

    I can include more code if you'd like to see it.

    Thanks.

    Henry

     

    Friday, March 10, 2017 5:40 PM

Answers

  • Hi Henry,

    As per the issue description , you want to refresh the value of the hidden field dynamically.

    Because of the changes in value to hidden elements don’t automatically fire the .change() event. So, wherever it is that you're setting that value, you also have to tell jQuery to trigger it.

    The function delay() means that occurs after the time you have setup. So ,if you want to the event occurs immediately ,you could ignore the delay() function call.

    According to your requirement ,you could achieve it by  one script edit web part  .

    Here is a sample code for you.

    1.Add a script edit web part to your page.

    2.Click Edit Snippet to open the source editor.

    3.Paste the code as below.

    4.Test the function by select the different values.

    5.Then replace annotation with your logic code.

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    
    $("#m_hidden").bind("change", function() {
    
           alert($("#m_hidden").val());
    
           //your logic code here.
    
    $("#m_input").val($("#m_hidden").val());
    
     });
    
      $("#m_select").change(function(){
    
        //your logic code here
    
        var value=$("#m_select").val();//replace $("#m_select").val() with your url
    
        $("#m_hidden").val(value).trigger('change');      
    
      });
    
    });
    
    </script> Enter your name:
    
    <input id="m_input" type="text"/>
    
    <p>Car:
    
       <select name="net" id="m_select">
    
    <option value="http://www.baidu.com">baidu</option>
    
    <option value="http://www.google.com">google</option>
    
    <option value="http://www.sina.com">sina</option>
    
    <option value="http://www.facebook.com">facebook</option>
    
    </select>
    
    <input name="test" id="m_hidden" type="hidden" value="1"/> </p>

    Best regards,

    Bruce Pu


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

    Monday, March 13, 2017 9:24 AM

All replies

  • Hi Henry,

    As per the issue description , you want to refresh the value of the hidden field dynamically.

    Because of the changes in value to hidden elements don’t automatically fire the .change() event. So, wherever it is that you're setting that value, you also have to tell jQuery to trigger it.

    The function delay() means that occurs after the time you have setup. So ,if you want to the event occurs immediately ,you could ignore the delay() function call.

    According to your requirement ,you could achieve it by  one script edit web part  .

    Here is a sample code for you.

    1.Add a script edit web part to your page.

    2.Click Edit Snippet to open the source editor.

    3.Paste the code as below.

    4.Test the function by select the different values.

    5.Then replace annotation with your logic code.

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    
    $("#m_hidden").bind("change", function() {
    
           alert($("#m_hidden").val());
    
           //your logic code here.
    
    $("#m_input").val($("#m_hidden").val());
    
     });
    
      $("#m_select").change(function(){
    
        //your logic code here
    
        var value=$("#m_select").val();//replace $("#m_select").val() with your url
    
        $("#m_hidden").val(value).trigger('change');      
    
      });
    
    });
    
    </script> Enter your name:
    
    <input id="m_input" type="text"/>
    
    <p>Car:
    
       <select name="net" id="m_select">
    
    <option value="http://www.baidu.com">baidu</option>
    
    <option value="http://www.google.com">google</option>
    
    <option value="http://www.sina.com">sina</option>
    
    <option value="http://www.facebook.com">facebook</option>
    
    </select>
    
    <input name="test" id="m_hidden" type="hidden" value="1"/> </p>

    Best regards,

    Bruce Pu


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

    Monday, March 13, 2017 9:24 AM
  • Bruce, Thanks for the response and the ideas. I will try it later today or early tomorrow and let you know how it works with my code.

    Henry

    Monday, March 13, 2017 7:05 PM
  • Hi Henry,

    Have the issue been solved? Is there any progress ?If you have any question or confusion you could continue this case. It's my pleasure to help you.

    Best regards,

    Bruce Pu


    Please remember to <b>mark the replies as answers</b> if they help.<br/> If you have feedback for TechNet Subscriber Support, contact <a href="mailto:tnmff@microsoft.com"> tnmff@microsoft.com</a>.

    Thursday, March 16, 2017 1:59 AM
  • Bruce, Sorry for the tardy response. The suggestions you gave me were quite helpful, especially combining the two scripts into the same block and the use of the combination of the jQuery .bind('change')  and .trigger('change') methods, and I have made some solid progress. I do continue to have a new set of problems, so I'll make another post after I submit this one. Look for it if you might be interested, and thanks again for the help this far.

    Henry

     
    Thursday, March 16, 2017 3:44 AM