Codeigniter Date picker is not working - javascript

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();
});

Related

Include a PHP variable in load script

My apologize in advance for my (maybe) stupid question but my knowledge of Javascript/JQuery is almost 0
I have in index.html the following script:
index.html
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#MyDIV")
.load("buttons.php")
});
</script>
<div id="MyDIV"></div>
As you can see, the idea is load buttons.php in a div tag in index.html - That works fine -
buttons.php
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<script>
$('#botton5').click(function(event){
$("#bottons").load('somepage.php?answer=5'); //here!
});
</script>
Thats also works fine and I receive the information from somepage.php in MyDIV in index.html
but does not work when I include a php in the URL in the line
$("#bottons").load('somepage.php?answer=5&title=<?php echo $title;?>&date=<?php echo $date;?>'); //here!
Including a PHP in load, the div does not load in index.html, can you please support me on how to add a php in the URL in load?
Thanks in advance for your support
#Luis Gerardo Runge In JavaScript you can't use PHP but logically you can take your value in hidden field and use in javascript. i have add some sample code my be it's help you
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<div id="bottons">
</div>
<?php
$title = 'your title';
$date = 'yourdate';
?>
<input type="hidden" id="title" name="title" value="<?php echo urlencode($title); ?>">
<input type="hidden" id="date" name="date" value="<?php echo urlencode($date); ?>">
<script>
$('#botton5').click(function(event){
alert('call');
$("#bottons").load('json.php?answer=5&title='+$('#title').val()+'&date='+$('#date').val()+''); //here!
});
</script>
FYI: You need to use urlencode and urldecode for pass parameter through the URL

JQuery form validation does not work for me

I have tested this code in http://jsfiddle.net/gLpHY/92/, in there it runs fine but when I run it in my computer it does not work. (I have tested two versions of this code once using just html and jquery and the next time I use them with php, both of them did not work for me.)
<html>
<head>
<link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
<link rel="stylesheet" href="<?php echo base_url()?>css/tableCss.css">
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery-1.12.0.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/projs.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery.validate.min.js"></script>
<title>Questions</title>
</head>
<body>
<div class="frm"><?php $a=array("id"=>"myForm","name"=>"myForm");
echo form_open('site/search',$a); ?>
<div>
<?php echo form_label('Question:','question'); ?>
<?php echo form_input('question', set_value('question', #$_GET['question']), 'id="question"', 'name="question"'); ?>
</div>
<div>
<?php echo form_label('Category:','category'); ?>
<?php echo form_dropdown('category', $category_options, set_value('category', #$_GET['category']), 'id="category"', 'name="category"'); ?>
</div>
<div>
<?php echo form_label('Score:','score'); ?>
<?php echo form_dropdown('score_comparison', array('gt' => '>', 'gte' =>'>=' , 'eq' => '=', 'lt' => '<', 'lte' => '<='), set_value('score_comparison', #$_GET['score_comparison']), 'id="score_comparison"', 'name="score_comparison"'); ?>
<?php echo form_input('score', set_value('score', #$_GET['score']), 'id="score"', 'name="score"'; ?>
</div>
<div>
<?php echo form_submit('action','');?>
</div>
<?php echo form_close();?>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myForm").validate({
rules: {
question: {
required: true
}
},
messages: {
question:{
required: "Please enter some text"
}
}
});
});
</script>
</body>
</html>
First off all, replace you <?php echo base_url()?> with just /. You can use relative path for resources from your site. Path should be like this: scr="/js/jquery-1.12.0.js" for all you scripts.
For second replace your string $().ready(function () { with $(function () {
Hope this helps.
Try typing in the full URL instead of using <?php echo base_url()?> as I have seen that cause problems with printing the URL twice and then the page obviously not being able to find it. Also, the way you have written .ready() is not recommended. You might want to consider adding document inside the parenthesis like this:
$(document).ready(function(){});
.ready() source

JQuery not running from PHP echo

I am trying to execute some simple JQuery commands in an echo statement from PHP after the user submits a Log In form.
The user is able to Log In with the correct credentials, however if they enter incorrect ones it should show the invalid credentials paragraph.
Here is the code:
<?php
//PHP code for login in, working, not needed to show
echo 'Testing
<script>
$( ".wrong" ).show( "slow" );
</script>';
?>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body class="login">
<form action="" method="post" class="login-form">
<p class="wrong" style="display: none;">Invalid Credentials</p>
<a class="link" href="#">Forgot your password?</a>
<button type="submit" class="login-btn" name="submitLogin">Log in</button>
</form>
</body>
NOTE: The Testing value from the echo displays, yet the JQuery does not execute.
It is not possible to put the PHP code after the HTML as it creates a session for my login form to work.
<?php
echo 'Testing
<script>
$( ".wrong" ).show( "slow" );
</script>';
?>
This does not create a session, and does not need to be at the top. What needs to be at the top is a session_start() call yes, but echoing out script html is not required at the top
For instance you could do
<?php
session_start();
if(attemptLogin()){
//logged in path
} else {
//wrong credentials
$LoginError = true;
}
?>
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<?php if($LoginError):?>
<script>
jQuery(document).ready(function(){
$( ".wrong" ).show( "slow" );
});
</script>;
<?php endif;?>
</head>
You need to allow your js files to be loaded first, then the DOM to be loaded and then you can use your code below just before the </body> tag and it will work.
<?php
//PHP code for login in, working, not needed to show
echo 'Testing
<script>
$( ".wrong" ).show( "slow" );
</script>';
?>

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.

Categories

Resources