Home Analyst Portal

Monitor for when hidden question appears

Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
Is it possible to monitor for when a text box appears as part of advanced request offering criteria? I have an issue whereby when using a mutation observer, when the form loads the box is populated, however if the box is removed (due to an advanced request offering question hiding it) and re-added, the text box is blank, where as I need it populated with the text which loaded with the page

Answers

  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Is your observer monitoring the element's presence, or its attributes? 
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    I don't think it's doing anything like that. Here's my code

    (function() {
      var inputLabel = ["Cost Centre","Site Address (amend if one shown is incorrect)","Please verify your contact details are correct", "Do you have an MCA number?"];
      var observer = new MutationObserver(function (mutations) {
      var targetElement = $('.question-container .control-label');
      var userinfo;
      $.get('/Search/GetObjectProperties', { "id": session.user.Id }, 
    function (data) {
    var userinfo = data;
      for (i = 0; i < inputLabel.length; i++){
      if(targetElement.length > 0) {  
         targetElement.each(function(){
           if ($(this).text().indexOf(inputLabel[i]) > -1) {
             var that = this;
    		 var label = inputLabel[i]
    		 if (label == "Cost Centre") {var a = userinfo["Department"];
    		 $(that).next().find('textarea').val(a).keyup()};//.prop('disabled', true)};
    		 if (label == "Site Address (amend if one shown is incorrect)") {var a = userinfo["Street Address"] + "\n" + userinfo["City"] + "\n" + userinfo["State"] + "\n" + userinfo["Zip"];
    		 $(that).next().find('textarea').val(a).keyup()};
    		 if (label == "Please verify your contact details are correct") {var a = userinfo["Business Phone"];
    		 $(that).next().find('textarea').val(a).keyup()};
    		 if (label == "Do you have an MCA number?") {var a = "Yes";
    		 $(that).next().find('k-input').value = a};
    		 return false;
           }})
      }}});
          observer.disconnect();
        }
      );
    
      // Notify me of everything!
      var observerConfig = {
        attributes: true,
        childList: false,
        characterData: false,
        subtree: true
      };
    
      // Node, config
      /*$(window).load(function () {
    	  if(document.URL.indexOf("74c97cef-eb04-f540-ea39-267ea6263c54,cf631db6-b889-4421-6f73-69faca830669") > -1){
        var targetNode = document.getElementById('main_wrapper');
    	  observer.observe(targetNode, observerConfig)};
      });*/
      
    $(document).ready(function () { //insert your request offering form ID in the below in "" separated by commas, e.g. "a","b","c" 
    var checkurl = ["74c97cef-eb04-f540-ea39-267ea6263c54,cf631db6-b889-4421-6f73-69faca830669","28452bca-5cd7-7599-6080-30592e897eff,cf631db6-b889-4421-6f73-69faca830669"];
    for (var i = 0; i < checkurl.length; i++)
    	//console.log(checkurl[i]);
    if(document.URL.indexOf(checkurl[i]) > -1)
    {var targetNode = document.getElementById('main_wrapper');
    observer.observe(targetNode, observerConfig)};
     });
      
    })();
    


  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    You are monitoring attribute changes, which is good, but the IF statement inside of your observer does not appear (I took a quick glance, admittedly) to be testing whether or not the field is hidden or not. 
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    And that is where I appear to be struggling. I can't seem to find out what to latch onto in order to monitor for when the box appears.
    I probably need to split this down into separate functions as there's only 1 field which is hidden ("Please verify your contact details are correct") but I think I've hit the limit of my JS!
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Inside of your targetElement.each() function, you ought to be able to use something like:

    if($(this).is(":visible")) { //do stuff }

    More here: https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery

    The logic is something along the lines of if the mutation observer detects an attribute change, this if is testing to see if the matching elements are visible, after that change (whatever it actually is--you are essentially asking if the attribute change has anything to do with visibility, with this if statement) is made.
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Hmmm, replacing 
    if($(this).is(":visible"))</code>if ($(this).text().indexOf(inputLabel[i]) &gt; -1)</pre>with<br><pre class="CodeBlock"><code>
    doesn't seem to work, stops the js running at all
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    So the condition is immediately met, and the observer disconnects (stops looking).

    You may want to remove the observer.disconnect(); statement at the end of your IF, so that it continues to run at all times.  In general, it is best to avoid this when possible, but it sounds like it may be exactly what you need.  For example, if the user changes their mind and the fields are shown, hidden, then shown again.

    If I am interpreting your original code correctly (I may not be!), you have an array of input labels, and you are checking each element to see if it contains the label, acting only if it does.  It makes sense to keep that in your if statement.

    Perhaps something like the following would work better:

    if ($(this).text().indexOf(inputLabel[i]) &gt; -1 &amp;&amp; $(this).is(":visible")) { //do stuff }

  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    The whole is visible works but if I don't disconnect the observer the form locks up completely. Thinking that this may be a non-starter unless I can monitor the specific element that changes
  • Geoff_RossGeoff_Ross Cireson Consultant Super IT Monkey ✭✭✭✭✭
    Alex,
    You might need to next two mutation observers. The first monitors for that element and attached the second and then disconnects. The second watched for changes to read the text and doesn't disconnect.
    Have you seen the film Inception?
    Geoff
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Yeah that's what I was thinking @Geoff_Ross, although I seem to be struggling with finding the element to target with the mutation observer.
    I have seen Inception (it might be too early for me to see the relevance of that comment!).
    It's evident I have reached my js limits!

  • Geoff_RossGeoff_Ross Cireson Consultant Super IT Monkey ✭✭✭✭✭
    I'll have a play with the HTML of an ARO with a dynamic prompt when I can find some time.
    As for the movie reference, I was a joke about how a mutation observer in a mutation observer could get very confusing like the dream within a dream within a dream in Inception. That is evidence that it was too early for me to try and make jokes!
    Geoff
  • Thomas_PeterThomas_Peter Customer IT Monkey ✭
    Did you solve your Problem? I need  to run some code whenever the value of one of 9 listboxes is changed and tried your solution - Running into the same challenge with the observer object.
Sign In or Register to comment.