Javascript not running in my app

1

I installed an app, and I’m playing with javascript a little bit but something is not really working as expected. If I add the following and visit my modules page, which has plenty or links, it doesn’t work:

$('a.module-section-link').css("color", "red")

However, the same runs pretty well inside the console. None of these work either:

$(document).on('app_ready', function() {
    $('a.module-section-link').css("color", "red")
}

$(document).ready(function() {
    $('a.module-section-link').css("color", "red")
}

Do you know what am I doing wrong please?

2

Please check your logs in browser

3

@johnskywalker I did that but logs are clean… No warning or error is returned.

4

have you tried reloading/clear cache? or try stopping bench and do bench build

5

Of course I did all that! I’m currently running bench start and I can see my javascript being built and it gets processed correctly. It’s there and the browser runs it… It only just doesn’t work!

That’s puzzling because I don’t understand what works and what doesn’t and why :pensive:
You mean it works for you?

6

You are making your own javascript file right? Where did you put it?

7

Made a new app, installed it, added this to my hooks:

app_include_js = "/assets/newapp/js/scripts.js"

and build.json:

{
    "newapp/js/scripts.js": [
        "public/js/score.js"
    ]
}

The script is in the js folder in apps and correctly built in sites. The browser does load it, it’s there, I can see it in chrome developer tools as well. It just doesnt do anything.

8

I’m pretty sure that the script (at least on document ready) should work. The script runs just fine in the console, which as far as I can get, it means only one thing: it’s not ready yet by the time it runs.

So how am I supposed to run custom scripts inside a new app?

9

What does your code do by the way? is it supported by your browser?

10

It does exactly that! A cool thing… turns anchors red :sunglasses: I’m just trying to play around with ERPNext so far and getting to know it. Are you able to make that simple thing work? I just wanna know what it is that I’m doing wrong. The docs tell me that all javascript included that way should run just fine, but it doesn’t.

My hunch is that I just ignore some callback or trigger in place to activate my code and I just don’t know what it is. Do you?

11

Exactly, I think I am right, in fact this works (thanks @johnskywalker to let me talk and think :slight_smile:):

var checkExist = setInterval(function() {
   if ($('a.module-section-link').length) {
      $('a.module-section-link').css("color", "red")
      clearInterval(checkExist);
   }
}, 100); // check every 100ms

Can anybody please help showing the right way to include scripts in custom apps?

12

I see this is great :slight_smile: yup I was able to integrate js camera, and js barcode. Have tried putting console.log just to make sure that this is called?

13

:grin: Yep!
But it’s just not the way to go. I know there must be some callback function for the app to be ready. Tried all event listeners I could find but actually had no luck so far. Do you have an answer @johnskywalker?

14

@johnskywalker relax… I tell you, you just can’t do that kind of things. The dom is frozen, so these very simple things are just not possible.

1 Like
15

@imapirate Hi, so this is solved already right? :smiley:

16

If you accept it to not being possible as a solution… yeah, I think that’s the end of the line as of today :pensive:

17

This topic was automatically closed after 24 hours. New replies are no longer allowed.