Jump to content

Javascript help required for dynamically generated buttons - anyone ?


mickle026

Recommended Posts

mickle026

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 ...

 

Screenshot_2021-01-23 Emby(2).png

Edited by mickle026
Link to comment
Share on other sites

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 by roaku
Link to comment
Share on other sites

mickle026

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 :)

Untitled.jpg

Edited by mickle026
add screenshot
Link to comment
Share on other sites

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

mickle026

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;' />

 

Untitled.jpg

Link to comment
Share on other sites

mickle026
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 by mickle026
Link to comment
Share on other sites

mickle026

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 by mickle026
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...