mickle026 386 Posted January 23, 2021 Share Posted January 23, 2021 (edited) I have used an array of image urls to generate buttons in my plugins javascript page code (see screenshot image below) // ImageUrl arry contains up to 10 elements for (i = 0; i < ImageUrl.length -1 ; i++) { HtmlStringBuilder = HtmlStringBuilder + "<div style='float: left; paddingLeft = '100px'; ><button class='.dynamicElement' type='button' id='#" + i + "' >" + (i+1) +"<span><img src='" + ImageUrl[i] + "' height='270' width='190' style='border-width: 20px;' /></span>"; } document.getElementById("ImageResult").innerHTML = HtmlStringBuilder; What I am trying to do is detect if any of them are clicked Quote $(document).on('click', '.dynamicElement', function () { alert($(this).text()); // Do something <-- just alert for now so we can see its working }) This is in the return function part of my page Quote return function (page, params) { $(document).on('click', '.dynamicElement', function () { alert($(this).text()); // Do something <-- just alert for now so we can see its working }) I am getting no response from a button click, nothing in the Web browser console output either. Help please ... anyone ... Edited January 23, 2021 by mickle026 Link to comment Share on other sites More sharing options...
roaku 791 Posted January 24, 2021 Share Posted January 24, 2021 (edited) You'll need to use querySelector or querySelectorAll on Emby's page object (or view object, depending on if your js is embedded in the html or a separate file) to reliably find those elements. With standard javascript: var newElements = page.querySelectorAll(".dynamicElement"); for (let i=0;i<newElements.length;i++) { newElements[i].addEventListener("click", function(e) {e.preventDefault();console.log("clicked: "+this.textContent);}, true); }; I think we're supposed to avoid jquery for new plugins as they're phasing it out of Emby proper. But that should look something like (untested): $(page.querySelector("#somePermanentParentIdInYourHtml")).on("click",".dynamicElement", function(e) { e.preventDefault(); console.log("clicked: "+$(this).val()); }); Edited January 24, 2021 by roaku Link to comment Share on other sites More sharing options...
mickle026 386 Posted January 24, 2021 Author Share Posted January 24, 2021 (edited) Im not great with javascript, im still learning it on a need to know basis ... so I dont know things I ought too... but do know others that are way beyond that I should know .. if that makes sense Im understanding that snippet as: Anything clicked in the heirachy of #somePermanentParentIdInYourHtml" function( For The Element Clicked ) { e being the element identifier log to F12 console "clicked" } Maybe im wrong ? Anyway I've put return function (page, params) { $(page.querySelector("#ImageResult")).on("click", ".dynamicElement", function (e) { e.preventDefault(); console.log("clicked"); }); } So that it read anything within the ImageResult which is th eid I wrote my buittons to,but I get nothing. So i changed return function (page, params) { $(page.querySelector("#ASearch")).on("click", ".dynamicElement", function (e) { e.preventDefault(); console.log("clicked"); }); } which is my first div id, ie the whole page <div id="ASearch" data-role="page" class="page type-interior pluginConfigurationPage page-windowScroll" data-require="emby-button,emby-select,emby-checkbox,emby-linkbutton,emby-input" data-controller="__plugin/ActorWebScraper.js"> <div data-role="content"> so that it would check every element on the page and fire if any were in the class=".dynamicEvent" and I still get nothing in the console. Im not understanding something or i am missing something and cannot see it I feel like I need to bang my head on something - lol Edited January 24, 2021 by mickle026 add screenshot Link to comment Share on other sites More sharing options...
roaku 791 Posted January 24, 2021 Share Posted January 24, 2021 I just noticed that in your generated html, you're naming your class '.dynamicElement' instead of 'dynamicElement'. The html *should not* have the dot, just the name of the class. So right now, in your javascript, you're targeting a class named 'dynamicElement', which doesn't exist because you named it '.dynamicElement' in your html. Link to comment Share on other sites More sharing options...
mickle026 386 Posted January 24, 2021 Author Share Posted January 24, 2021 Ok, so this amateur has figured out that the event listener is live on my id ImageResult. So it must be my buttons. <button class='.dynamicElement' type='button' id='" + i + "' >" + (i+1) +"<span><img src='" + ImageUrl[i] + "' height='270' width='190' style='border-width: 20px;' /> Link to comment Share on other sites More sharing options...
mickle026 386 Posted January 24, 2021 Author Share Posted January 24, 2021 (edited) 4 minutes ago, roaku said: I just noticed that in your generated html, you're naming your class '.dynamicElement' instead of 'dynamicElement'. The html *should not* have the dot, just the name of the class. So right now, in your javascript, you're targeting a class named 'dynamicElement', which doesn't exist because you named it '.dynamicElement' in your html. And Boom - Spot on , its working now Thank you, thank you thank you Amateur mistake, I've read loads and loads to impliment this, I couldn't even get the pictures in my code earlier today. Achieved a lot today and you have helped with the stumbling block Thanks Edited January 24, 2021 by mickle026 Link to comment Share on other sites More sharing options...
roaku 791 Posted January 24, 2021 Share Posted January 24, 2021 Awesome. Glad it worked out. 1 Link to comment Share on other sites More sharing options...
mickle026 386 Posted January 24, 2021 Author Share Posted January 24, 2021 (edited) Now to try and figure out how to get the button index or id should be e.target.id I think Actually e.target.id doesn't work, but this.id does Edited January 24, 2021 by mickle026 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now