Develop Reference

Codeigniter Date picker is not working

I need to add date to the form input field, but in codeigniter it is not working,here is my code in view, I don't know why it is not working, I have link web links also. it is only not working in codeigniter.this page is loaded using ajax.I think it would be the reason for the problem,how can I fix it????
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div id="content">
<h2>Payment Details.</h2>
<?php
$this->load->helper('form');
$attributes = array('method'=>'post','name'=>'payments','id'=>'payments');
echo form_open_multipart('',$attributes);?>
<?php //echo form_open_multipart('payments/insert_payment');?>
<label>Payee Name: </label> <?php echo form_input('payee_name');?><br/><br/>
<label>Address: </label> <?php echo form_input('address');?><br/><br/>
<label>Account No: </label> <?php echo form_input('account_no');?><br/><br/>
<label>Bank Name: </label> <?php echo form_input('bank_name');?><br/><br/>
<label>Branch: </label> <?php echo form_input('branch');?><br/><br/>
<label>Amount: </label> <?php echo form_input('amount');?><br/><br/>
<label>Pick a Check Date: </label> <?php
$data = array(
'name'=> 'check_date',
'id' => 'datepicker',
'placeholder' => 'date',
);
echo form_input($data);?><br/><br/>
<label>Check Number: </label> <?php echo form_input('check_number');?><br/><br/>
<input type="submit" name="submit" value="Next"/>
<?php echo form_close(); ?>

You are trying to add two jquery files with different versions
thats why the datepicker is confused which jquery version can be used
please add jQuery.noConflict() before the document.ready function
Hope this helps :)
<script>
jQuery.noConflict();
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

Debug as following
1> Check console.
2> Use inspect element for actual Id ( lots of frameworks changed it internally).
3> Try to put
$( "#datepicker" ).datepicker(); at end of file

Datepicker is not working because #datepicker didn't exist yet. You could make this work by moving ('#datepicker').datepicker() to after the point in the code where it(#datepicker) is created.

You are adding date picker to the id
$( "#datepicker" ).datepicker();
But where is this Id. You should add datepiker to the view where the id is available and add the respective javascript file also

I saw alot of problems
save the style sheet inside css folder(optional) your css should inside your ci folder
your href in css is not the right code, if your linking css do the code below
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" />`
make sure your base_url is correct. To see if this correct try to echo base_url();
hope this help you

View:
$this->load->helper(array('form'));
Controller:
function datepicker(){
$this->load->view('datepicker');
}
jQuery:
$(function() {
$( "#datepicker" ).datepicker();
});

Add Database variable to search function(JavaScript)

I am working on a search project where results should be based on user interest.
I have a database column "favmusic" & "favsport" .
I have declared them as variables in PHP.
Now in the following simple Search code(using HTML & Javascript) ,
I just want to know is it possible to add that database variable to perform search based on taking values from the database variable
Here is my Code :
<input type="text" name="search" id="search" style="width:400px;"/>
<input type="button" name="searchBtn" id="searchBtn" value="Search" onclick="searchLink()"/>
<script language="javascript" type="text/javascript">
function searchLink()
{
var link1 = document.getElementById("search").value;
window.location.href = 'https://www.google.co.in/#q='+$favsport '+$favmusic;
}
</script>
If you see the JavaScript code you can understand that i have added the columns for performing search in addition to database variable.
How can i fix this ?

Here is all code
suppose you have php array
<?php $fieldArray=array('fruits','gold','pen');?>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = <?php echo jsonencode($fieldArray)?>
$( "#search" ).autocomplete({
source: availableTags
});
});
</script>
</head>
Here is input type
<input type="text" name="search" id="search" style="width:400px;"/>

You can use jquery auto complete Jquery Autocomplete
put this code
$( "#search" ).autocomplete({
source: availableTags
});
Just fetch your fields and create one php array like $favsport_favmusic=array().
Then create javascript array like in above example(open link and click on view source)
` var availableTags=<?php echo jsonencode($favsport_favmusic);?>;` .
Hope this will work for you.

As I understand you, you want to get a value from the database and add that to the search query, correct?
You can most definetly do this - try looking up PHP Database connection( https://www.google.dk/search?q=php+database+connection&oq=PHP+Database )
Let me know if you need any further help :-)
UPDATE: To have the variables output to the browser in JS, you would do something like
So the final JS block looks like:
<script language="javascript" type="text/javascript">
function searchLink()
{
var link1 = document.getElementById("search").value;
window.location.href = 'https://www.google.co.in/#q= <?php echo $favsport."+".$favmusic ?>';
}
</script>

JavaScript is just like HTML when it comes to PHP, so you have to echo your PHP results in the JavaScript code.
window.location.href = "https://www.google.co.in/#q=<?php echo urlencode($favmusic.' '.$favsport); ?>"

#paicubes ... i had edited this code ..can you please tell me it is correct or not
<?php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SearchProject | Home Page<?php echo $websiteName; ?> </title>
<?php require_once("db-con.php"); ?>
</head>
<body>
<input type="text" name="search" id="search" style="width:400px;"/>
<input type="button" name="searchBtn" id="searchBtn" value="Search" onclick="searchLink()"/>
$( "#search" ).autocomplete({ source: availableTags });
$favsport_favmusic=array()
<script language="javascript" type="text/javascript">
function searchLink()
{
var link1 = document.getElementById("search").value;
var availableTags=<?php echo jsonencode($favsport_favmusic);?>;
}
</script>
</body>
?>

PHP - autocomplete with php and javascript

I am working on an autocomplete script where i first read files from a local directory using php as shown below:
<?php
$file = glob('pages/*');
//var_dump($file);
foreach($file as $value)
{
$output = substr($value, 6, strlen($value) - 6);
//echo($output)."<br>";
}
?>
the above script displays all the files in the 'pages' folder i.e pageone.html,pagetwo.html....
i then use a javascript file to dispaly a text field that when entered for example 'page', should show aome autocomplete options say 'pageone.html' or 'pagetwo.html' e.t.c
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = ["
<?php echo $output; ?>"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
i combine the above php code with this js to a single php file
as shown, i try embedding the '$output' into the js 'availableTags' variable but when i type something on the text field, nothing happens..i'm sure it has to do with the php code embedded in the js so any help would be appreciated

Your $output contains only a single value (last file in your list). You can create an array of files like:
$res = array();
foreach($file as $value)
{
$res[] = substr($value, 6, strlen($value) - 6);
}
and pass it to javascript as: a javascript array (with json_encode function)
<script>
$(function() {
var availableTags = <?=json_encode($res)?>
...

You can use autocomplete.js. It's more lite and easy to use that jQuery UI.

how to pass php array to jquery using ajax [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
help me to retrive the php array using ajax from one page to another
when ever user start input in that text field,at that time only it has to retrive the data from page2 using ajax
<!doctype html> //page1
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var movies = <?php echo json_encode($varma); ?>; // here i want to pass that php array using ajax
alert(JSON.stringify(movies));
$( "#tags" ).autocomplete({
source: movies
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"> // input field
</div>
</body>
</html>
<?php //page 2
$varma=array("ActionScript","AppleScript","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"); //php array
?>

The source attribute can have an URL as value. The URL must render json formated for the plugin.
See http://api.jqueryui.com/autocomplete/#option-source
$( "#tags" ).autocomplete({
source: '/myMovies.php'
});
/myMovies.php
<?php echo json_encode($varma); ?>;

Here is a more generic method to ajax in php.
Construct the php array
$arReturn = array( 'name' => 'AliasM2K' );
header( 'Content-Type: application/json' );
print json_encode( $arReturn );
Perform ajax
$.ajax({
url: 'ajaxPhp.php',
dataType: 'json',
success: function( oData ) {
alert( oData.name );
}
});

<?php
/*
I read your problem and your code also and the suggestion from my side is :
Some how you don't required any second page and doesn't required ajax for all this.
You can autocomplete your textbox with PHP array's values using below successive code..
Do yourself and enjoy.
*/
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<?php
$title_name = array();
$fetch=array("ActionScript","AppleScript","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"); //php array
foreach ($fetch as $data)
{
array_push($title_name,$data); } ?>
<script>
$(function(){
var availableTags =<?php echo json_encode($title_name)?>;
//PUT TEXTBOX ID here
$( "#tags" ).autocomplete({ source: availableTags });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"> // input field
</div>
</body>
</html>

Getting value of textbox onchange in javascript

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<input type="text" value="" id="rateToPost"/>
<script type="text/javascript">
var my = document.getElementById("rateToPost").onchange();
alert(my);
</script>
<div style="width:75px;height:48px;">
<div style="width: 5px;margin-left: 10px;">1</div>
<div style="width: 5px;margin-left: 38px;margin-top: -10px;">2</div>
<div style="width: 5px;margin-left: 70px;margin-top: -13px;">3</div>
<div style="width: 5px;margin-left: 98px;margin-top: -12px;">4</div>
<div style="width: 5px;margin-left: 124px;margin-top: -12px;">5</div>
</div>
<script>
$(document).ready(function() {
$("#slider").slider({
range: "min",
value: 2,
min: 1,
max: 5,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#ratingResult" ).text( ui.value );
},
//this updates the value of your hidden field when user stops dragging
change: function(event, ui) {
$('#rateToPost').attr('value', ui.value);
}});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
In the above script I used a slider for rating. But what is the problem here is I have to fetch the text box value onchange and highlight the corresponding rating number background. But I cant fetch the value. Anyone can help to solve thisproblem. Thanks in advance

Try this using jQuery:
$('#rateToPost').on("change", function () {
alert($(this).val());
});

Since $('#rateToPost') is a form element: Use the val() method.

assign value: $('#rateToPost').val(ui.value);
read value: var res = $('#rateToPost').val();

$('#rateToPost').keyup(function(){
$('#slider').slider({value: this.value});
});
Demo http://jsbin.com/azosab/2/edit