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>
Related
I have a file (lam.php) that displays a database-driven list of countries in Latin America. I would like to include it in various pages on my website as a convenient reference. But rather than simply include it, I'd like to use AJAX, so the users can decide whether or not they want to view the list.
So I'm learning how to work with AJAX. It sounds like I want to use jQuery + AJAX, using Post instead of Get.
But I immediately got hung up on an error on this line:
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php",data,callback);
I don't see any errors displayed when I preview the page, but the error is highlighted in Dreamweaver. Nothing happens when I click the button, so there's obviously an error somewhere. Can anyone spot the error(s) in my script?
This is the entire script:
<head>
<script>
$(document).ready(function(){
$("button#lam").click(function()
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php",data,callback);
)
}
)
</script>
</head>
<body>
<button id="lam">Latin America<button>
</body>
You need to add a DIV to the HTML for the result to be displayed in. Then the callback function has to fill in the DIV with the response from the AJAX call.
Since your PHP script doesn't take any parameters, you don't need the data argument.
<head>
<script>
$(document).ready(function(){
$("button#lam").click(function()
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php", function(response) {
$("#lam-result").html(response);
});
});
});
</script>
</head>
<body>
<button id="lam">Latin America<button>
<div id="lam-result"></div>
</body>
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 have a problem involving Jquery UI progress bar and PHP. This is the scenario,
1) user selects some fields in a html form which is then posted using php
2) Data is retrived from the post, this data can be large enough for the page to take a few minutes to load (hence the reason why im implementing a progress bar)
3) while the page loads the Jquery UI progress bar incrases progress.
So far I have installed the jquery progress bar, but it only appears while the page has loaded, not while it is in the progress of loading.
Any help?
This is a sample of my source code
<?php
echo "<div id='progress-bar'></div>";
if (isset($_POST['submit'])) {
if(!empty($_POST['startdate']) && !empty($_POST['enddate'])) {
$accountdetails = GetAccountDetails("SELECT Account_Name, Account_Project_X, Account_Number FROM Accounts WHERE Account_Name = '".$_POST['accountnames']."'");
echo "<div id='data-table'>";
?>
The data table contains the data which will be loaded,
Then the data table div ends and then the file references to css and jquery files are added along with the javascript code to the progress bar.
<link type="text/css" href="css/smoothness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />
<link type="text/css" href="css/style.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$('#startdate').datepicker({ dateFormat: "yy-mm-dd" });
$('#enddate').datepicker({ dateFormat: "yy-mm-dd" });
</script>
<script type="text/javascript">
$(function() {
$( "#progress-bar").progressbar();
});
</script>
Any help would be greatly appreciated.
By my understanding, when the form is posted; the page reloads (the usual PHP way).
To make use of the progressbar, a few things need to be taken into consideration:
The content to be POSTed needs to be POSTed using jQuery (i.e. using AJAX)
You need to have a method to identify the amount of content loaded as well as the amount remaining in order to know by what quantity to update the progressbar
If those are done, then you should be able to get it working
I am using the framework codeigniter and trying to use jquery for the purpose of displaying and allowing the user to chose a time period in which he would like to preform his search. I have the date and the text field displayed but when I click on the text field I don't get any calendar to chose a date from.
This is my view:
<html>
<head>
<script type="text/javascript" src="<?php echo $jquery?>"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).ui-datepicker();
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->
www.msn.ca
<?php echo form_open('search/submit'); ?>
</body>
</html>
It's been taken from the sample code: http://jqueryui.com/demos/datepicker/
FYI I am using jQuery UI 1.8.16
Not sure what's wrong here.
If anyone thinks the controller is relevant then here it is:
<?php
class calendarController extends CI_Controller{
public function index()
{
$this->load->helper('url');
$data['jquery'] = base_url("jquery.js");
$this->load->view("jqueryView", $data);
}
}
?>
I do not see links to jQuery JS and CSS files on you page. Try something like this:
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
You can place them anywhere on your page. Better at the end so that your pages shows faster. Use datepicker() inside jQuery load function, like in your code to make sure that nothing is broken
You're building your url wrong.
Should be:
$data['jquery'] = base_url().'jquery.js';
which gives in your view: http://www.yoursite.com/jquery.js.
I have some doubt on the actual true position of that script. Change it accordingly to your folder structure, just keep in mind that base_url() returns your url like this, with the trailing slash:
http://www.yoursite.com/
Also, you you're not loading jQuery UI, so add that too (same way as above)
Another thing, your input lacks the name attribute, you need it in case you want it to be fetched by php. AND, it's outside the form, so it won't work. This is just a note, maybe you don't want to use it that way, but just in case...
Shouldn't you place your datepicker initialization inside the jquery ready event handler ?
Like so:
$(document).ready(function(){
$( "#datepicker" ).datepicker();
});
Been looking around the web, but not found anything so far... can anyone help?
I have created a simple html page that contains a list-box of values that when selected calls a seperate php script to run database query and print out a structure html page. This has been implemented using ajax calls and it results in the page being reloaded when the user changes the value in the list-box.
Now, I would like to move away from the generating of the table using html tags and print statemetns to something more slick and have discovered google visualisation api. I have look ready through many pages of the site and used the code playground, but was unable to find information to help me understand how I might use the visualization api to generate the table and pass this back to the main page in the div tag, using the same php script.
Does anyone have any pointers, or experience of doing this in the past?
Thanks.
You could achieve this using jQuery AJAX and some arrays generated by your php. This is a pretty basic but straightforward approach - you may want to look around for php client libraries that generate gviz code for you in your php if this proves to be insufficient.
Here's a working example:
HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.6.1");
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization(dataFromAjax) {
var data = google.visualization.arrayToDataTable(dataFromAjax);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data);
}
function makeAjaxCall() {
$.ajax({url:'test.php',
data: {},
success: function(responseData) {
// eval just for testing - make safer
var arrayForGviz = eval("(" + responseData + ")");
drawVisualization(arrayForGviz);
}
});
}
</script>
</head>
<body>
<input type="button" onclick="makeAjaxCall();return false;" value="Click to get data"></input>
<div id="table"></div>
</body>
</html>
PHP File
<?php
echo "[['Country','City','Value'],
['Ireland','Dublin','10'],
['France','Paris','15']]"
?>
Obviously my php file is static, but each time the user interacts with the page and triggers makeAjaxCall() you could send different parameters, and return different array responses.