I am working in a project with codeigniter and bootstrap, I made an autocomplete system, but the css looks broken like this
https://gyazo.com/4af7ae2bbdfd5547233d192b80ef947e
There is no custom style, only the bootstrap min css, here is my view html code, any help to look like it should be would be appreciated
<h2>Welcome to Crossover Laboratory</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class='col-md-10 text-center'>
<h3>Patients</h3>
<?php echo $error2; ?>
<?php
$attributes2 = array(
"class"=>"form-horizontal",
"id" => "LoginForm2",
"name" => "LoginForm2",
"method" => "post"
);
echo form_open("laboratory/patients", $attributes2); ?>
<div class="form-group">
<input type="text" name="username_patients" id="username_patients" class="ui-autocomplete-input" value="" required placeholder="Name" />
<p id="patient_name"></p>
</div>
<div class="form-group">
<input type="password" name="password_patients" id="password_patients" value="" required placeholder="Code"/>
</div>
<div class="form-group">
<?php echo form_submit("Login2","Login"); ?>
</div>
<?php echo form_close(); ?>
</div>
<div class="col-md-1">
</div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$("#username_patients").autocomplete({
source: '<?php echo site_url('laboratory/autocomplete'); ?>',
minlenght: 2,
html: true,
open: function(event, ui)
{
$(".ui-autocomplete").css("z-index",1000);
}
});
});
</script>
I think you have missed the jQueryUI CSS references. Add the below CSS in your application <head> section and try..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
Related
Here is defined codeigniter4 controller with form validation and view file. How can be reflected on view pages with errors.
Controller code is not reflected on view page . Could anyone clarify the issue of codeigniter4 validation.
Controller
public function register_user(){
helper(['form', 'url']);
$this->validation = \Config\Services::validation();
$validation = $this->validation;
$rules = [
'user_name' => [
'required' => 'All accounts must have usernames provided',
],
];
$this->validation->setRules([
'user_name' => 'required|min_length[2]',
],
$rules
);
if (! $this->validate($rules))
{
$validationErrors = $this->validation->getErrors();
return redirect()->back()->withInput()->with('errors', $validationErrors);
}
}
View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<style type="text/css">
.error{color: red;}
</style>
<span style="background-color:red;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Please do Registration here</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="<?php echo base_url('user/register_user'); ?>">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Please enter Name" name="user_name" type="text" autofocus>
<span class="error"><?php echo $validation->getError('user_name'); ?></span>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Register" name="register" >
</fieldset>
</form>
<center><b>You have Already registered ?</b> <br></b> Please Login</center>
</div>
</div>
</div>
</div>
</div>
</span>
</body>
</html>
Following is the current result:
you can try this controller
public function register_user(){
helper('form');
if (! $this->validate([
'user_name' => 'required|min_length[3]|max_length[255]'
]))
{
echo view('user/login');
}
else{
echo view('user/login_view');
}
}
and this view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<h2></h2>
<style type="text/css">
.error{color: red;}
</style>
<span style="background-color:red;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Please do Registration here</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="<?php echo base_url('user/register_user'); ?>">
<fieldset>
<div class="form-group">
<?= esc($user_name); ?>
<span class="error"><?= \Config\Services::validation()->listErrors(); ?></span>
<input class="form-control" placeholder="Please enter Name" name="user_name" type="text" autofocus>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Register" name="register" >
</fieldset>
</form>
<center><b>You have Already registered ?</b> <br></b> Please Login</center>
</div>
</div>
</div>
</div>
</div>
</span>
</body>
</html>
Dont forget to add route if this use:
$routes->add('/login', 'Login::login');
$routes->add('/user/register_user', 'User::register_user');
This post is not validated but the response of Wandi Tiger is ok for me.
With several rules you can do simply :
$validation = $this->validate([
'user_name' => 'required|min_length[10]|max_length[255]',
'user_pass' => 'required|min_length[10]|max_length[255]'
]);
if($validation)
{
echo view('user/login');
}
else{
echo view('user/login_view');
}
// Keep the old input values upon redirect so they can be used by the old() function
return redirect()->back()->withInput();
// Set a flash message
return redirect()->back()->with('foo', 'message');
You have combined both in your example which will not work
because the variable $validation which you are trying to access in view doesn't contain any data because you have not assigned any data to it
So you have to replace
if (! $this->validate($rules))
{
$validationErrors = $this->validation->getErrors();
return redirect()->back()->withInput()->with('errors', $validationErrors);
}
with this code:
if (! $this->validate($rules))
{
$data['validation'] = $this->validatior;
return view('view-name',$data); //note don't forget to replace view-name.
}
Don't change anything in the view file.
I want to create custom repeater controller for theme, for this i tried but i am stuck with issue and i am unable to save any changes to my repeater section, any help is highly appreciated, here is link to my code
The code for customizer class is
if (class_exists('WP_Customize_Control')):
class Test_Testimonial_Control extends WP_Customize_Control {
public $type = 'textarea';
public function render_content() {
?>
<div class="test-rep-section-wrap">
<div class="test-rep-section">
<h3 class="test-title"><?php echo esc_html( $this->label ); ?></h3>
<div class="test-contents">
<input type="text" name="testimonial" placeholder="Image URL" id="img-link-testimonial">
Upload Image
<span><?php _e('Description Text','text-domain'); ?></span>
<textarea rows="2" style="width:100%;"><?php echo esc_textarea( $this->value() ); ?></textarea>
<input type="text" name="cl_name" placeholder="Name">
</div>
Add More
<input <?php $this->link(); ?> type="hidden" value="<?php echo esc_attr($this->value()); ?>"/>
</div>
</div>
<?php
}
}
endif;
jquery code is
$('.test-contents').hide();
$('body').on('click', '.test-title', function(){
$('.test-contents').slideToggle();
});
$('body').on('click', '.new_section', function(){
var tCount = 0;
$('.test-rep-section-wrap').append('<div class="test-rep-section"><h3 class="test-title">Testimonial Options</h3><div class="test-contents" style="display: block;"><input type="text" name="testimonial" placeholder="Image URL" id="img-link-testimonial">Upload Image<span>Description Text</span><textarea rows="5" style="width:100%;"></textarea><input type="text" name="cl_name" placeholder="Name"></div>Add More<input data-customize-setting-link="ripple_pro_testimonial_repeater" type="hidden" value=""><div class="delete-test-feature">Delete Feature</div></div>');
});
$(document).on('click', '.delete-test-feature > a', function(){
$(this).parents('.test-rep-section').remove();
});
My cakephp template file is
<div class="row">
<div class="members form col l6 m8 s12 offset-l3 offset-m2 ">
<h3>Introduce a Member</h3>
<div class="divider"></div>
<br>
<?= $this->Form->create($member) ?>
<div class='input-field'>
<?= $this->Form->input('name',array('div'=>'input')); ?>
</div>
<div class='input-field'>
<?= $this->Form->input('father_or_husband'); ?>
</div>
<div class='input-field'>
<?= $this->Form->input('age'); ?>
</div>
<div class='input-field'>
<?= $this->Form->input('post'); ?>
</div>
<div class='input-field'>
<?= $this->Form->input('school_name'); ?>
</div>
<div class='input-field'>
<?= $this->Form->input('current_status'); ?>
</div><br>
<div class="row">
<?= $this->Form->input('date_of_retirement',array(
'type'=>'date',
'class'=>'datepicker'
)); ?>
</div>
<div class="input-field row">
<?=
$this->Form->input('payment_status',array('type'=>'checkbox'));
?>
</div><br>
<?= $this->Form->button(__('Submit'),['class'=>'waves-effect waves-light btn']); ?>
<?= $this->Form->end() ?>
</div>
Although I am trying to use the checkbox and datepicker here. But they did not appear in my project when browsed. Please help?
#Aditya Soni, Materialize checkboxes are wrapped in <label> tags. I had the same problem.
In order to solve this problem, I had to use jquery to wrap my checkboxes in <label> tags withing my code like below:
<script>
$('#PaymentStatus').wrap("<label></label>");
</script>
To generate checkbox you need to do something like this, rather than defining type:
echo $this->Form->checkbox('payment_status');
Your form helper for date looks fine. If you are trying to use bootstrap datepicker or any other plugin simply use input as a type:
<?= $this->Form->input('date_of_retirement',array('class'=>'datepicker')); ?>
See Here (CakePHP form helper).
I am still looking forward to getting this solved. The simple thing to be done is to use autocomplete in an input form control, to my surprise it not puling the records from into the text input. If I query the result through the browser, I do see the results thus:
http://localhost:2222/json/redirects/
I do see this result:
[{"id":null,"value":"Andorra"},{"id":null,"value":"United Arab Emirates"},{"id":null,"value":"Afghanistan"},{"id":null,"value":"Antigua and Barbuda"},{"id":null,"value":"Anguilla"},{"id":null,"value":"Albania"},{"id":null,"value":"Armenia"},{"id":null,"value":"Netherlands Antilles"},{"id":null,"value":"Angola"},{"id":null,"value":"Antarctica"},
This is the blade file:
<!DOCTYPE html>
<html>
<head>
{!! Html::style('bootstrap/css/bootstrap.css') !!}
{!! Html::style('bootstrap/css/bootstrap.min.css') !!}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<section class="panel panel-default">
<header class="panel-heading">
<input type="text" name="searchname" id="searchname" class="form-control" placeholder="enter name">
</header>
<div class="panel-body">
<table>
<tr>
<td><input type="text" name="id" id="id" class="form-control" placeholder="ID" ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="text" name="name" id="name" class="form-control" placeholder="Name" ></td>
</tr>
</table>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript">
$('#searchname').autocomplete({
source: '{!! Url::route('jsonRedirect') !!}',
minlength: 1,
autofocus: true,
select: function(e, ui){
alert(ui);
}
});
</script>
</html>
This is the controller:
public function SelectLocationPlaces(Request $userAdressRequest)
{
$term = $userAdressRequest->term;
$data = Country::where('name', 'LIKE', '%'.$term.'%')->take(10)->get();
$results = array();
foreach ($data as $key => $value) {
$results[] = ['id'=>$value->id, 'value'=>$value->name];
}
return response()->json($results);
}
This is the route:
Route::get('json/redirects', array('as'=>'jsonRedirect', 'uses'=>'UserAddressController#SelectLocationPlaces'));
Error log:
<body>
<div id="sf-resetcontent" class="sf-reset">
<h1>Whoops, looks like something went wrong.</h1>
<h2 class="block_exception clear_fix">
<span class="exception_counter">1/1</span>
<span class="exception_title"><abbr title="Symfony\Component\Debug\Exception\FatalErrorException">FatalErrorException</abbr> in <a title="C:\Users\ken4ward\Documents\xampp\htdocs\tradersmart\storage\framework\views\d12352064f8db7567c7110c110aa0321 line 39" ondblclick="var f=this.innerHTML;this.innerHTML=this.title;this.title=f;">d12352064f8db7567c7110c110aa0321 line 39</a>:</span>
<span class="exception_message">Class 'Url' not found</span>
</h2>
<div class="block">
<ol class="traces list_exception">
<li> in <a title="C:\Users\ken4ward\Documents\xampp\htdocs\tradersmart\storage\framework\views\d12352064f8db7567c7110c110aa0321 line 39" ondblclick="var f=this.innerHTML;this.innerHTML=this.title;this.title=f;">d12352064f8db7567c7110c110aa0321 line 39</a></li>
</ol>
</div>
Please,kind hearts, what could be the reason why the autocomplete not working but yet I can view the json response on the url?
Thanks, everyone. It's finally working. It was caused by passing the wrong URL format as the source. So, all I changed is this:
From: source: '{!! Url::route('jsonRedirect') !!}',
To: '{{ url('json/redirects') }}',
I have the following shortcode. What I would like to do is turn this shortcode into a sidebar area so that I can run a decent contact widget. I have googled and tried a few tutorials but I cannot get it working.
Index.php
<?php
$classes = '';
if (strtolower($menuItem->title) == $precision_contact_page) {
?>
<div id="<?php echo strtolower($menuItem->title); ?>scroller">
<?php
$page_data = get_page($menuItem->page_id);
echo do_shortcode($page_data->post_content);
?>
Functions.php:
//contactform shortcode
function contactform_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'content'
), $atts ) );
$returncontent = '<div class="' . esc_attr($class) . '">';
$returncontent .= 'ContactInformation
<h5>Get In Touch</h5><div id="contactform">
<div id="response"></div>
<form id="precision-contact-form" method="POST" action="" class="form">
<div id="main">
<p class="name">
<input type="text" name="uname" id="uname" />
<label for="uname" class="overlabel">Name</label>
</p>
<p class="email">
<input type="text" name="uemail" id="uemail" />
<label for="uemail" class="overlabel">E-mail</label>
</p>
<p class="text">
<textarea name="ucomments" id="ucomments" ></textarea>
</p>
<p class="submit">
<button type="submit" name="submit" id="submit" class="graybutton">Send Email</button>
</p>
</div><!--end main-->
</form>
</div><!--end contact form-->';
$returncontent .= '</div>';
return $returncontent;
}
add_shortcode('contactform', 'contactform_shortcode');
?>
Past this where you want in side bar
<?php echo do_shortcode('[contactform']'); ?>
If you want your shortcode to work in the side bar then you can do the following.
in functions.php add the following
add_filter('widget_text', 'do_shortcode');
This will run all your text widget's content through the *do_shortcode* function.
You can now add a new text widget to your sidebar and use your shortcode inside it, just as if you were in the post edit screen.
[contactform]