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();
});
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 problem with colorbox:
I have a page that would receive part of its content by AJAX. Now within that ajax retrieved content there are Colorbox links as well. Now these links don´t work, or rather said the first click would not work (but would lead to the link within the browser except the link within a colorbox), now after having the first click (which would not work as described before), hitting the back button of the browser all further links would display - as wanted - in a colorbox.
I tried several browsers with all having the same result. So I thought - especially since after having gone wrong once then working correctly - this could probably be a problem of having the colorbox library not in the cache.
So I tried to add this line of code (except for being on the main page anyway) within the ajax retrieved content
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
}
</script>
which leads to the error explained above not happening anymore but rather doubling and trippling the colorbox layers so to say, which means, after having hit 2 different colorbox links one would need 2 clicks to close the colorbox, after having hit 3 different colorboxes one would need 3 clicks to close those third colorbox and so on...
As I was asked to do so, here is the relevant code:
Now that is the main page including that:
<script type="text/javascript">var currentTime = '<? print date("F d, Y H:i:s", time())?>';</script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
});
</script>
as well as in the body then that:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
which would create work out good. But if I have the second part, so that one:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
being placed on the same page by AJAX it would not work any more (while having that AJAX is crucial to me).
It could be that you're using a class to select, $(".cbDetails").colorbox(); would apply to all elements with that class and open up a lot of windows as you're describing. Try to target your clicks more specifically with id's or $(this).
$(document).ready(function(){
$(".cbDetails").on("click", function()
{$(this).colorbox();});
});
I have a form that is dynamically created, so I can't edit the layout of the form itself. However, I want to add a title above one of the text input fields in the form. I have given that field a unique css ID and am using the following script to try and add my heading before it:
<script type="text/javascript">
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
</script>
For some reason this won't work though, can anyone think why that might be. Here is the page in question
http://www.theres-a-thought.com/client-yourdream/?page=property_submit
Add document ready to your code -
<script type="text/javascript">
$(document).ready(function() {
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>
Looking at your page, I don't see where #price is defined. Maybe it is added later via JS and i missed it..
You are using jquery in no-conflict mode, and you need to wrap your code in document ready..
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>
Running this; however, has no affect on the page(from what i can see).
The code below works because the ID exists. It isn't what you are trying to accomplish, but it should get you started.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#property_name');
});
</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 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>