Can't build, css issue, jquery issue

  • 1
  • Problem
  • Updated 4 years ago
3 problems:
1 ) I keep uploading my zipped up project into build.phonegap, but it keeps giving me back the initial phonegap build app? It doesn't give me my updated app back. It's also suddenly called "hello-world", which wasn't the name of my app.
2 ) I have an element that is 40px * 40px with a background image. The element is there, the image is there, but it's not 40*40px. If I force it to 40*40 with in-line css, it becomes 40*80px.
3 ) suddenly, underscores in jquery selectors are giving massive issues. I'm not getting *any* errors at all, but if I have an element, say $('.magic .image_1'), it will do nothing. If I change .image_1 to image1 (both the selector and the class), it will magically work.
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. That's the case when PGB can't find your config (or even worse, if you are uploading a full Cordova project instead of only assets and a config)
2. This is hardly a Phonegap Build issue. Also, a 'pixel' is not always a pixel on mobile devices.
3. What version of jQuery are you using?
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
1. I'm zipping the project folder from the root (where the config.xml is). I've always done it this way and it's always worked?
2. It only happens in phonegap developer (app) though. I can't test it as an actual app because it won't build. The rest is also working fine. It's this one very specific element (which happens to have a background image). I actually reset the mobile pixels, like you would with a responsive website.
3. I was using 2.1.4, now I updated to 2.2.3. The issue persists.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Well, you can either keep doing it that way, or start doing it correctly.
Phonegap Build doesn't have terms like "the project folder". There is no such thing.
PGB expects you to have both index.html and config.xml in the root directory ("/") of your zip file. Not in any named directory (such as /www or otherwise).

2. You can't combine the Phonegap Dev app and Phonegap Build. The Phonegap Dev app prepares for local builds, not for PGB. In PGB both your directory structure and your config are different.

3. OK. I would suggest you correct the first points, first.
Could it be that you are also using other js frameworks, in which the underscore has a special meaning?
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
1 ) But it's always worked like this? Apparently I had to put the config.xml within the www folder, which is odd to me because it's always worked before, and the standard phonegap template comes with the config outside of the www folder? - anyway, that's solved now, so thank you very much!

2. Phonegap developer as in the app made to be combined with phonegap build? The thing that creates the template and everything? When I started out with phonegap, the docs said to install phonegap build (desktop) and combine it with the phonegap dev app for debugging. I've been using it since... forever? Anyway, with the actuall app, I can now confirm that the element is still not listening.

3. Nope, just Jquery. I have 1 self-made plugin and photoswipe, but those are plugins and shouldn't affect the overall workings of jQuery.

sidenote: This is all very confusing to me, because for the past year I've never had any issues at all! Especially not with jquery or css!

another sidenote: again, I'm getting NO issues at all! That's what confuses me the most. The app keeps on working even if I put the stuff that doesn't happen on top.
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
To make 3 even weirder: Bindings DO work. Anything bound within wrappers containing underscores keeps working. The issue only seems to arise when I'm using .text(), .append(), .html() and such functions on an element within any 'underscored wrapper'.
I am really confused right now.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You're mixing things up.
A. Phonegap Build doesn't have a 'default template'. That's because PBG doesn't require _any_ directory structure. It has no idea about a "/www directory" or "roject folder". Those things are all just relevant for local builds, which expect a Cordova project.

B. The Phonegap Developer app prepares for local builds, not for PGB. On a daily basis, developers come to this forum and are confused, just like you. Go ahead and browse through a week's worth of posts at this forum, and you'll see what I mean.

C. You should NOT just place your config in "the www folder". The config and the index.html should be in the root directory, not in /www or any other directory.

D.
When I started out with phonegap, the docs said to install phonegap build (desktop) and combine it with the phonegap dev app for debugging. I've been using it since... forever?
Exactly. There you go.
You believe "Phonegap" and "Phonegap Build" (which is what this forum is about) are one and the same thing.
Unfortunately, many newcomers believe the same thing. Until they find out the hard way, just like you right now.

E. If your CSS doesn't make the image element look as you expect, either your CSS or some viewport specifications are wrong.
Since you haven't posted either one, I'm not sure where the error is.
But....would you really think that Phonegap and/or Phonegap Build will cause your CSS or your vieport specification to go wrong?

F. I must admit that I have no idea why classnames with an underscore would suddenly not be recognized, unless there is something wrong with the file contents encoding.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I don't believe Phonegap build changes anything in the html. And I have never, as far as I can remember, seen anything like that reported.
Wouldn't you think that developers would massivly complain here if that was the case?

If your zip file is available online, somewhere, please post its url and I'll be happy to have a look.
In that case, please also describe where I can find the 40x40 image and an html document with the underscore problem.
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
Dear Petra,
https://www.justbeamit.com/uf8uk

- you can find the zip file there. I will keep the link open for a while, I should be able to see when it's been downloaded. (This way, only you can reach it). Please don't mind the mess my code is in right now. I've rebuilt the app 304949 times and I still have to sort it out!

The place to be would be main.js
The html element not grabbing its css is in "renderShouts()" (line 476). Specifically, it gets rendered on line 504 ( style...)
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
creating a second comment because the first one was messing around:

- as for the elements that appends don't work on, check function renderStorePopup() on line 995. On opening the app and clicking a store logo, it should open a pop-up with information. This information is received in JSON but not appended. This is on the lines containing " $('.storePopupWrap .popUpTab_1". (lines 1017 to 1037). - take away ".popUpTab_1" and boom, it works.

You can find the creation of these elements within the "storePopUpWrap" element in the index.html.

--- gosh, wouldn't it be funny if all this happened because I'm foolishly overlooking 1 simple html typo?

link (previous one expired and I can't edit the comment anymore: https://www.justbeamit.com/yse3j)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Just downloaded. I'm having a look now
Could take a bit, though
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
Thank you :)

That's fine, I don't expect you to go through too much trouble for me. Please, take all the time you need :)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Some feedback, most of it unrelated to the issues:

1. You are pinning almost all plugins to older versions. Do you avoid using the latest versions on purpose?

2. Your icons and splashes won't show, because:
- you specify a /www directory, which doesn't exist (anymore)
- you are using compound qualifiers in the density attribute, which PGB will not recognize.
see the Icons and Splashscreens section of the PGB Docs

3. I noticed that a part of index.html is invalid html. You have
<div class="storeHoursWrap">
<table>
<div class="day">
<div>Ma:</div>
<div></div>
<div></div>
</div>
[...etc...]
</table>

No idea if this can cause trouble with your CSS nesting.

I'll leave it at that for now. You've quite a bunch of javascript to read through, which is a bit more than I can find time for, right now.

I liked "Er werkt een heel slimme aap aan om dit op te lossen!", though.

(Ik ben kennelijk niet slim genoeg om eventjes vlot de oorzaak van de perikelen te vinden.)
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
1. Nope. Because it wasn't working, I had overwritten the new config with my old one. I actually don't need a lot of these plugins (yet) but if I remove them, it'll stop working :(

2. Totally right about this, too, though I don't use the pgonegap splash screen. I forgot to update them to the new location.

3. Fixed. Unfortunately, that did not change a thing. Nice one, though. Can't believe I overlooked it.

yep, I do have a lot of js :') Probably only 30% of it is actually being used right now, though, as the app has been 'reformed' to be a lot less than originally intended. As I'd said before, I really need to do a cleanup!

Thanks, I stole that monkey thing from google hehe. Are you dutch? O.o

-- I used the debugger to find the element I was speaking of. I actually used it to make the element 40*40px again, and again, it became ~ 80px wide. Not the element itself, but there's an equally wide whitespace besides it. It seems I am unable to 'find' the whitespace in the debugger. The debugger shows that the logos are indeed 40*40...
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
I've noticed that the logos aren't the only css broken elements. The oddest thing of all is, that the css seems to be broken all over the place, completely random. I've copy-pasted the css rules for the element in question to the top of my CSS, just to check if it broke somewhere halfway... it still won't work. This is the most confusing situation I've ever been in, I think :(
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Sorry I couldn't yet find the cause of the underscore trouble (and I didn't even take much time for the 40x40 thing - I'll try and see a bit later again).
However, I really can't imagine this to be a PGB problem.
If you're in a hurry, you may want to remove the underscores...which would not be very satisfying.

And well, I'm European. If necessary, I reply in english, german, dutch or french.
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
That last bit is quite awesome. I'm replying in an answer so I can post a screenshot of the 40x40px problem. The only other thing I can imagine, which I have JUST realised, is that so far, the elements that are giving me trouble with css, have either table html, or display:table, table-cell, etc. css rules... Would that clarify anything?

I want to blame my coding more than I want to blame PGB (my coding would be quite easy to solve) but I cannot recreate it in any browser environment... :(
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Ah, hold on.
You are building with cli-6.1.0 and probably testing with a pretty new Android version.
You have quite a bit of inline CSS....and you don't have a CSP. That might cause the trouble.

Please see the whitelist plugin documentation and read about CSP. Add a rule for inline CSS, and you might solve the problem.
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
Hello, Jesse.
No, the app is working perfectly fine. (though at the moment I'm having a "won't scroll inside an element" issue, but that's not important)

I've looked it up, and I'm not the only one having this issue. A lot of people don't get a "target" when they're using the PGB debugger. I mentioned earlier in this post that the debugger wasn't working anymore. I just commented out the CSP and the debugger works now.

I have these options in my csp: default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@NoobishPro,
your comments are in conflict. You say the app is working perfectly fine. Then why are you in the debugger?

FWIW, your CSP line is generic and troublesome. It is the setting in many templates/boilerplates (except mine) so I a not surprise it is not working.

Jesse
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
1 ) I use the debugger because it helps when trying to find out what CSS differences there are between your browser and your phone. I had some issues with background-images and scrolling (overflow handling). It seems the pc browser and mobile browser handle containers (especially the body and html elements) differently. That's why. It doesn't mean the app isn't working, it's just a cross-platform interpreter difference.

2 ) You're not being very helpful. You say my CSP line is generic and troublesome, but you do not explain why, nor do you give me any suggestion as to how I could improve it. Please explain this in more detail.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
On #2, you are right. However, in the past getting people to answer the first question often requires a bit of arm twisting. In your case, I pressed on your thumbs

Here is your answer: an all inclusive CSS is not allowed without a written CSP exception. You have written 'unsafe-inline' and 'unsafe-eval'. You can fix this issue by placing all your CSS in a separate file; this especially includes style= and <style>. This means that only 'self' is available - which means the CSS file can only be in the App bundle, else it is ignored. The alternative is to add a start (*) - just like with default-src

FWIW: default-src, style-src, and script-src require restrictive exceptions, all other security filters default to default-src.

You can read details here: Whitelist Worksheet (Matrix)

Any Questions?
Jesse
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
Wow, this link is seriously helpful, thanks!
This doesn't exactly explain why the debugger stops working when I add the CSP tag, though... That's what's getting me curious.

I have an external css file, but I need inline-css for jquery. making 300 pre-set classes is just too much of a hassle and too hard to maintain. Besides, any jquery manipulation (say, animations) use inline-styling, so it has to work.

-- do note, that even without the CSP having 'unsafe-inline' enabled, it still works. Does this mean the CSP doesn't even work?

I guess I could remove stuff like 'unsafe-eval'. The only thing that matters to me is that unsafe-inline is allowed.

--thing is, I'm not dependant on such protections at all. People can hack around in my app all they want, their own waste of time. My app is nothing other than a client-side thing. From my programming experience I've already learned to split off client-side from server-side. I could give people my app's entire source code with full access, and they still won't get into any important data. Everything is validated server-side. All data on my app itself is public.
Photo of NoobishPro

NoobishPro

  • 22 Posts
  • 0 Reply Likes
I want it not to be a PGB problem, but the thing is, I only have it in PGB. I can't recreate any of it in browsers. The only thing I can think of right now is that it might have to do with tables?



^ Check the image to see what I mean about the 40x40 thing. The logo (red block on the left) is supposed to be 40*40px, but it's not responding to its css. (Can't see it in the debugger, either). Manually making it 40*40 (with javascript) results in a weird whitespace. These are the only 2 elements in that table row.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@NoobishPro

Wow, this link is seriously helpful, thanks!
::::SNIP::::
-- do note, that even without the CSP having 'unsafe-inline' enabled, it still works. Does this mean the CSP doesn't even work?

CSP is still going through a transition period. This means that within webbrowsers you can disable it - because the server is supposed to turn on CSP using http-headers. However, within webview libraries like those that Phonegap, it is not clear how that works. I have not had time to look at the source code.

However, given all the security failings by all parties, it is best to turn it on - even if you are running loose security. For instance, most developers don't know about the MPEG security bug that allows 'root' user access to Android devices, just by looking at the MPEG file!


I guess I could remove stuff like 'unsafe-eval'. The only thing that matters to me is that unsafe-inline is allowed.

--thing is, I'm not dependant on such protections at all. People can hack around in my app all they want, their own waste of time. My app is nothing other than a client-side thing. From my programming experience I've already learned to split off client-side from server-side. I could give people my app's entire source code with full access, and they still won't get into any important data. Everything is validated server-side. All data on my app itself is public.

I can't say much because my position is and will always be that -- the security of your app is your business - not mine.

I can offer suggestions, fixes and even point toward possible issues, but building the "security wall" is your business and always will be - as far as I'm concerned.

Jesse