Access pop up window element

[julielkz]

Hi,

How can I access the elements in a pop up window? I want to add and change some text on it. Please see the screenshot. 

thanks

thanks

[nnasir]

Are you trying to change content via JavaScript override? If so, are you able to use 'inspect element' on the popup? That content may already exist in the DOM and remains hidden until triggered to popup. You should be able to get access the elements there. 

[julielkz]

Hi Nazmus,

Thanks for getting back to me.

Yes, I am trying to use javascript, I am new to js.

On this page, the class name for the title is “DashboardModal__ProductTitle”, so if I want to add “contact us” after the title, I put in the js is

$(‘.DashboardModal__ProductTitle’).append(“contact us”);

is that correct?

thanks again

li

[nnasir]

Yeah, that should do it. 

Depending on on how you want that displayed, you may want to enter a space or something, because .append won't do it for you.

You may have already been there, but I'll still leave the link to the jQuery append documentation: http://api.jquery.com/append/ 

The other tip I'll leave is that since you're working with JavaScript, you can test all of your code in the JavaScript console before you put them in the JS override file. To do this (in Chrome), right click anywhere on the page and inspect element >> click on the 'Console' tab and just type in the code you want to run and press enter. It's much faster than having to edit a file, upload that file, save the settings, refresh the page, etc. I do a lot of my testing in the JS Console. 

If it goes through, you should see the page change content immediately. Then you can copy/paste the code into your JS file and upload it to make it more permanent. 

Good luck!

[julielkz]

interesting thing is that it worked in js console, but it does not work on the server. Do you have some suggestions?

thanks for the tips.

li

[nnasir]

When you open up the JS Console, do you see any errors? If you do, can you post them?

Does the JS override file have the document.ready function? 

Should look like this:

$(document).ready(function(){

});‍‍‍

And you'd put all of your code between the curly braces. This tells your browser to let the DOM finish loading before running the JavaScript. When you're running the code in the console, the DOM has already loaded so you don't need to tell the browser to wait. 

More info on that here: https://learn.jquery.com/using-jquery-core/document-ready/ 

[julielkz]

Hi Nazmus

here is my example js

$(document).ready(function(){

$('.DashboardPanel__ProductTypeTitle').prepend("About |");

});

I do not see an error in console, and I still do not see the link. Only I run the js in console, the link will appear. Did I do something wrong? please help.

thanks

li

[ColinMurtaugh]

It could be that when your code is running (when the document first becomes ready) the popup element doesn't exist yet.  I haven't looked at the code in that page, but that popup element (or its contents) may only get created when the user initiates the action.  To test out this theory you could use the Chrome console to execute your code before opening the popup and then see if your custom text is there once you open it. 

--Colin

[nnasir]

Sorry for the delay. 50581462‌ made a good point about seeing if the DOM elements actually exists after the page loads or if it gets created after the popup is triggered. Running the code before the popup appears is definitely the easiest way to tell. The second easiest way would be to dig through the element inspector for the code. You can do this in the 'Elements' tab and do ctrl+f and look for ".DashboardPanel__ProductTypeTitle" - if you include the dot in the beginning, it'll find the entire element, not just the text. 

I don't think we have a popup like this anywhere on our instance (still trying to learn everything about our current instance of Canvas) so I don't exactly know where I'd go and check for you. I'll have to click around a bit. 

[ColinMurtaugh]

Yeah, I poked around to try to find that popup too, and then I realized that it's in Catalog, and not in Canvas itself.

I think the same caveats/complications discussed above apply regarding modifying DOM elements that don't exist on initial page load.

--Colin

[julielkz]

thank you all!

yes, I tested it, the element is not loaded on the parent page. any solution for this issue?

Colin, you are right, It is Catalog, not canvas. We would like to add text on the “drop course” page.

li

[nnasir]

Does the popup appear after an event? E.g. Is it after you click a button? Or after something loads?

If it's after a button click, then you can probably tie it to an event listener on the button click. For example, if the button has an id of #btn, then the code would be something like this in between the document.ready method:

   $("#btn").on("click",function(){

      $('.DashboardPanel__ProductTypeTitle').prepend("About |");

   }); 
‍‍‍‍‍

Our Canvas instance isn't using the catalog so I can't give you specific classes or IDs. But what this is basically doing is that if the button with id #btn is clicked, then it will run the prepend code on the .DashboardPanel__ProductTypeTitle class. 

Since the JS Override file runs after all other JavaScript, when your code runs to prepend some text, it should run after the popup element is created. You just have to find either the class or ID associated with the event responsible for generating the popup. 

Click is just one type of event. You can find info on other event types you can listen for here: https://api.jquery.com/category/events/ 

[muh · Accepted solution]

You may want to add the js code in the sub-account theme to make it effect to the users https://community.canvaslms.com/docs/DOC-10862 .

[mlabbett]

I was trying to do this i=uings the HTML provided in the Canvas Hacks course.  I cannot get the HTML to work properly.  Any help would be appreciated.  here si the HTML I am using:

<div id="dialog_for_Link1" class="enhanceable_content dialog"><Dialog for link1, this can be as long as you want but be aware that the width is set for 300px.</div><p><a id="link1" class="Button" href="#dialog_for_Link1">CLICK HERE TO SEE DIALOG</a></p>

[themidiman]

Instructure has deprecated the use of jQueryUI in Canvas. I suspect this is the cause of the behavior you are experiencing.

[mlabbett]

That is very unfortunate.  I thought this was simple html, not JQuery (I am a novice html person here!).  I just heard this was possible and come to find out it isnt.  Bummed.  Any other alternative for pop-up windows?

[themidiman]

There is a suggestion of custom JS overrides you can incorporate into your Canvas theme. This would allow you to achieve the pop-up effect you are looking for. 

Here's the link to the GitHub repo: https://github.com/ryankshaw/widgetize-canvas-lms-user-content

[walemark]

jQuery: onload() Vs. $.ready()?

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The key difference between $(document).ready() and $(window).load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document).ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.