jeozif.eichoaa
jeozif.eichoaa

Reputation: 1

How to make other tabs click an element when I click a button in the activated tab?

I have many opened pages with the same domain and the same contents, and what I need is that when I click on a specific button in one tab the other tabs respond and click also the same button, so I would save so much time. I read somewhere here that this function is called "Intercom".

Upvotes: 0

Views: 1755

Answers (1)

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1670

Sorry for delayed answer, but I wanted to write a good way and not just quick answer for points. This works only if the pages are all under same domain. LocalStorage works that way. Let me know if this works for you, and may have to tweak a small bit, but should give you a idea to work on. There may be a better way, but this is how I would handle it at first.

This would go on each page. Then you can use the page urls, or somthing like a hidden field to make each page unique and obtainable to track when you are currently on it. But the general idea should work.

Happy coding! Hope this helps you!

This works because that script is ran on every page.The only reason it knows what page it is on, is due to what the hidden field value says the current page s, when the script is executing.

This is a very geenral example. But should give you the concept. Since this script runs on every page, and is written generically, itworks out. JUST MAKE SURE THE BUTTON NAME TO TRIGGER EVENT IS THE SAME NAME ON EACH PAGE!

P.S. You could also use window.location to get what page you are on instad of a hidden field.

****HTML EXAMPLE of each page *****

<!-- Each Page -->
<!-- Page 1-->
<div>
  <input type="hidden" value="page1"/>
  <input type="button" id="cmdButtonThatTriggersEvent" value="Test Buttom"/>

</div>

<!-- Page 2-->
<div>
  <input type="hidden" value="page2"/>
  <input type="button" id="cmdButtonThatTriggersEvent" value="Test Buttom"/>

</div>

<!-- Page 3-->
<div>
  <input type="hidden" value="page3"/>
  <input type="button" id="yourButton" value="Test Buttom"/>

</div>


//Make sure ever button name or id is the same on each page. 
//That way it is generic. You will also have to track what page //triggered the click event. So make a localstorage hold if the action was clicked to occur, and a localstorage key that holds an array fo all the pages you want this done on. So that way the code can be on every page, and you mark the page off if all page entries were affected, then reset the switch back to null. 

****Javascript example for each page*****


<script> 


       var globalAllPages = ["Page1, "Page3", "Page3"]; //etc.

       $(document).on("click", "#yourButton", function(){
         localStorage.setItem("trigger_state", "true");
         HandleLocalStorageSwitch();
       });

       $(document).ready(function(){           
            setInterval(function(){              
                HandleLocalStorageSwitch();                
            }, 500);
        });



        function HandleLocalStorageSwitch()
        {
             var trigger = localStorage.getItem("trigger_state");
             var location = localStorage.getItem("location");

             if(trigger != undefined && trigger == "true"){
               //now see if this page has ran yet
                var dictPages = JSON.parse(localStorage.getItem("current_pages")); //gets the array  
                var exists = false;

                for(var x=0;x<dictPages;x++){
                   if(dictPages[x]=="this_page"){
                      exists=true;
                      break;
                    }                    
                }

                //if it wasnt found then insert it
                if(!exists){
                   dictPages.add("this_page");
                   $("#this_page_Button").click(); //now trigger this button
                }

                if(dictPages.length == globalAllPages.length){
                    //we hit all pages
                    //then all have been ran, and remove the switch and clear dict
                   localStorage.setItem("shouldTriggerEvent", "false");
                   //so now reset and won't run untill one of buttons clicked, then starts process again
                   localStorage.removeItemKey("current_pages");
                }                
              }                                  
           }
        }

Upvotes: 0

Related Questions