Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts

    Keeping element contents the same as a master with registering

    Lets say I have the following HTML

    PHP Code:
    <div id="master"></div>
    <
    div id="copy231"></div>
    <
    div id="copy28"></div>
    <
    div id="copy7"></div
    Now my goal is to get some javascript setup so I can register the three copy items (maybe more, maybe less) to be set to be in sync with the master element. The point is if the master element changes, the elements registered to it should change as well. I could do this normally in a static environment, but the issue is this is apart of a base template, so the page content will be different and I don't want to assume or switch the content all around. I could do it with PHP in worst case scenario (defining the elements in an array then looping through it to dynamically define the static content) but I'd prefer to do it in the same language since it would be better to do.

    Basically, I need a function to call to register each element then a function that clones the master copy to the other elements whenever it changes as well as when the page loads.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    how does the master element change? user input or server event?

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    What I'm actually doing is trying to have the captcha elements on the page "sync" with each other. I have one master captcha that is hidden from the user and loads on every page (which I may change later so it's no EVERY page, but only when needed) and then want to grab the image from it and display it in the appropriate "clone" element. The image changes on user input (refresh/new captcha) but is also displayed on page load. I could call the function on load too, that's not an issue as long as there's something to keep them in sync.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    can you change the html, to give the clone elements a class name?

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    I gave them a data element, I'd prefer to use it over class since classes are meant for design, not grouping data together. The clone elements have data-copy="" as the attribute, with the value being the ID of the master element.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    so something like this?
    Code:
    $("div[data-copy=master]").each(function(){
    $(this).html($("#master").html());
    	});

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Actually I did this in case I have different items

    Code:
    $("[data-copy]").each(function(index, element) {
    	var master = $("#" + $(element).attr('data-copy'));
    	$(element).html($(master).html());
    	$(master).on('change', function() {
    		element.clone(master);
    	});
    });
    The problem is the .on() doesn't work because it only runs when the each is running, and then doesn't run again. I need to dynamically make the .on() for each master element, but I don't know how to do that.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    no, a div doesn't have an onchange event. You can look at mutation observers, but really - there's some event that happens to change the content of "master" - I'm guessing a button click. Why not just call the function when that happens (and on page load and whenever else you want, with a timeout if you need it)?

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    It turns out I don't even need this anymore, and I'm kind of glad. Custom designed recaptchas are terribly anti-responsive (at least the way I had it) and were wasting too much time trying to setup this way. It turns out that AreYouAHuman? (PlayThru) now supports having multiple captchas on one page (so it seems at least) so I'm using this instead, especially since it's responsive and user friendly. Plus then I don't have to "hide" a captcha in the dark and generate one on every page load or create a check for it, I can just create the captchas as needed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •