My autocomplete ajax code for a form is working in localhost but not on the server:
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$(function() {
alert("My First JavaScript1");
$(".auto").autocomplete({
alert("My First JavaScript2");
source: "search.php",
minLength: 2
//width: 400
});
});
</script>
I added to the comment the datepicker script so maybe there is a download&load script issue between scripts. Datepicker works fine by the way and alert functions I called are for understanding if the input in the form calls the function but there is no alert showing up so I take it does not get into there. How can I fix it?
Related
I have my php page loaded with hash, and the page is with jquery plugin dataTable,
plugin is loaded but not working, if i reload page, then it is working. ..but not working with jquery ajax loaded with hash.
PHP page contain following script loaded:
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
</script>
ok do some thing like this
place this code in your ajax loaded page ....
<script type="text/javascript">
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
</script>
this is because data table not working in live loaded pages. there are other many ways to do this but this is simple and easy
100% works
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.
What I want to do is to be able to load data from the database which will show up as an auto-complete text below the textbox.
I'm using the ajax function in jquery to load data from the database. My problem now is how to put that data in the auto-suggest box.
<html>
<head>
<script src="js/jq.js"></script>
<link rel="stylesheet" href="css/otocomplete.css" type="text/css" />
<link rel="stylesheet" href="css/otocomplete.css" type="text/css" />
<script type="text/javascript" src="js/bigiframe.js"></script>
<script type="text/javascript" src="js/otocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example').keyup(function(){
var inpval = $('#example').val();
$.ajax({
type: 'POST',
data: ({p : inpval}),
url: 'query.php',
success: function(data) {
$("#yoh").autocomplete(data);
}
});
});
});
</script>
</head>
<body>
text: <input id="example" />
<div id="yoh"></div>
</body>
</html>
Are otocomplete.js/otocomplete.css the autocomplete plugin & its stylesheet? I'll assume that they are.
Is there a reason you are putting the autocomplete inside of an ajax method? It works without it.
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css">
<script src="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#example").autocomplete("query.php", {
width: 260,
selectFirst: false
});
});
</script>
Your php file should output one result per line, like so:
Gyr Falcon
Lanner Falcon
Red Falcon
...
This is all lifted straight from http://view.jquery.com/trunk/plugins/autocomplete/demo/ but I tested it, so I know it will work.
EDIT: I just read that the plugin's author no longer supports it, and recommends using jQuery UI's autocomplete. Personally, I'm not a big fan of jQuery UI, I just want the author's intent to be represented here.
EDIT 2: I didn't realize that you're trying to do some kind of custom UI for the auto suggest. Feel free to ignore this.
You have to add an event handler to your #example input.
For example you can add a .keyup() event handler and run your code after the first xx characters have been entered.
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>
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>