Getting values from dynamic form in codeigniter

Getting values from dynamic form in codeigniter - javascript

I have a dynamic form written with the following code and I am trying to get all the details in the form. How can I go about doing it?
Form
<?php echo form_open_multipart('backendProduct/save_product'); ?>
<div class="row" ng-app="appcolor">
<div id="gc_photos"></div>
</div>
</form>
<script type="text/template" id="imageTemplate">
<div class="row gc_photo" id="gc_photo_{{id}}" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">
<div class="col-md-2">
<input type="hidden" name="images[{{id}}][filename]" value="{{filename}}"/>
<img class="gc_thumbnail" src="<?php echo base_url('../product_images/{{filename}}');?>" style="padding:5px; border:1px solid #ddd"/>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input name="images[{{id}}][alt]" value="{{alt}}" class="form-control" placeholder="<?php echo lang('alt_tag');?>"/>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="radio" name="primary_image" value="{{id}}" {{#primary}}checked="checked"{{/primary}}/> <?php echo lang('main_image');?>
</label>
</div>
</div>
<div class="col-md-4">
<a onclick="return remove_image($(this));" rel="{{id}}" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label><?php echo lang('caption');?></label>
<textarea name="images[{{id}}][caption]" class="form-control" rows="3">{{caption}}</textarea>
</div>
</div>
</div>
</div>
</script>
Function
function addProductImage(val)
{
view = {
id:val.item_id,
filename:val.detail_image_name,
alt:val.alt,
primary:val.primary,
caption:val.caption
}
var output = Mustache.render(imageTemplate, view);
$('#gc_photos').append(output);
$('#gc_photos').sortable('refresh');
photos_sortable();
}

Related

How to get Underscore in textbox content in MVC in Print preview mode

I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification

how can i validate the checkbox?

<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
<div class="form-group row" style="margin-top:10px;height:50px;">
<div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
<label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
<span>Hepatitis A vaccine</span></label>
</div>
<div class="form-group col-md-4">
<!-- Date input -->
<input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
</div>
</div>
<div class="row" style="padding:15px;">
<div class="col-md-3 col-md-offset-1">
<div class="form-group">
<h3 style="color:orange;">Clinic Name</h3><br>
<input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
<label for="clinic_name"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<h3 style="color:orange;">Name of the Health practitioner</h3><br>
<input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
<label for="hp_name"></label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h3 style="color:orange;">Lot no. of Vaccine</h3><br>
<input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
<label for="lotno"></label>
</div>
</div>
<div class="row col-md-offset-1">
<div class="col-md-6 text-right">
<input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
</div>
</div>
</div>
</form>
i have added my html code also..
$('.save').on('click', function() {
var chk = $(this).parent().parent().parent().parent().parent().find('input [name="ch"]').attr('class');
if ($("." + chk).attr('checked', false)) {
alert("please check the checkbox");
} else {
alert("you have checked the checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
i have tried with this code and getting the alert "please check the checkbox" for both conditions if and else.
i just want to validate the checkbox whether it is checked or not .. if checked means it should display the relevant message if not checked also should display the message.

There are two things i am noticing:
Instead use .closest() against .parent() multiple times.
Do not set the attribute in the if condition, instead of .attr() use .prop().
You can change to this
var chk = $(this).closest('form').find('input[name="ch"]');// use form if you have one.
if (!$(chk).prop('checked')) {
$('.save').on('click', function() {
var chk = $(this).closest('form').find('input[name="ch"]');
if (!$(chk).prop('checked')) {
alert("please check the checkbox");
} else {
alert("you have checked the checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
<div class="form-group row" style="margin-top:10px;height:50px;">
<div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
<label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
<span>Hepatitis A vaccine</span></label>
</div>
<div class="form-group col-md-4">
<!-- Date input -->
<input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
</div>
</div>
<div class="row" style="padding:15px;">
<div class="col-md-3 col-md-offset-1">
<div class="form-group">
<h3 style="color:orange;">Clinic Name</h3><br>
<input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
<label for="clinic_name"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<h3 style="color:orange;">Name of the Health practitioner</h3><br>
<input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
<label for="hp_name"></label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h3 style="color:orange;">Lot no. of Vaccine</h3><br>
<input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
<label for="lotno"></label>
</div>
</div>
<div class="row col-md-offset-1">
<div class="col-md-6 text-right">
<input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
</div>
</div>
</div>
</form>

enable disable dropdowns and text fields conditionally

I am trying to use JavaScript to enable and disable my textbox and dropdown menu but nothing is working.
<style type="text/css">
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
color: black;
}
</style>
<div class="right_col" style="min-height: 930px;"role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3><?php echo $mainHeader;?></h3>
</div>
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">Choose from <?php echo $buttonName; ?> below</div>
<div class="x_content">
<?php
if($type == 'balance_sheet'){
?>
<form id="createUserForm" action="<?php echo base_url(); ?>supply_chain/balance_sheet" method="POST" data-parsley-validate class="form-horizontal form-label-left">
<fieldset>
<div class="item form-group">
<div class="col-md-3 ">
<p style="padding: 5px;">
<label class="control-label" for="Financial_year" >
<input type="radio" name="historical_data" id="yearly" value="Previous Financial Year" class="flat"/>&nbsp&nbsp&nbspPrevious Financial Year
</label>
</div>
</div>
<div class="item form-group">
<div class="col-md-3 ">
<p style="padding: 5px;">
<label class="control-label" for="quarter">
<input type="radio" name="historical_data" id="quarter_data" value="Quarterly" class="flat"/>&nbsp&nbsp&nbspQuarterly</label>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="select2_single form-control" name="quarter" id="quarterly_data" style="width:26%;" tabindex="-1">
<option value="">Choose Quarter Period</option>
<option value="Jan-Mar">Jan-Mar</option>
<option value="Apr-Jun">Apr-Jun</option>
<option value="Jul-Sept">Jul-Sept</option>
<option value="Oct-Dec">Oct-Dec</option>
</select>
</div>
</div>
<div class="item form-group">
<div class="col-md-3 ">
<p style="padding: 5px;">
<label class="control-label" for="quarter">
<input type="radio" name="historical_data" id="month_data" value="Month" class="flat" onclick="tryme()"/>&nbsp&nbsp&nbspMonthly</label>
</div>
<div class="col-md-3">
<input type="text" name="monthly" id="monthly_data" placeholder="Month" class="date-picker form-control col-md-7 col-xs-12" ng-model="month"/>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success" name = "btnSubmit" >Submit <?php echo $buttonName?></button>
<button class="btn btn-primary" onclick="window.location.href = '<?php echo $_SERVER['HTTP_REFERER'];?>'">Cancel
</button>
</div>
</div>
</fieldset>
</form>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#Month").datepicker( {
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
});
$('#createUserForm').submit(function() {
return false;
});
</script>
This is my JavaScript file. I tried to use ID of textbox and dropdown but its just not working
<script type="text/javascript">
$(document).ready(function(){
$("#quarter_data, #month_data").change(function(){
$("#quarterly_data, #monthly_data").val("").attr("readonly",true);
if($("#quarter_data").is(":checked")){
$("#quarterly_data").removeAttr("readonly");
$("#quarterly_data").focus();
}
else if($("#month_data").is(":checked")){
$("#monthly_data").removeAttr("readonly");
$("#monthly_data").focus();
}
});
});
</script>

Try this:
$("#quarter_data").change(function(){
if($(this).is(":checked"))
{
$('#monthly_data').attr("readonly", true);$('#quarterly_data').attr("disabled", false);
}
});
$("#month_data").change(function()
{
if($(this).is(":checked"))
{
$('#quarterly_data').attr("disabled", true);$('#monthly_data').attr("readonly", false);
}
});

Datepicker not working in jquery loaded ajax modal window on codeigniter

I am trying to edit my database table using jquery loaded ajax modal. and when i trigger the edit form using ajax, the bootstrap datepicker and selct2 plugin is not working but the same datepicker and select2 plugin is working fine inside the page. and i am also trying to bind the jquery inside the modal but its not working too. here is my code for the ajax loaded popup form.
<?php
$edit_data = $this->db->get_where('staff' , array('staff_id' => $param2) )->result_array();
foreach ( $edit_data as $row):
?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" >
<i class="fa fa-plus-circle"></i>
<?php echo get_phrase('edit_staff');?>
</div>
</div>
<div class="panel-body">
<?php echo form_open(base_url() . 'index.php?admin/staffs/do_update/'.$row['staff_id'] , array('autocomplete'=>'off','target'=>'_top'));?>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('staff_name');?></label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="program_name" value="<?php echo $row['name']; ?>">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('date_of_birth_');?> <i class="ion-android-calendar"></i></label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control bootstrap-daterangepicker-basic" id="datepicker" name="dob" value="<?php echo $row['dob']; ?>">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('address');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="address" value="<?php echo $row['address']; ?> ">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('phone');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="phone" value="<?php echo $row['phone']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('email');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="email" value="<?php echo $row['email']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('sex');?></label>
<div class="col-sm-8">
<select name="sex" style="width:100%;">
<option value="1" <?php if($row['sex'] == '1')echo 'selected';?>>
<?php echo get_phrase('male');?>
</option>
<option value="2" <?php if($row['sex'] == '2')echo 'selected';?>>
<?php echo get_phrase('female');?>
</option>
</select>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('department');?></label>
<div class="col-sm-8">
<select name="department_id" class="chosen-select">
<?php
$departments = $this->db->get('department')->result_array();
foreach($departments as $row2):
?>
<option value="<?php echo $row2['department_id'];?>"
<?php if($row['department_id'] == $row2['department_id'])echo 'selected';?>>
<?php echo $row2['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('designation');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="post" value="<?php echo $row['post']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('is_teacher');?></label>
<div class="col-sm-8">
<select name="is_teacher" style="width:100%;">
<option value="1" <?php if($row['is_teacher'] == '1')echo 'selected';?>>
<?php echo get_phrase('Yes');?>
</option>
<option value="2" <?php if($row['is_teacher'] == '0')echo 'selected';?>>
<?php echo get_phrase('No');?>
</option>
</select>
</div>
</div><!--.form-group-->
<br/><br/>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-5">
<button type="submit" class="btn btn-info"><i class="fa fa-pencil"></i> <?php echo get_phrase('edit_staff');?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
endforeach;
?>
<script type="text/javascript">
$("#datepicker").FormsPickers.init();
</script>
and below is my code for generating ajax loaded popup ..
<script type="text/javascript">
function showAjaxModal(url)
{
// SHOWING AJAX PRELOADER IMAGE
jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="assets/images/preloader.gif" /></div>');
// LOADING THE AJAX MODAL
jQuery('#modal_ajax').modal('show', {backdrop: 'true'});
// SHOW AJAX RESPONSE ON REQUEST SUCCESS
$.ajax({
url: url,
success: function(response)
{
jQuery('#modal_ajax .modal-body').html(response);
}
});
}
</script>
<!-- (Ajax Modal)-->
<div class="modal fade" id="modal_ajax">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo $system_name;?></h4>
</div>
<div class="modal-body" style="height:500px; overflow:auto;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
this is the include_buttom.php ...
<script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script>
<script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/globals/plugins/clockface/js/clockface.js"></script>
<script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script>
<script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script>
<script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script>
<script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- PLUGINS INITIALIZATION AND SETTINGS -->
<script src="assets/globals/scripts/forms-select.js"></script>
<script src="assets/globals/scripts/forms-pickers.js"></script>
<script src="assets/globals/scripts/forms-wizard.js"></script>
<!-- END PLUGINS INITIALIZATION AND SETTINGS -->
<!-- PLEASURE -->
<script src="assets/globals/js/pleasure.js"></script>
<!-- ADMIN 1 -->
<script src="assets/admin1/js/layout.js"></script>
<script>
$(document).ready(function () {
Pleasure.init();
Layout.init();
FormsPickers.init();
FormsSelect.init();
Index.init();
});
</script>

Actually you calling the assest in wrong path. Means you are missing base_url() word in your src URL
Your code should be
<script src="<?php echo base_url() ?>assets/globals/plugins/pn...

this is the include_buttom.php ...
<script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script>
<script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/globals/plugins/clockface/js/clockface.js"></script>
<script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script>
<script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script>
<script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script>
<script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- PLUGINS INITIALIZATION AND SETTINGS -->
<script src="assets/globals/scripts/forms-select.js"></script>
<script src="assets/globals/scripts/forms-pickers.js"></script>
<script src="assets/globals/scripts/forms-wizard.js"></script>
<!-- END PLUGINS INITIALIZATION AND SETTINGS -->
<!-- PLEASURE -->
<script src="assets/globals/js/pleasure.js"></script>
<!-- ADMIN 1 -->
<script src="assets/admin1/js/layout.js"></script>
<script>
$(document).ready(function () {
Pleasure.init();
Layout.init();
FormsPickers.init();
FormsSelect.init();
Index.init();
});
</script>

1.
first of all give exact path to all of your assets as
<script src="<?php echo base_url() ?>assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
or
<script src="<?php echo base_url('assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') ?>"></script>
2.
what following codes do at your include_button page??
FormsPickers.init();
FormsSelect.init();
you are initializing FormsPicker with selector ID which can be multiple since you are looping there. change that selector to class name.
<script type="text/javascript">
$("#datepicker").FormsPickers.init();
</script>
to
<script type="text/javascript">
$(".class_name").FormsPickers.init();
</script>
3.
Best initialize choosen and datepicker by yourself as following in your ajax loaded popup form
<script type="text/javascript">
$(".choosen_class").chosen();
$(".datepicker_class').datepicker();
</script>
by doing these i hope your problem should be solved. If still problem persist, do ask us :)

Script on AJAX Post response isn't executing just giving erroe unexpected token {

I am trying to generate morris js chart in bootstrap dynamically using AJAX. But I couldn't figure out the issue and why I couldn't do it. Console.log saya "Uncaught SyntaxError: Unexpected token {".
Here is the html code and the javascript where user will click on a button to load ajax content.
$( "#report_form" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
alert('test');
if($('#cb').is(':checked')){
cb=true;
}else{
cb=false;
}
if($('#cheque').is(':checked')){
cheque=true;
}else{
cheque=false;
}
if($('#tr').is(':checked')){
tr=true;
}else{
tr=false;
}
if($('#especes').is(':checked')){
especes=true;
}else{
especes=false;
}
var start_d=document.getElementById("start_date").value;
var end_d=document.getElementById("end_date").value;
$.post( "reporting/generate_graph", {
cb: cb,
cheque: cheque,
tr: tr,
especes: especes,
start_date: start_d,
end_date: end_d
})
.done(function(chart) {
$( "#chart" ).html(chart);
console.log(chart);
// $.globalEval( "draw_graph();" );
// eval(chart);
});
});
<form id="report_form" action="<?php echo base_url(); ?>reporting/generate_graph" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="" class="col-sm-3 control-label">Time Period- from:</label>
<div class="col-sm-3">
<input name="date_start" id="start_date" type="date" name="" id="input" class="form-control" value="" required="required" title="" >
</div>
<label for="" class="col-sm-3 control-label">To:</label>
<div class="col-sm-3">
<input name="date_end" id="end_date" type="date" name="" id="input" class="form-control" value="<?php echo date('Y-m-d'); ?>" required="required" title="">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-3 control-label">CB:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="cb" type="checkbox" value="cb" id="cb">
</label>
</div>
</div>
<label for="" class="col-sm-3 control-label">Cheque:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="cheque" type="checkbox" value="cheque" id="cheque">
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-3 control-label">TR:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="tr" type="checkbox" value="tr" id="tr">
</label>
</div>
</div>
<label for="" class="col-sm-3 control-label">ESPECES:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="especes" type="checkbox" value="especes" id="especes">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-warning" >Genarate</button>
</div>
</div>
</form>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
<center>
<!-- The Div for Charts -->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="chart">
</div>
</center>
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
</div>
And here is the html response that the above page will have
<html>
<head></head>
<body >
<div id="chart_div"></div>
<script type="text/javascript">
//function draw_graph() {
alert('graph');
Morris.Bar({
element: 'chart_div',
data: [
<?php foreach ($graph_data as $bars) { ?>
{y:
<?php echo $bars['date']; ?> ,
<?php if($cb==true) { ?>
a: <?php echo $bars['cb']; ?>,
<?php } ?>
<?php if($cheque==true) { ?>
b: <?php echo $bars['cheque']; ?>,
<?php } ?>
<?php if($tr==true) { ?>
c: <?php echo $bars['tr']; ?>,
<?php } ?>
<?php if($especes==true) { ?>
d: <?php echo $bars['especes']; ?>,
<?php } ?>
}
<?php
}
?>
],
xkey: 'y',
ykeys: ['a', 'b','c','d'],
labels: ['CB', 'Cheque','TR','ESPECES'],
resize:true
});
//}
</script>
</body>
</html>
But Nothing happens. I want to generate the above graph. $graph_data is an array of a record set and it is fine. I have var_dump it and it gives a result array without any issue.

Develop Reference

JavaScript is the programming language of the Web.

Getting values from dynamic form in codeigniter - javascript

Related

How to get Underscore in textbox content in MVC in Print preview mode

how can i validate the checkbox?

enable disable dropdowns and text fields conditionally

Datepicker not working in jquery loaded ajax modal window on codeigniter

Script on AJAX Post response isn't executing just giving erroe unexpected token {

Categories

Resources