Including javascript function, does not work on android - javascript

i'm trying to solve a strange problem. I have realized a personnalized project for 2 weeks ago creating personnalized widget and event on them and as a result i want to deploy it on my android device.
For example, this link : http://jsfiddle.net/fc8hL/ show you a checkBox example :
--> first div is a container which can include many checkboxes
--> second div is a checkbox container
--> three img in the previous div are differents images which appear according to mouse/touch event on the checkbox.
--> the js function "check(e)" allows me to treat these 3 images and the event.
THIS FUNCTION WORKS PERFECTLY on both my local computer and my android device! i have realized some others functions in order to put in the HTML buttons, radio and comboBox.
Some events are attributed to this widgets.
Problem is : the final html file is huge : indeed, there is one function per img and i would like to optimize it creating javascript file. That is easy, i just put
<script "checkBox.js"> ***My existing function that works !***
</script>
And when i open my html file... surprise ! that works on my local computer, but not on my android device... Are you seeing an issue for this problem ?

Ok guys,
i have debugged my program thanks to epascarello link, and i found my problem.
On my remote computer, an error is showing :
"Failed to load resource: the server responded with a status of 403 (Forbidden)"
All my files are on a server and i didn't change reading options on them, that's why i couldn't access to all javascripts functions included in these files. Bad mistake...
Thanks a lot for your help :)

Related

Loading js multiple times – Chrome problem

I am trying to use external js file to load content in divs.
The js file needs to be loaded as much as divs loaded.
For example:
<div class="classname1" userId="101010" unitId="111"></div>
<script src="//example.com/js/thefile.js"></script>
<div class="classname2" userId="101010" unitId="222"></div>
<script src="//example.com/js/thefile.js"></script>
<div class="classname2" userId="101010" unitId="333"></div>
<script src="//example.com/js/thefile.js"></script>
This code will be provided to the users to embed it in their websites. Say, it would be embeded in example2.com and example3.com.
When the js loads at thise sites, the code reads the attributes and depending on them it shows the related content inside the div.
The script works fine in Firefox (eg: if there are 3 pieces of embed code, then the browser shows 3 contents), but it doesn't work well on Chrome (it shows one content only).
As I noted that, Chrome detects the number of js loads, for example 3 times, however the first piece of code works and the other pieces doesn't.
Note: when I used a trick it worked in Chrome, but I don't want to use this easy solution: I changed the src url for each embed code by adding ?v=1 , ?v=2 and ?v=3 after the .js file.
Any ideas for solving this issue will be appreciated.
The real problem here isn't that the file wasn't loaded 3 times, rather it's that the code wasn't executed three times.
Browsers are expected to cache the files. And, you can expect inconsistent behaviour around what happens when same file's included more than once. Using a nonce, like v1 etc will disable caching. The best thing to do here would be wrap the functionality of your JS file in a function, and then load the file only once. You can simply call the function three times, or as many times as required.

javascript load in wordpress template issue

I created a wordpress template for a customer and I used a plugin to allow registered users to customize his profile. The issue appears when I'm trying to change the profile photo, the modal windows that allow that don't charge!
Please see this picture: http://tattoobiter.com/custom.png
I tried to insert manually (in chrome console)
<div id="um_umpload_single"></div>
in </div class="um-modal no-photo"> and it works correctly till refresh the page.
I think something of my template don't let javascript to charge correctly, but I can't understand what...
Please help!
I tried to insert the first div in the second with append jquery but don't work...
Problem solved, It seems wordpress have problems to charge javascript external scripts if don't have the "".

prettyphoto not displaying thumbnail but resolves image when clicked

I had to move my wordpress site to a different directory folder on my hosting server. Now for some reason on the portfolio pages of my website it's not displaying the thumbnail preview for lightbox images. The image will display when the thumbnail is clicked so I know it's pulling the right image from the right place but why is it not showing the preview thumbnail?
Here is a link:
Any help would be really appreciated!
You don't have the img src defined which PrettyPhoto uses to pull the thumb:
OK, well based on your comments the switch across from one server to another has stopped the method aq_resize() working. It is called Aqua-Resizer, here's the Github page;
https://github.com/sy4mil/Aqua-Resizer/blob/master/aq_resizer.php
The wiki on it explains it's use but if all you've done is change the server then you will have to look at other explanations for why it's not working. The following is a list you can start looking through;
Make sure your functions.php still has require_once('aq_resizer.php'); with the correct path to this script. Make sure the script is actually there. If it is try changing the file permissions on the file to see if that helps. If the script uses a cache directory try changing the permissions on this.
It could also be that the PHP version on the new server is different (maybe, I'm guessing now)? Check that too.

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.

JavaScript SRC path not working

I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.
You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.
The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)
The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)

Categories