I use a plugin (in this example it is selectric). I only load the plugin javascript file on product pages.
The code I use is: jQuery('.myselectpicker').selectric({}); and is located in a custom javascript file witch is loaded on every page.
If I go to an other page then the product page, I get a jQuery(...).selectric is not a function error.
I understand why I get the error, because the plugin javascript file is not included in the head (only on product pages).
But is there something I can put around the jQuery('.myselectpicker').selectric({}); code so it doesn't return an error on other pages than the product page?
I don't want to add the code to the plugin javscript file or in a seperate javascript file only loaded on the product page.
And for performance reasons I don't want to include all javascript files on every page type.
You can use jquery's isFunction function - https://api.jquery.com/jQuery.isFunction/
// Will trigger selectric() function only if it's lib included
if( $.isFunction( $.fn.selectric ) ){
jQuery('.myselectpicker').selectric({});
}
An alternative to check if selectric is loaded is to check if any elements on your page need it, ie:
if (jQuery('.myselectpicker').length > 0)
jQuery('.myselectpicker').selectric({});
this will then give an error - so could be combined with isFunction (see other answer, no need to repeat here) - but, will let you know which pages need the plugin but are missing it, rather than just missing functionality without warning.
Related
I have a script.js file linked to all of the pages on my site.
On only one page in particular, the "About" page, I don't want a certain function from script.js, called myFunction, to run, because it messes with the formatting on that page.
However, I do still need to use the rest of the JS from script.js on this page, so I don't want to unlink the script.js file and copy every single line of code from script.js except myFunction onto the About page locally, as then I will need to update that page manually every time I add new JS to the script.js file.
Is there a way to tell a specific page to ignore a certain function from script.js? I thought this would be easy to find an answer to but all I could find were results for doing this in WordPress with php.
I would like to use vanilla JS if possible.
Add this code where you call your function on script.js
var pathname = window.location.pathname;
if(pathname != 'about.html'){
myFunction();
}
I have a php file that loads a different form based on a identifier passed in with a GET request.
Everything works.... except my Javascript/jQuery. Is there a way to re-load my javascript to get it to work on the form?
Or will I need to something else entirely ? like a template system?
Currently, when the page is being loaded by the browser it is commenting out my Javascript script tag that loads my functions.js file. I'm assuming this is because it is because the code relies on a form and as the form hadn't been loaded yet, some kind of error forces the script to be commented out.
You can rectify your problem in two ways:-
1. Put you complete javascript/jQuery code at the bottom of the page (very last) inside (<script></script>)
Or
2. Wrap your complete code inside $(document).ready(function(){ ...//your code ....});
Note:-
a. If you are trying to include an external javascript/jQuery file which have the custom code,then also include it at the bottom of the current page.
b. Take care that proper jquery library (if needed) will added before your code
I have a project running on Symfony with angular js and its all working good except for a strange thing.
I added a JavaScript file to execute some JQuery functions i already tested in the browser console and they are all working good with no errors the problem is when I inspect element i can see the file being called in the head and i can also see it in the sources I can even open the link and see the file.
But for some reason the functions in there are not being called executed.
following the images to prove that its loading with no errors.
Edit:
Its not about putting the code in ready function or not
$(document).ready is firing before angular has loaded the content onto the page.
So it might be the possibility of your jQuery plugin calls before your Angular loads the content onto the page.
what you need to do is somehow, call your jQuery plugin once your Angular gets init or you can turns your code into directive.
My script file was also loading but not executing but I had a different issue, basically avoid using href attribute in script tag and instead use src
Little things like this drive me crazy!
Working with a typical Joomla website and all it's complexity.
Start with a functioning website. Edit a particular javascript file of a template to add a simple function:
function socialShare(title, url) {
alert("goop!");
}
I reference it in a link:
<a class="icon-facebook"
onclick="socialShare('blog-entries', '11-blog-article/15-oppressive-tyranny&title=Triumph Over Tyranny')"> </a>
The function is included along with 37 other external scripts in a file at the end of the page, included within the body element like this:
<script src="/bts/templates/vg_progressive/js/articleRev.js"></script>
I inserted the sociaShare function definition as the first thing in the include articleRev.js file. The list of external scripts include core functionality like bootstrap, jquery etc etc.
I can see the function in the included script file with firebug's debugger & the include line in the page source near the bottom. BUT IT DOESN'T GET EXECUTED!! If I include the exact same function within a element anywhere on the page it works just fine. For some reason the instance in the external script file is not within the scope of that page / article, tho I can see it clearly in the page source.
I can also put the function within script tags as the last thing inside the body and it is within scope and works fine. I discovered I can define the function in a different included javascript file that is found in the very same folder and it also works fine.
Like I said, things like this make me pull my hair out! What can cause this behavior? How can I narrow it down?
As per Ed Cotrel, here are 2 files which [may] be helpful, tho I don't think so. Rename articleRev.txt to .js and pageSrc.txt to pageSrc.html. As for your comments Ed, I believe I've stated the issue as clearly as I can.
The desired behavior is to see an alert box when the anchor tag is clicked. Simple. The anchor tag displays a social media icon based on one of the class definitions. The onclick attribute should call the javascript function socialShare and display an alert box containing a text message with the 2 parameters. The alert never shows up. If the socialSharing function is moved to the main.js script file located in the same folder and included the same way in the same place in the page flow it works. Is that clearer?
1) http://thecomingbitsharesrevolution.website/media/articleRev.txt
2) http://thecomingbitsharesrevolution.website/media/pageSrc.txt
In my ASP.NET MVC4 application I got 1 javascript file for my functions across the site.
This works pretty good - however I want to run certain code in certain views.
Usually I would solve this by simply putting a short script tag in the view calling the desired function.
However I load my js files at the bottom of the body tag so this script tag would call a function before it being loaded which would obviously not work.
How can I call individual parts of my js file from different views while keeping my js files at the bottom of the body?
There are a few things going on here.
I would not be putting JavaScript directly in the page. Many reasons for this, and is not the focus of your question, but something I wanted to bring up.
You can have a separate JS file that gets loaded after your main JS file that actually does the call to the functions from "main".
My approach is to tag said views with an id:
<div id="specific-page-name"></div>
Then in my javascript simply do:
if ($('#specific-page-name').length) {
// Run code
}
This way you can still separate your views from js code.
Finally, if I have to use model data in js I can do something like:
<div data-model-data="#Model.Data"></div>
And simply read it as:
$('div').data('model-data');
I'm detailing the answer given by Matt in his comment : in your layout, you can specify that you want some additional HTML content (in your case, that will be your JS). You'll want to add it after your main JS block.
#RenderSection("AddScripts", required: false)
Then in your view, you can add a section and it won't be rendered in the view, but in the corresponding section in the layout (after your main JS block).
#section AddScripts {
<script type="text/javascript">
...
</script>
}