Can anyone quickly look at this and see why jquery doesn't seem to be working? It was working earlier today, and I'm not sure what I could have touched that would cause it to stop.
I have a jsfiddle set up here: http://jsfiddle.net/Nqdb3/
But if that's not good for troubleshooting this I can provide the actual site.
I couldn't log in, But I can tell you that many times I have encountered jQuery problems in wordpress both in admin and front end.
These usual suspects are plugins but it happened to me in the past without even touching the site.
1) start disabling all plugins one by one - this will eliminate the possibility of different scripts that cause it. If you were lucky, you will discover the culprit.
2) upload the js folder from the same wordpress installation.
-- download the same version you already have
-- upload the js directory under wp-includes - all of it. and replace your current directory .
For me it worked many (many) times.
Related
I have made code (on a local machine) using Brackets and Theseus plugin. Everything works fine there. The problem is when I try to take it to a Wordpress installation.
There are many pieces to doing this; and, unfortunately, what I can get to work in Brackets in 10 minutes seems to take 100 hours to put into Wordpress. Is there some kind of basic "bootstrap" code or some kind of plugin out there that will allow one to get their code in to wordpress (on either the Admin side or Front-end side) easily - given one has a .js file, an index.html (or index.php) file, a .css file that allows for AJAX functionality to take place?
What would be good is to just make changes in files (i.e. variables) and filenames just to get going?
I guess the mods are going to try to down this question - but - I am just so sick and tired of trying to get my WORKING code into Wordpress.
Thanks!
Never mind. The problem was the implementation of AJAX under Wordpress.
These items helped me solve this problem:
How to implement jquery ajax in wordpress
https://www.youtube.com/watch?v=ipO3OrN6n2w
following tutorials here: https://www.youtube.com/watch?v=Cz-HImr6hQM
I would like to give ONE MILLION kudos to the guy who produced the "How to implement jquery ajax in wordpress" - it answered ALL my questions in just a few minutes.
I have spent a lot of time working on a webpage and have been very lazy about committing things to Git. Today, I attempted to push everything up to my repo, but I think I may have caused a disaster. I am very new to Git and basically just use it for its most basic functions.
I was unable to push anything and the console recommended using a pull request, after doing that and attempting to push again, I began to get a bunch of merge conflicts with my gemfile and gemfile.lock. I tried fixing this issue as well but then I started seeing random <<<<<<HEAD throughout my files (including routes as well as my javascript).
Now when I try to load my localhost page, I seem to have all my content, but my css file will not load resulting in a very ugly page. When I use chrome devtools and try to look at the sources, the application.css.scss is blank, when mine have 1000+ lines of code (and is viewable in the app\assets\stylesheets folder.
Has anyone had something like this happen / know how to remedy the amount of damage I might've done in 15 min. Anything will help as I do not know how to proceed.
you'll want to try doing a git reset --hard to reset your local repo to the state it was at before you ran git pull.
see this answer for reference:
https://stackoverflow.com/a/1223385/3880374
also, in case you're curious about those "random" <<<<<<HEAD strings throughout your files, those are actually added by Git. Per their docs:
Git adds standard conflict-resolution markers to the files that have conflicts, so you can open them manually and resolve those conflicts
Github also has a helpful guide to resolving these conflicts via the command line.
In JBoss Devstudio, I am getting this new "error" with Tern: Synchronizing script resources with tern server. It's not really an error, but it's a process that occurs every single time I click in a JavaScript file. It's just spinning and freezes up the entire IDE. This has never happened to me before, and I was working on the project yesterday without any issues.
Does anyone know what the hell this is? There isn't really anything on Google except one post that says to upgrade.
JBoss Devstudio integrates tern.java for JavaScript support. I think your problem is because that you have a lot of JavaScript files in your project (inside node_modules or bower_components) and tern.java tries to analyze your all JavaScript files, and it takes time.
In your case, you need to exclude folders like node_modules and to do that you must use a version of tern.java >= 1.0.0 which support include/exclusion pattern path.
To deal with this problem, open your workspace and drop the folder, like E:\eclipse\workspace\.metadata\.plugins\tern.eclipse.ide.server.nodejs.embed.win32.win32.x86_64, the node.exe in it is the point.
I resolved this issue by simply eliminating the built in js files from path.
I removed this from validations '**/node_modules/*,**/bower_components/*'. (If it even didn't resolve)Go to Properties of the project > JavaScript > Include Path > Validation
OR
Go to Properties of the project > JavaScript > Include Path > Source and remove the whole project. Click on "Add Folder" and give the required path for your JS. Like projectname/src/pages.
I'm having a weird issue that I can't seem to figure out by looking at the developer tools. All of my javascript files seem to be loading when I look at the 'network' tab in Firefox, but every time I refresh it seems (quite randomly) one or two of my javascript files will not be functioning properly.
I am super confused as to what could be causing this. I am loading all my <script> tags at the bottom of my html document before the closing </body> tag. Is there somewhere else I should be loading them for firefox? When I test this on my dev server everything loads fine, but when I upload it to AppEngine some of my js files just choose not to load.
Is there some weird thing with timeouts or loading order for firefox that I should be aware of? Or some random setting that I have turned off somewhere? I can't seem to find any documentation on the matter, either, so any links to reading would be appreciated.
Thanks!
To be clear, this isn't Firefox specific issue, FF just happens to be the browser that you are encounter it in. This is a common issue when loading js assets at runtime.
tl:dr
If you are loading assets from different locations that can cause runtime inconsistencies, shoot, even if you are requesting two separate assets from the same location you can run into issues since they are occurring in separate requests and are subject to network performance.
Option One:
Consolidate the js assets that are being render inconsistantly.
So if you're loading the following:
jquery.js
script-one.js
script-two.js
Then concat them into one asset:
jquery.js
scripts.js
Option Two:
Use a module system like require or browserify.
Longer Answer
If you are loading assets into the browser at runtime that require each other to be loaded in order to function there will always be a certain degree of risk if you aren't using any sort of module loader or build process to mitigate the solution.
Say you have to following situation
You have jquery and three plugins which needs to be loaded in a particular order. Just because you have your tags stacked in a particular order doesn't guarantee that is the order they will be available at runtime. Take the following:
<script src="jquery.js"></script>
<script src="modal.js"></script>
<script src="widget.js"></script>
Its very possible that these could load jquery > widget > modal, then jquery > modal > widget on the next. It might seem like someone is messing you, but that's just the world wide webs doing its thing. As I stated above there are common ways to solve this problem that are already well vetted and I suggest looking into them. This is also one of the main features on ES6 that people are VERY excited to for.
Hope that clears up your FF gremlins! Cheers.
I downloaded the barebone example of Twitter's bootstrap and customized it. I tested it locally (with WAMP server) and everything works perfectly, both the CSS and the JScript.
I uploaded the files to my webhosting service and the JScript just doesn't work. I noticed it because dropdown boxes stopped working.
I searched and found other persons with the same problem but they all are using ruby and I'm not. Just the play CSS+JScript provided by bootstrap. Besides they said the solution was to include the bootstrap.js first and then the jquery.js. Well I tried it and it didn't work, I even included the not minified .js and still it didn't work.
I'm using the same browser (Chrome) for local and remote testing. I also tried different hosting services and the problem occurred in both.
Help is much appreciated.
Other similar questions:
Javascript features work on localhost but not when deployed to Heroku
twitter bootstrap drop down suddenly not working
The issue might be that you load boostrap.js before jQuery. Locally your browser may be using a cached copy of Jquery, so it works there but not on your live site. Try fixing it by switching those two lines in your code:
<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>
I know this is very strange but I think I got the solution. Previously I was using the (supplied) jQuery 1.7.2 minified. Now I changed it to use the jQuery 1.8.0 not minified. It just started to work... Another thing I did was to convert all files' encoding to UTF8 (I think this was the real problem/solution)
I had the same problem. In IE, the site was working on localhost but not when hosted on a different server. Adding the following meta tag fixed it.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I had the exact same problem, so was relieved to find this post and others like it. My resolution was similar. I pulled my hair out for half a day trying all different things. Walked the dog. Had half a dozen beers. Slept on it. Had breakfast. Recopied back the stylesheets at top, and the js from the bottom from the local html to the server php, and then for some unknown reason it started working again. The only points which seem useful for others going through the same:
Try and get back to a working scenario - in my case the index.html was working on the server but not the index.php. Getting these the exact same was key.
Try on different browsers just in case something strange is going on.
Make sure you keep clearing the browser cache (e.g. right click on the reload button in Chrome and choose 'Empty Cache and Hard Reload')
Inspect your bootstrap css and js versions. Change them forward and backward in version until you get success. Chances are, the version that came with your bootstrap theme download is the most likely one to work.
I was having simular issues before. The tabs function was working fine in my HTML site, but would not work when coded into a Wordpress theme. All of the source URLS were being generated dynamically with Wordpress's .
The tabs finally began working when I added all JS links (except for Modernizr into the footer instead of the header.
Back to basics: If Debug is set to true on the local machine and false on the deployment environment as it should be, make sure your .min.js files are not overriding customizations you have made to the non-minified versions of .js files (applies to .css as well).
You can also turn Debug off on the local machine and you should see the same issues.
Late to the party but I found out that my issue was that the Bootstrap.js was not being pushed out during deployment.
In addition to the very useful suggestions by #dialex and #Darrell , I will add that if none of that works, you can review any code that you might be linking to, ie. via require ('page.php');, for duplicates. Duplicated .js links tend to cause these issues.
I ran into this on a site I built and uploaded to Amazon S3. Worked fine on my local machine and even my local server, but didn't work when served from Amazon. The console in Firefox (but not Chrome) showed it was failing to load bootstrap.min.css (et. al) because their MIME type was not text/css.
I had to use the S3 console to force change their types to text/css, clear caches, and reload. Voila!
I'm using Codeigniter. I solve these issues by changing my base_url in config.php.
Previous :
$config['base_url'] = 'http://localhost/public_html';
Changes to :
$config['base_url'] = 'http://(my intranet server ip adress)/public_html';
Had the same problem
In my .html files I had this line
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
After changing it to this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Everything works fine. I guess that internally webjars have http and changing css link to start with https solved my problem