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
Related
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.
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>
}
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
Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'