Why is my .js file going to a 404? - url

I'm using Wordpress, and I linked some masonry jQuery library files and when trying to visit the .js file, it goes to a 404. However, my custom functions are viewable and so is the jQuery .js file. Why might it be going to a 404? I spent 1 hour trying to figure out why my function wasn't working and it turns out the file wasn't being loaded properly.
This is how I am linking to the jQuery files:
<script language="javascript" type="text/javascript" src="http://domain.com/js/custom.js"></script>
<script language="javascript" type="text/javascript" src="http://domain.com/js/jquery.eachdelay-0.0.1.js"></script>
<script language="javascript" type="text/javascript" src="http://domain.com/js/jquery.masonry.min.js"></script>
For some reason, custom.js works fine, but not the others. I have it uploaded properly. It says "Page not found" when I try to visit the other files in the browser.

Here's the conclusion:
I created another file and deleted the old one then renamed the new one with the same name and it didn't work. So, I just ended up creating a file and naming it something other than the original default and then pasted the JS contents in to the new file I made and viola!
I think its a caching problem, I don't know how to fix it and why it happened but this was my solution. Also, people should not be so hasty to assume that the 404 means that I do not know how to upload a file and that I uploaded it to the wrong directory.

try using an absolute URL path for the js file.

Related

Swiperjs changed CDN url, how can I prevent bugs in future?

I'm using Swiperjs in my website. Today I saw that swiper is not working, and in console were 404 errors, because css and js files could not be found.
I am using swiper from CDN, in the way that is written on swiperjs website https://swiperjs.com/get-started/
Now the problem: when I developed my website, there was a different url to swiper CDN (writen in swiperjs website, last year).
In my code, before, was this, and it worked:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
Today, this code gave me errors. So I changed to:
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
And this now works.
My question is:
how can I be sure that in future there won't be any changes like this? Am I more safe if I download these scripts and include them in project?
I thought that CDN should always work.
thank you for your information. finally my gallery start to showing images. Realy appreciate about your search in change of swiper css resources. I think we should donate/bought the copy of swiper css and install to our website server, CMIIW.

Pinterest board widget links not working

I am trying to use the profile widget from pinterest found here. In my site it loads perfectly, but if I click on the images the links do not work.
I tried doing the same on a new ASP MVC project and it was working perfectly.
This is the code I'm using:
<a data-pin-do="embedUser" href="http://www.pinterest.com/mysite/" data-pin-scale-height="295" data-pin-board-width="310">Visit MySite profile on Pinterest.</a>
<!--pintrest-->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
As Matthew pointed out, it's probaby the prefixes.
But you need to fix one more — in the script itself. Just follow the url, copy and paste the destination code (instead of calling the provided one). Add an http prefix to the assets URL. That's it. Worked for me.
<script>!function(a,b,c){var d,e,f;f="PIN_"+~~((new Date).getTime()/864e5),a[f]||(a[f]=!0,a.setTimeout(function(){d=b.getElementsByTagName("SCRIPT")[0],e=b.createElement("SCRIPT"),e.type="text/javascript",e.async=!0,e.src=c,d.parentNode.insertBefore(e,d)},10))}(window,document,"http://assets.pinterest.com/js/pinit_main.js");</script>
If you are running your file locally from a hard drive, the paths might not render correctly since the src attribute or your script tag is prefixed with //. This means it will use the file prefix instead of http when trying to retrieve additional items if those links also are prefixed with '//'. Change it to the following to see if it works:
<script type="text/javascript" async src="http://assets.pinterest.com/js/pinit.js"></script>

Usage of FullCalendar mobile

Has anyone used the FullCalendar-mobile plugin? I am trying to use this in a jQuery Mobile app bundled with Phonegap. There are tons of js and css files in the src folder but I can't seem to figure out which one to use. Linking all of them to my html page didn't yield any results.
Pardon the very noob question. Kinda new to jQuery, HTML5 & CSS. Would greatly appreciate the help.
Thanks!
I'm just going through this myself. My understanding is that you'll need to do the following:
Download the files from
https://github.com/JordanReiter/fullcalendar-mobile using either git
or the 'download as zip' button.
Navigate to your downloaded directory
Type make zip, as per the instruction from the link above. (You'll need java installed apparently)
In the dist directory created by the above process you should see the fullcalendar directory containing the js and css files you need.
Copy those to your project and link appropriately. You are now officially good to go
I have the same problem with the css files. Until now I'm not able to combine the style sheets delivered with jquery and jquery mobile for the desired result:
http://thomkerle.blogspot.ch/2012/07/problems-with-jquerys-fullcalendar-and.html
Note:
for basic usage you can just take the latest fullcalendar version! There will be some events that are not supported (but basically you can press on a event and navigate through the calendar).
See also:
http://forum.primefaces.org/viewtopic.php?f=8&t=23763
Looks like you want to use the _loader.js file
just keep the structure of the directories that exists
I am working on this right now ill post updates as a reference. The documentation states:
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.min.js'></script>
<script type='text/javascript' src='ui.core.js'></script>
<script type='text/javascript' src='ui.draggable.js'></script>
<script type='text/javascript' src='ui.resizable.js'></script>
None of these files are on github the last 3 are clearly from jquery UI

From JQuery Mobile to PhoneGap / Cordova

I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.

rails 3 seems to disable my reference to an mp3 player (SWF and Js)

Does rails disable use of a flash .swf file in a rails app by default, and is there a way to make it work?
I am trying to integrate the Wimpy Button MP3 player into pages of my Rails 3 app.
The MP3 player consists of a two files, wimpy_button.swf and wimpy_button.js. They need to go in the same directory.
I put them both in my /public/javascripts directory (the .js assumes the .swf is in the same directory)
I added the js to my layout (and verified the script src= is in my resulting html files)
= javascript_include_tag "wimpy_button.js"
(I also tried just hardwiring it with;)
<script src="/javacripts/wimpy_button.js" type="text/javascript"></script>
On a page, whereever I want an MP3 player button I have this javascript:
<script language="JavaScript" type="text/JavaScript">
writeWimpyButton("http://example.com/url_to_audio.mp3", "20", "20", "&displayRewindButton=yes");
</script>
On my static test pagein /public/testplayer it works fine.
But on any of the active pages, an empty space is where the player icon should be.
I assume the external content is being blocked by some security setting on rails?
Those files don't need to be in the same directory. Not sure which version of Rails 3 you're using, but you might be having a fight with the asset pipeline here.
Read more at: http://guides.rubyonrails.org/asset_pipeline.html
Then, put your swf in app/assets/flash and your js in app/assets/javascripts. Files will be available from your browser at /flash and /javascripts. You may need to edit the javascript to reference the correct location of your swf file.

Resources