What is the best way to utilize window.find for adjusting CSS styles?

Question

What is the best way to utilize window.find for adjusting CSS styles?

Incorporating both AJAX and PHP technologies, I have placed specific text data within a span element located at the bottom of my webpage. Now, my objective is to search this text for a given string. The page consists of multiple checkboxes, with each checkbox corresponding to a particular value that needs to be searched.

Objective: Employing a loop mechanism, iterate through all the checkboxes present on the page. Search the entire page for each checkbox's value (ideally within the text contained in the span informed by AJAX). If a match is found, modify the CSS style color of that particular checkbox.

The current state of my code involves a form containing checkboxes where they are named "comment" and possess unique IDs:

<input type="checkbox" name="comment" id="hjl1" value="the comment." 
 onclick="createOrder()"><label for="hjl1" onclick="createOrder()" 
 title="comment"> textual representation for this checkbox </label>

Upon activation, using JavaScript, I traverse through every checkbox within the form.

var comment=document.forms[0].comment;
var str="";
var ii;
for (ii=0;ii<comment.length;ii++)
  {str=comment[ii].value;}

My next step involves integrating window.find into that loop to verify if that particular value exists on the page.

if (window.find) {
            var found = window.find (str);
            if (!found) { 
         document.getElementById("?????").style["color"] = "red";
           }
        }

The concept revolves around checking for the presence of "the comment." value on the page when its corresponding checkbox is activated. Upon discovery, the checkbox label will display the CSS style color as red.

I aim to consolidate these concepts, yet numerous obstacles hinder progress. How can I access elements by their IDs within this loop? Is it feasible for window.find to scan the text generated by PHP in my span?

Would it prove more efficient to abstain from utilizing window.find entirely?

var source = document.getElementsByTagName('html')[0].innerHTML;
var found = source.search("searchString");

This process bewilders me as I am relatively inexperienced. Your patience and time spent reading thus far are sincerely appreciated.

javascript ajax find

Answer 1

Answer №1

Initially, I made a mistake and wrote code to highlight text within the page.

Sure, using window.find is suitable for this purpose since you only need to determine if the value exists or not. However, its behavior may be a bit strange (scrolling to the bottom) when used in frames.

I also included a function for your onClick, although I'm uncertain if this is desired. When clicked, it will change the color of the label if the text is found.

Here's a brief example:

function checkThis(ele) {
  var str = ele.value;
  if (window.find) {
    var found = window.find(str);
    if (found) {
      var id = ele.getAttribute('id');
      var lbl = document.querySelectorAll('label[for="' + id + '"]');
      if (lbl) lbl[0].style.color = "red";
    }
  }
}

window.onload = function() {
  var comment = document.form1.getElementsByTagName('input');
  for (var x = 0; x < comment.length; x++) {
    if (comment[x].type == 'checkbox') {
      var str = comment[x].value;
      if (window.find) {
        var found = window.find(str);
        if (found) {
          var id = comment[x].getAttribute('id');
          var lbl = document.querySelectorAll('label[for="' + id + '"]');
          if (lbl) lbl[0].style.color = "red";
        }
      }
    }
  }
}

Answer 2

Initially, I made a mistake and wrote code to highlight text within the page.

Sure, using window.find is suitable for this purpose since you only need to determine if the value exists or not. However, its behavior may be a bit strange (scrolling to the bottom) when used in frames.

I also included a function for your onClick, although I'm uncertain if this is desired. When clicked, it will change the color of the label if the text is found.

Here's a brief example:

function checkThis(ele) {
  var str = ele.value;
  if (window.find) {
    var found = window.find(str);
    if (found) {
      var id = ele.getAttribute('id');
      var lbl = document.querySelectorAll('label[for="' + id + '"]');
      if (lbl) lbl[0].style.color = "red";
    }
  }
}

window.onload = function() {
  var comment = document.form1.getElementsByTagName('input');
  for (var x = 0; x < comment.length; x++) {
    if (comment[x].type == 'checkbox') {
      var str = comment[x].value;
      if (window.find) {
        var found = window.find(str);
        if (found) {
          var id = comment[x].getAttribute('id');
          var lbl = document.querySelectorAll('label[for="' + id + '"]');
          if (lbl) lbl[0].style.color = "red";
        }
      }
    }
  }
}

Answer 3

Answer №2

Here is a sample function code to try out:

function loopy() {  
   var comment=document.forms[0].comment;
   var txt="";
   var ii;
   for (ii=0;ii<comment.length;ii++) {
    if (comment[ii].checked) {
        str=comment[ii].value;
        id = comment[ii].id;

        nextLabelId = comment[ii].nextSibling.id;


        if (window.find) {        
            var found = window.find (str);
            if (found == true) {
                document.getElementById(nextLabelId).className = 'selected';                
           } 
        } else {
            alert('not supported');
        }
    }
  }
}

If you want to retrieve the checkbox id, simply include id = comment[ii].id in your loop.

To change the color, utilize class names and CSS styling. For example, to change the label after the checkbox to red, find the label's id using nextSiblings and apply the .selected class name. Remember to remove the coloring if the box is unchecked.

The use of find() may not be supported by all browsers and may have limitations when searching content injected via AJAX. Testing is recommended in such cases.

Migrating this code to jQuery might offer easier functionality for some features.

Answer 4

Here is a sample function code to try out:

function loopy() {  
   var comment=document.forms[0].comment;
   var txt="";
   var ii;
   for (ii=0;ii<comment.length;ii++) {
    if (comment[ii].checked) {
        str=comment[ii].value;
        id = comment[ii].id;

        nextLabelId = comment[ii].nextSibling.id;


        if (window.find) {        
            var found = window.find (str);
            if (found == true) {
                document.getElementById(nextLabelId).className = 'selected';                
           } 
        } else {
            alert('not supported');
        }
    }
  }
}

If you want to retrieve the checkbox id, simply include id = comment[ii].id in your loop.

To change the color, utilize class names and CSS styling. For example, to change the label after the checkbox to red, find the label's id using nextSiblings and apply the .selected class name. Remember to remove the coloring if the box is unchecked.

The use of find() may not be supported by all browsers and may have limitations when searching content injected via AJAX. Testing is recommended in such cases.

Migrating this code to jQuery might offer easier functionality for some features.

What is the best way to utilize window.find for adjusting CSS styles?

Answer №1

Answer №2

Similar questions

What causes the scrollTop to appear erratic?

When executing `npm run start`, a blank page appears exclusively on the server

Load the flexslider once the fancybox container is opened

Using VueJs's createElement() to dynamically insert HTML content

How can I ensure my game or website fits perfectly on the screen without any need

What is the best way to incorporate (+/-) buttons to increase or decrease numbers in this code snippet?

Dynamic text displayed on an image with hover effect using JavaScript

The submission of the form using AJAX is currently experiencing issues

Can data be passed from PHP to AJAX and back again through an AJAX to PHP request?

Conceal a list of items within a div that has a particular class

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

Using the Ajax method from a separate class in TypeScript: A step-by-step guide

The majority of my next.js website's content being indexed by Google consists of JSON and Javascript files

Activating Bootstrap modal when a navigation link is clicked

Why is it necessary in JavaScript to reset the function's prototype after resetting the function prototype constructor as well?

Tips for deleting a button from a DataTable file upload feature

Tips for closing print window dialog during Protractor testing

Error: The value is null and cannot be read

Guide to Including an Object in AngularJS Scope

Passing an array from JavaScript to PHP and then storing it as a .json file