I have searched all over. They are saying the correct syntax to load jquery in normal mode is JHtml::_('jquery.framework', false);
I have tried and failed. I need to load jQuery so it works on all pages, so where should i put this inside the template index.php file? in head? above the head? does it need to be wrapped inside or not? I just need this to be spoon-fed to me because most forums assume people would already know where to put it...thanks.
You have 2 options. You can either call it normally which is exactly the same as the code you provided above, or you can all it in noConflict mode which is simply like this:
JHtml::_('jquery.framework');
This code should be place in the template's index.php file and can be placed anywhere as it will automatically be appended to the <head> tags of your template. As this is PHP code, it of course needs to go inside <?php ?> tags.
Related
I'm pretty sure this is a dumb issue, but I searched and could not find a similar/equal scenario.
So, I have a main PHP page in which I include several Javascript files in the head section of the HTML. Then at some point I grab content (HTML + Javascript) from an outside source via file_get_contents and output it to the main page.
This new output will pick up the CSS styles from the main page normally, but any Javascript code that relies on the ones loaded at the main will not work. Even if I put the Javascript needed inside a document.ready in the main page, it will still not work.
Just to exemplify the code:
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="somejslib.js"></script>
</head>
<body>
Some HTML here generated by PHP
<?php
$content = file_get_contents('http://whatever/page');
echo $content;
?>
</body>
In the grabbed content I will have something like:
<div>
<form>
<input type="text" id="bla">
</form>
</div>
<script>$('#bla').datepicker({ somecodehere });</script>
The datepicker was included in the libs loaded in the main page, but will not work, no matter where I put this code.
Any hints?
P.S: the only way it DOES work is if I include - again - all the Javascript libs inside the new content, which of course is not a solution.
make sure you attach the listeners after the external content is loaded or use the on() event handler
http://api.jquery.com/on/
P.S. I now see your code is actually missing the document.ready and thus not waiting for the document to be loaded before executing. I'm not sure which of these applies to your actual code as you only posted an example. If you pull the content in via an ajax for example apply the first solution otherwise just wrap things up in a document ready
Solved.
Apparently it was my mistake all along. I was loading Jquery multiple times (different versions, also).
It seems that not all versions of jQuery can take care of this situation.
I'm using ExtJs 4.2.2 and included all necessary js and css files, and my codes work just fine, ONLY IF I write my code into script tags within my html file. When I try to put these code into another file with .js extension and include it between head tags properly, it returns nothing. I'm sure I've included my js file properly because when I fill it with standard js codes, I get results. But with ExtJS syntax, the same code which return results within script tags, returns nothing. How? Do I miss something?
The following two are equivalent. If one works, the others work, too, regardless of what js code you use:
(Ex 1.)
<html><head>
<script>//your js code here</script>
</head><body>
</body></html>
and
(Ex 2.)
<html><head>
<script src="jscode.js"></script>
</head><body>
</body></html>
where jscode.js contains
// your js code here
Furthermore, the following two are equivalent:
(Ex 3.)
<html><head>
</head><body>
<script>//your js code here</script>
</body></html>
and
(Ex 4.)
<html><head>
</head><body>
<script src="jscode.js"></script>
</body></html>
NOTHING will change in behaviour.
I think (but you didnt post ANY code at all, so it's jsut guessing) that you had Example 3 working, but changed to Example 2. But only 3 and 4 are equivalent! And now you call that ExtJS fault!
You are executing code in an onLoad event or a Load event, perhaps like:
$(window).load(function() {
$('p').css('');
})
Remove this section and use only this in the javascript file and include it in a <Head> section:
$('p').css('');
When you are coding in html, then it execute steps one by one. But when we use a separate file then it executes it slower than HTML code.
I think I can use those technique mentioned on the top.
I am sure it will work.
I presume that inline JavaScript bound to orerror, onclick, ... run.
But would a <script type="text/javascript">...</script> element run javascript as well when wrapped with $(...) ?
If it does run is it sand-boxed?
Sorry for the misunderstanding:
Wanted to make sure that JavaScript loaded within the $ method would NOT run. I'm aware of other methods on how to load JavaScript scripts within the page and I generally use require.
Just wanted to figure out how much of a security risk wrapping HTML (containing script tags) within $ could be.
If someone can give me some insight/directions on how JavaScript is interpreted within the jQuery method that would give me my answer thanks.
Thanks :)
You always need to write
<script type="text/javascript"></script>
or
if you use the html5 Doctype
<script></script>
when you want to execute Javascript. in your html files.
If you want to execute javascript without writing these tags then you need to add a extern .js file and link to that file like this:
<script src="pathtofile/javascript.js"></script>
Friend please excuse me if my understanding of the question was wrong.
if you wrap some code in $() it will consider it as either the javascript or jquery code. But as we know script is a tag not a javascript code, so finally it will be throwing an error.
In order to execute any code which is in script tag, please place the code in a file and use getScript() function of jquery by enclosing in $(). Finally your requirement might be met :).
$(function() {
$.getScript(pathoffile);
});
I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.
I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
I tried using this but it did not work.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
Thanks
Q1 : I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
-Yes you can load javascript any where you want, if writing inline code then make sure you add script tag around your code.
-also you can request files like in body
Q2: Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
-- no problem in that, thats even better practice.
Q3 Requesting external file
to request external files you write below written fashion
<script src="http://file_name.js" type="text/javascript"></script>
It's not only possible (ref), it's frequently a good idea.
Putting your scripts as late in the page as possible, which frequently means just before the closing </body> tag, means the browser can parse and display your content before stopping to go download your JavaScript file(s) (if external) and fire up the JavaScript interpreter to run the script (inline or external).
Putting scripts "at the bottom" is a fairly standard recommendation for speeding up the apparent load time of your page.
Yes it is possible. Try and see.
For debugging, hardcode the jquery full path.
It is sometime recommended to load it at the end of the of the body, to make the main content of the page load faster.
Is it possible to load it in the section of the HTML.
Yes.
From the spec:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
SCRIPT is among the elements that may be a child of the BODY elements. Numerous other elements may also have SCRIPT children.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
When I run echo base_url() I get my the hostname of my server. This would result in a URL such as example.comjs/query-1.5.1.min.js. You probably should drop that PHP snippet entirely and just use: src="/js/jquery-1.5.1.min.js" which would resolve to http://example.com/s/query-1.5.1.min.js.
Yahoo engineers recommendation for higher performance is to include your scripts at the end of your HTML, just before </body> tag. Therefore, it's even better.
To see where the problem is, you gotta first make sure that your js file is loading. User Firebug and go to scripts tab. Do you see your script? If not, then something is wrong with your path.
it should work...
Did you try to view the generated source and see if the PHP code indeed generated the right path?
beside that, it is recommended to load jQuery from a CDN such as google's :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js