Monitor for when hidden question appears

Alex_Marsh

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

Tom_Hendricks

Is your observer monitoring the element's presence, or its attributes? 

Alex_Marsh

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_Hendricks

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_Marsh

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_Hendricks

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_Marsh

Hmmm, replacing 

if($(this).is(":visible"))</code>if ($(this).text().indexOf(inputLabel[i]) > -1)</pre>with<br><pre class="CodeBlock"><code>

doesn't seem to work, stops the js running at all

Tom_Hendricks

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]) > -1 && $(this).is(":visible")) { //do stuff }

Alex_Marsh

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_Ross

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_Marsh

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_Ross

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_Peter

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.