cancel
Showing results for 
Search instead for 
Did you mean: 
Surveyor II

Access pop up window element

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

thanks232671_Screen Shot 2017-05-05 at 11.19.49 AM.png

17 Replies
Community Member

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. 

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

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. 

232762_pastedImage_1.png

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!

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

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/ 

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 .

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

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

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.