Stupid question, but does anyone know how to load google's jquery from an external script so it doesnt clunk up my header? In other words, I want to take the code below (probably starting at the google.load stuff and save it inside another file to include in my header. I want to keep my view source pretty :)
<script src="http://www.google.com/jsapi?key=MySeCretKeyHere" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function(){ $(document).ready(function(){
//onload stuff goes here
});});
</script>
Just as you say:
load.js:
google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function(){ $(document).ready(function(){
//onload stuff goes here
});});
html:
<script src="http://www.google.com/jsapi?key=MySeCretKeyHere" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>
Related
I have a PHP page in which am hiding a div using a javascript method. This method is called on a hyperlink click. The issue is its giving Uncaught Reference error. Not sure what is the cause. I tried even to have a external JS file and define the method in that, but still not working.
I'll give you a hint:
make sure you have defined your DIV tag before the action script
like:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="hideDiv">Hide on click</div>
<input type="button" value="hide" onClick="javascript:HideIt()"/>
<script type="text/javascript" language="javascript">
function HideIt(){
//what ever it is:Hide codes goes here
$('#hideDiv').hide() // we used it after the defined it :)
}
</script>
</body>
</html>
Uncaught Reference error in javascript usually means that the object or accessor isn't defined at the time of calling the method.
I've seen it when using jQuery when jQuery is included at the bottom of the html and the javascript is being triggered before it.
So
$('divid').text = "blah";
before the
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Hence the $ method doesn't exist.
The solution would be to put the method call on body load.
Here is the general code to hide any div onClick.
<html>
<head>
//Here to add script tag, which i have writen below
</head>
<body>
<div id="testDiv">This is to be hide on click</div>
<br/>
<br/>
Click to hide!
<br/>
<br/>
Click to show!
</body>
</html>
NOTE: You should write apostrophes carefully. Bcox ' and " have different impact
Here is the script tag which u have to place in head tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I am using an external javascript file to call a function and it will not. i get function not defined in firebug too.
the name of the external js file is getpic.js
in the html, i put this in the header:
<script src="getpic.js" type="text/javascript">
</script>
php:
echo "<button id='sldkfj' onclick='hg();'>sdlkfj</button>";
js:
function hg()
{
alert("hello")
}
the file system is basically in one folder for wamp
this is all of getpic.js
function hg()
{
alert("hello")
}
for the php part
<html>
<head>
<script src="getpic.js" type="text/javascript">
</script>
</head>
<body>
<?php
echo "<button id='sldkfj' onclick='hg();'>sdlkfj</button>";
?>
EDIT-----
i also keep getting this in firebug:
Reload the page to get source for: http://localhost/iframe/getpic.js
Thanks
Edit:
add the code segment to the html page as a
<script type="text/javascript">
function hg()
{
alert("hello");
}
</script>
if still it doesnt work there should be something wrong with the browser.
(disabled java script) try a different browser
if it works,
obviously there's an error in linking the file.
on firebug go to the script panel and see whether it is loaded or not. (you can also use net panel as well)
try linking
<script src="/getpic.js" type="text/javascript">
if you are at the localhost(www) directory or the absolute path
<script src="/mytest/getpic.js" type="text/javascript">
add ; at the end of the alert() command
function hg()
{
alert("hello");
}
Try taking the script tag out of the head element and put it in the body. I've had this problem before and that's what fixed it for me.
I am using Ajax link to update div in my view page. Example : I have 2 ctp file say view1.ctp and
view2.ctp, I want to update the div in the view1.ctp using the ajax call in view2.ctp. Can anybody
give me the hint to resolve this issue
Thanks in advance
Pushpa
you can use jQuery for a better approach.
eg:
<script type="text/javascript">
$.get('view2.ctp', function(data) {
$('#divview1').html(data);
});
</script>
and in view1.ctp
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function loadData(){
$.get('view2.ctp', function(data) {
$('#divview1').html(data);
});
}
</script>
</head>
<body>
<div id="divview1"></div> Load data from view2.ctp
</body>
</html>
if you don't want to use jQuery you can use XMLHttpRequest, but jQuery is way more easier to use.
I want to do some autosuggest for my text field, using this plugin AutoSuggest jQuery Plugin
I have an array, already json_encoded, and the files on the server, js, css, but Im not getting yet how the example works, here my code,
<html>
<head>
<title>test-data</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="inc/css/admin_style.css" rel="stylesheet" type="text/css">
<link href="inc/css/autoSuggest.css" rel="stylesheet" type="text/css">
<script language="javascript" src="inc/js/functions.js"></script>
<script language="javascript" src="inc/js/jquery-1.5.1.js"></script>
<script language="javascript" src="inc/js/jquery.autoSuggest.js"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<center><br><font class="title">test</font></center>
<form action="dataAll.php" method="post">
Name: <input type="text" name="fname" />
<input type="submit" />
</form>
<p> </p>
<p>JSON</p>
<p> </p>
<?php
$encoded = json_encode ($familyNames);
echo $encoded;
?>
</body>
</html>
so Im supposed to put this code,
$(function(){
$("input[type=text]").autoSuggest(data);
});
but the question is where??( as if I put it inside the php tags, it gives me an error
where should I put the name of my json formatted array? "$encoded" for the function to recognize that is the source of data?
thanks a lot!
You've got all the pieces, but your order/methodology is a bit off. Try creating a second file, named something like ajax.php, and place all of your php code in there. To ensure you are outputting good JSON, add the line header('Content-Type: text/json; charset=ISO-8859-1'); at the very beginning of the ajax.php file (you must set the header before any output is sent or you'll get an error). Now you've got to request your suggestion data:
$(document).ready(function() { // Runs when your page is loaded in the user's browser
$.getJSON('ajax.php', function(data) { // Runs ajax.php, then executes an anonymous function to handle the response
$('input[name="fname"]').autoSuggest(data); // Set your input field to use automatic suggestions with the returned data
}); // end getJSON
}); // end ready
This code simply executes an asynchronous HTTP request for ajax.php, and hands off the returned JSON data to the auto-suggest jQuery plugin. Place it inside a <script type="text/javascript"></script> tag. It will run once when the page loads due to the use of $(document).ready(...). I added the small optimization (input[name="fname"]) so jQuery doesn't attempt to attach the auto suggestion functionality to every text input you have on your page. If thats what you wanted to do (unlikely), just change it back to input[type=text].
You really do not need a separate php file to get this to work. There is nothing stopping you from doing it all in one file, but you'll soon realize how cluttered and unmanageable that can get. For me, its easiest to think of my "ajaxy" php code as a single, modular piece of my web application.
Be sure to reference these pages for detailed information:
http://api.jquery.com/
http://api.jquery.com/ready/
http://api.jquery.com/jQuery.getJSON/
You put it inside a tag in the html.
<script type="text/javascript">
$(function(){
$("input[type=text]").autoSuggest(data);
});
</script>
I have multiple jquery files in my project. I am using facebox using jquery1.4.2 but i need prototype and scriptacolous scripts too. I have used jQuery.noconflict(); in my code but its not working.
this is the url http://mlep.com/~avalon/wordpress/ideas-and-insights/case-studies/.
it should be in this manner of arrangement,
load other libraries and other non-jQuery scripts
load jQuery library.
call jQuery.noConflict.
load jQuery plugins
other jQuery stuff or codes..
codes like this,
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/jquery14.js"></script>
<script type="text/javascript">
var ang = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/facebox.js"></script>
<script type="text/javascript">
// other jQuery Codes here...
</script>