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
Related
I don't know much javascript so I'm pretty much copy-pasting. I'm making a website and there is a navigation sidebar. I have this script to toggle a class the sets display to none.
$(document).ready(function () {
$("#sidebar-toggle").on("click", function () {
$("aside.navigation").toggleClass("no-sidebar");
});
});
I know the code works because it functions perfectly on a select few pages - views that happen to be defined in a specific Flask blueprint. Not on any other page.
I've checked that the structure doesn't change between pages (maybe I made a jinja template mistake) and it doesn't - all referenced elements exist and have the correct ids and classes. The javascript file containing the script above is loaded on every page and viewing it through the browser shows the correct code.
I'm hoping this can be resolved by a misunderstanding in how js files work and/or the syntax above. If anything other info would help, lmk.
Okay the non-functioning pages were throwing a type error that referenced some code for modals (that was also in main.js) above the sidebar code. The problem was solved by moving the sidebar code above the problematic code.
Now I need to figure out why a11y dialogs are throwing an error on some pages and not others...
Edit: Solved that too.
In my case base.js contained the following code:
var cast_crew_modal = document.getElementById('cast-crew-dialog')
var cast_crew_dialog = new A11yDialog(cast_crew_modal)
cast_crew_dialog.on('show', function (cast_crew_modal, cast_crew_trigger) {
console.log(cast_crew_modal)
console.log(cast_crew_trigger)
})
Great except the cast_crew_modal only exists in Flask views defined in the Production blueprint. On all other pages, that first variable gets set as none/null because it can't find #cast-crew-dialog. Hence why the original sidebar code only worked on production pages.
I am new to coding and trying to make a chrome app which basically displays a bunch of fake error messages. I called to the image with a button, but the image is not showing up. Could someone please help and tell me what I am doing wrong?? Here is the code;
I was having some trouble with the putting the code in, so...
http://pastebin.com/iTtmLVE5
There's nothing wrong with ur code, but with its implementation. First open console (F12) and check if js file has been loaded properly. Also You should really consider where to put ur external javascript files. Usually they are placed in html head tag or just before closing body tag .
The difference between both of them is that, if u place js file in header, its loading priority is high, so it loads before DOM (Document Object Model, so just a HTML structure) and when u place it before body closing tags, DOM will load first, so user can see inetrface faster (Since js is loading after browser renders it).
After copy & paste of ur code and making a little cleaning it works. What i've done was deleting all unneccessary HTML code, changing js file name to something more expressive (in my case script.js) and everything worked well.
My site has a problem when I use the following type function located in the header:
<script>
$(document).ready(function() {
$('#showVolunteer').click(function() {
$('.vol_info').slideToggle("fast");
});
});
</script>
I have to include the following line of code in order to get it to do what I want within the site:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
The above function, is used in the link "How to Volunteer..." on the main page and allows for the expanding and collapsing of data. However, when I call the jquery.min.js library as I have, it causes the featured content show to stop rotating pictures every six seconds. When I remove the line:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
the slide show refreshes normally and the "How to Volunteer..." link STOPS working. I cannot get them both working together.
I realize that wordpress includes a copy of jquery.js at the following location \wp-includes\js\jquery\jquery.js which is the non compressed version, but somehow my function above does not recognize what is in this library. It only recognizes jquery.min.js when called in the fashion above.
My question is, what do I need to do to get the expand and collapse data link working on the front page TOGETHER with the featured content rotator changing the picture every few seconds? In other words BOTH working at the same time.
Should I place all my functions (similar to the ones above) in a .js file that is already resident in wordpress?
thanks
This question has been resolved. Apparently, you're not suppose to use the $ symbol in Wordpress .js files, as it is used by other libraries and causes confusion within calls to jQuery. Instead, you have to use "jQuery" in place of the "$" symbol. Once this was done, everything worked as it should.
jQuery() NOT $() for Wordpress.
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>
}
I have a script to check/uncheck all boxes on a form in a grails application that I am trying to call. I included the function (in <g:javascript> tags) in the head section of the page, and even added an alert before declaring the function to make sure the code block was being processed (it worked), but when I hit my check/uncheck all button, firebug tells me that it can't find the symbol; and looking at the source code, the function doesn't seem to be present. Where do I put this to get grails to include this function?
in your web-app/js library, naming it yourScript.js
You include them in your your page by
<g:javascript library="yourScript"/>
Notice the lack of .js in the tag