I am working with dynamic form.
I want to pass javascript value to append row. Here how can I pass uid value to appended row. I tried <?php echo $uid = "<script>document.write(uid)</script>"; ?> in append row.
Bbut it is not working.
Here is my code
default row
<div class="form-group row">
<?php $uid = '1';?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div id="divSpecificatiion">
</div>
Append row
<script type="text/template" id="temSpecification">
<div class="form-group row" style="padding-top:10px;">
<?php $uid =''; ?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</script>
$(document).ready(function (event) {
uid=1;uvd=2;$('#btnAddMoreSpecification').click(function ()
{$('#divSpecificatiion').append($('#temSpecification').html());uid++;uvd++; });
$(document).on('click', '.btnRemoveMoreSpecification', function () {
$(this).parent('div').parent('div').remove();
});
});
Output should be like this
Use something like this:
$(document).ready(function(event) {
uid = 1;
uvd = 2;
$('#btnAddMoreSpecification').click(function() {
uid++;
var templateHtml = $('#temSpecification').html();//save the html in a variable
var temp = $(templateHtml).find('input[type="text"]').val(uid).end();//find the input and append the new uid
$('#divSpecificatiion').append(temp);//append the new html to the div
});
$(document).on('click', '.btnRemoveMoreSpecification', function() {
$(this).parent('div').parent('div').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
<?php $uid = '1';?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">Add more
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div id="divSpecificatiion">
</div>
<script type="text/template" id="temSpecification">
<div class="form-group row" style="padding-top:10px;">
<?php $uid =''; ?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</script>
Related
I have a problem in Fetching all the Data by its ID coming from Database in Bootstrap Modal Popup.
I have a Fetch Table in my Program. This is my code:
<div class="table-responsive">
<?php
require_once("include/connect.php"); //To connect Database
try{
$sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, age, gender, status, address FROM tbl_patientinfo ORDER BY patient_lname"; //Patient Name is CONCATENATED (Fullname)
$result=$con->prepare($sql);
$result->execute();
?>
<table class="table table-hover" id="table-1">
<thead>
<tr>
<th class="text-center">
#
</th>
<th>Patient Name</th>
<th>Age</th>
<th>Gender</th>
<th>Status</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch()){ ?>
<tr>
<td><?php echo $row['patient_id']; ?></td>
<td><?php echo $row['Fullname']; ?></td> //Concatenated Last Name, First Name, and MI
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td><?php echo $row['status']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<button type="button" class="btn btn-icon btn-primary" data-toggle="modal" data-target="#editpatient"><i class="far fa-edit"></i></button> //Modal Button
</td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
} catch (PDOException $th){
echo "Error: ".$th->getMessage();
}
$con=null;
?>
</div>
I want to fetch all the data from the Database (written in my $sql on the codes above) in Bootstrap Modal Popup using Javascript or JQuery code. This is my code in Javascript or JQuery:
<!-- SCRIPT FOR FETCH RECORD IN MODAL -->
<script>
$(document).ready(function () {
$('.edit-btn').on('click', function () {
$('#editpatient').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#patient_id').val(data[0]);
$('#patient_lname').val(data[1]);
$('#patient_fname').val(data[2]);
$('#patient_mi').val(data[3]);
$('#dob').val(data[4]);
$('#age').val(data[5]);
$('#gender').val(data[6]);
$('#status').val(data[7]);
$('#address').val(data[8]);
$('#cnum').val(data[9]);
$('#company').val(data[10]);
}); });
</script>
<!-- END OF SCRIPT FOR FETCH RECORD IN MODAL -->
And this is my Codes in Modal:
<!-- EDIT MODAL PATIENT -->
<div class="modal fade" id="editpatient" tabindex="-1" role="dialog" aria-labelledby="formModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="formModal">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="">
<div class="form-group">
<form method="POST" action="save-patient.php">
<input type="text" class="form-control" name="txt-patient_id" id="patient_id" placeholder="ID">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-patient_lname" id="patient_lname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-patient_fname" id="patient_fname" placeholder="First Name" required="true">
</div>
</div>
<div class="form-group">
<label>Middle Name</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-patient_mi" id="patient_mi" placeholder="Middle Name">
</div>
</div>
<div class="form-group">
<label>Date Picker</label>
<input type="text" class="form-control datepicker" name="txt-dob" id="dob" placeholder="Date of Birth" required="true">
</div>
<div class="form-group">
<label>Age</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-plus"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-age" id="age" placeholder="Age" required="true">
</div>
</div>
<div class="form-group">
<label>Gender</label>
<select class="form-control" name="txt-gender" id="gender" required="true">
<option value="" readonly>--- Please Select ---</option>
<option value="Male">MALE</option>
<option value="Female">FEMALE</option>
</select>
</div>
<div class="form-group">
<label>Civil Status</label>
<select class="form-control" name="txt-status" id="status" required="true">
<option value="" readonly>--- Please Select ---</option>
<option>Single</option>
<option>Married</option>
<option>Widowed</option>
<option>Separated</option>
<option>Divorced</option>
</select>
</div>
<div class="form-group">
<label>Address</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-home"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-address" id="address" required="true">
</div>
</div>
<div class="form-group">
<label>Contact Number</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-phone"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-cnum" id="cnum" required="true">
</div>
</div>
<div class="form-group">
<label>Company(Optional)</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-building"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-company" id="company">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of EDIT MODAL PATIENT -->
My Problem is I want to fetch all data coming from database (means, not concatenated) by its ID but when the Modal shows, the data shows a concatenated data coming from the FETCH DATA TABLE.
This is my sample FETCH DATA TABLE
And this is my Problem
Please help me to fix my problem. I already do this a month ago and until now, I can't solve this problem. I'm still new in this Programming Languages. I need help from others like you Guys. I hope you everybody can help me to fix this. Thank you so much <3
I have a data in header column which is in json format like {"API-KEY":"763754jkdsnfjk","ACTION":"HGHG"}. I want to get the key of json object in one text box and value in another textbox using foreach loop in codeigniter. I tried this method but it is not coming. can any one please help me how to achieve this.
<?
$arr=explode(',',$load_options['header']);
$opt_count=count($arr);
?>
<div class="controls" id="profs">
<form class="input-append" method="post" action="<?=base_url()?>payment_gateway/update_asset_options">
<input type="hidden" name="rowVal" id="rowVal" value="" />
<input type="hidden" name="row_count" id="row_count" value="<?=$opt_count?>" />
<input type="hidden" name="pre_count" id="pre_count" value="<?=$opt_count?>" />
<?
//print_r($arr);die;
$i=0;
foreach($arr as $key => $val)
{
$display_name=$key;
$db_val=$val;
if($i>0)
{
$remClass="removeclass".$i;
}
else
{
$remClass="";
}
?>
<div class="row <?=$remClass?>" >
<div class="col-sm-5 nopadding">
<div class="form-group">
<input type="text" class="form-control display_name" id="display_name<?=$i?>" name="display_name<?=$i?>" value="<?=$display_name?>" placeholder="Display Name" required >
</div>
</div>
<div class="col-sm-5 nopadding">
<div class="form-group ">
<input type="text" class="form-control" id="db_value<?=$i?>" name="db_value<?=$i?>" value="<?=$db_val?>" placeholder="Value" required />
<input type="hidden" class="form-control" id="def_value<?=$i?>" name="def_value<?=$i?>" value="" />
</div>
</div>
<?
if($i>0)
{?>
<div class="col-sm-2 nopadding">
<div class="input-group-btn">
<i class="fa fa-minus text-danger" ></i>
</div>
</div>
<? }
echo "</div>";
$i++;
}
?>
<div id="education_fields"></div>
<div class="clear"></div>
<div class="col-sm-12 nopadding">
<div class="input-group-btn">
<i class="fa fa-plus"></i>
</div>
</div>
<center>
<button class="btn btn-md btn-success" type="submit" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</form>
</div>
Change
$arr=explode(',',$load_options['header']);
Into this
$arr = json_decode($load_options['header'],true);
I have created Dynamic Add / Remove fields... Along with other fields there is an Image file field... Every thing is working well except the image preview.
The preview of first field is working well, but in other added fields the preview is not working...
I m not getting, where I m wrong... Plz help me... Thanks...
Following is my Code:
<div class="card">
<div class="card-header text-center">
<b>Team Members</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]">
</div>
</div>
</div>
<div id="team-member-fields">
</div>
<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>
</div>
</div>
<script type="text/javascript">
var i = 0;
function preview_member(event, inp) {
var reader = new FileReader();
console.log(inp);
reader.onload = function() {
var output = document.getElementById("output_member" + inp);
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on("click", "#remove-member-fields", function(event) {
event.preventDefault();
$(this)
.parent()
.fadeOut(300, function() {
$(this).empty();
return false;
});
});
//add input
$("#add-member-fields").click(function() {
i++;
var rows = '<div class="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>';
$(rows)
.fadeIn("slow")
.appendTo("#team-member-fields");
return false;
});
});
</script>
Your rows variable is a bit mixed up with string literals and single quotation marks.
If you want to output a string like ${variablename} you have to put backticks around that string. (see Template literals)
Check the follwing snippet (just surrounded the row string with backticks).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-header text-center">
<b>Team Members</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]">
</div>
</div>
</div>
<div id="team-member-fields">
</div>
<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>
</div>
</div>
<script type="text/javascript">
var i = 0;
function preview_member(event, inp) {
var reader = new FileReader();
console.log(inp);
reader.onload = function() {
var output = document.getElementById("output_member" + inp);
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on("click", "#remove-member-fields", function(event) {
event.preventDefault();
$(this)
.parent()
.fadeOut(300, function() {
$(this).empty();
return false;
});
});
//add input
$("#add-member-fields").click(function() {
i++;
var rows = `<div class="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>`;
$(rows)
.fadeIn("slow")
.appendTo("#team-member-fields");
return false;
});
});
</script>
Here i want to do,some one click edit button means, i want show the edit form in same page and in that edit form i want to show already what value wrote,that value i want to display in that form field,here i did for truck name becauze this one for input=text ,but next field i am not able to show which state already he selected,how can do this
<?php
$sql = "SELECT * FROM trucks WHERE status !='1' ORDER BY reg_date DESC";
$result = mysql_query($sql);
$cat=array();
while($row = mysql_fetch_array($result)){
echo '<tr>
<td>'.$row["truck_name"].'</td>
<td>'.Getstate($row["state_id"]).'</td>
<td>'.Getcity($row["city_id"]).'</td>
<td class="col-medium center">
<div class="btn-group btn-group-xs ">
<a class="btn btn-inverse" style="cursor:pointer;" onclick="show_edit_menu(\''.$row["id"].'\',\''.$row["truck_name"].'\',\''.$row["state_id"].'\',\''.$row["city_id"].'\')"><i class="fa fa-edit icon-only"></i>Edit</a>
<a class="btn btn-danger" onclick="truck_deletemenu('.$row["id"].')"><i class="fa fa-times icon-only"></i>Delete</a>
</div>
</td>
</tr>';
}
?><?php
$sql = "SELECT * FROM trucks WHERE status !='1' ORDER BY reg_date DESC";
$result = mysql_query($sql);
$cat=array();
while($row = mysql_fetch_array($result)){
echo '<tr>
<td>'.$row["truck_name"].'</td>
<td>'.Getstate($row["state_id"]).'</td>
<td>'.Getcity($row["city_id"]).'</td>
<td class="col-medium center">
<div class="btn-group btn-group-xs ">
<a class="btn btn-inverse" style="cursor:pointer;" onclick="show_edit_menu(\''.$row["id"].'\',\''.$row["truck_name"].'\',\''.$row["state_id"].'\',\''.$row["city_id"].'\')"><i class="fa fa-edit icon-only"></i>Edit</a>
<a class="btn btn-danger" onclick="truck_deletemenu('.$row["id"].')"><i class="fa fa-times icon-only"></i>Delete</a>
</div>
</td>
</tr>';
}
?>
<script>
function show_edit_menu(id,t_name,state_id,city_id){
$("#show_edit_menu").show();
$("#tid").val(id);//truck auto id
$("#tname").val(t_name);//Truck Name
$("#state").val(state_id);//state id
console.log(t_name);//i got truck name value here
console.log(state_id);//i got state name value here
}
</script>
<!--edit part here-->
<div class="portlet" id="show_edit_menu" style="display:none;">
<div class="portlet-heading dark">
<div class="portlet-title">
<h4>Edit Menu</h4>
</div>
<div class="portlet-widgets">
<a data-toggle="collapse" data-parent="#accordion" href="#f-3"><i class="fa fa-chevron-down"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div id="f-3" class="panel-collapse collapse in">
<div class="portlet-body">
<form class="form-horizontal" role="form" id="edit_form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">Truck Name<span class="require">*</span></label>
<div class="col-sm-8">
<input type="text" class="form-control" value="" name="tname" id="tname">
<input type="hidden" class="form-control" value="" name="tid" id="tid">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">State<span class="require">*</span></label>
<div class="col-sm-8">
<select class="form-control intro-form-fixer state" required="" id="state" name="state" data-msg-required="Please enter your State" value="" aria-required="true">
<option value="1"> I want to show which state i selected</option>
</select>
<!--<input type="hidden" id="state" name="state" value="" />-->
</div>
</div>
<div class="form-actions">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" onclick="edit_menu()">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Try this:
$("#state option[value='"+state_id+"']").attr("selected", true);
instead of
$("#state").val(state_id);
Here, I am using codeigniter. I want to call controller method using javascript where view is called. I want to call view method after one second. I want to call popup from my dashboard, so I called it using controller. Dashboard is my "user_view.php" . From view of "user_home.php", I want to call "break_alert.php".
Here is my code:
Controller:
function alert_breaktime()
{
$this->load->view('break_alert');
}
View:
user_view.php:
<script type="text/javascript">
var timer = setTimeout(function()
{
alert('adsfadf');
window.location.href = "<?php echo site_url('welcome/alert_breaktime');?>
},1000);
</script>
break_alert.php:
<script src="<?=base_url()?>resource/js/jquery-2.1.1.min.js"></script>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Activity</h4>
</div>
<?php $attributes = array('class' => 'bs-example form-horizontal'); echo form_open(base_url().'activity/add',$attributes); ?>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 control-label">Subject<span class="text-danger">*</span></label>
<div class="col-lg-10">
<input type="text" class="form-control holiday_name" name="holiday_name" required>
</div>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-phone"></i> Call</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-group"></i> Meeting</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-tasks"></i> Task</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-flag"></i> Deadline</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-envelope"></i> Email</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-cutlery"></i> Lunch</button>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date<span class="text-danger">*</span></label>
<div class="input-group date col-lg-10" id="datetimepicker5">
<input ng-model="dt" type='text' class="col-sm-3 form-control" value="" readonly data-date-format="YYYY/MM/DD"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<textarea class="textarea" id="description"></textarea>
</div>
<div class="modal-footer">
<?=lang('close')?>
<button type="submit" class="btn btn-primary">Add Activity</button>
</div>
</div>
</div>
</div>
in your code the whole page is refresh after every second.
in place of "window.location.href" use ajax call and evaluate script code like this.
$.ajax({
url: "your url",
success: function(data){
$(data).find("script").each(function() {
eval($(this).text());
}
}
});
function alert_breaktime()
{
echo $this->load->view('break_alert');
}
After all, I got the solution and it works fine. So, here I am putting as a solution.
<script type="text/javascript">
$(document).ready(function() {
var $timer = 0;
function testbreak(){
if ($timer === 0) {
$("#bb").click();
$timer = 1;
}
}
setInterval(testbreak, 3000);
});
</script>
<div id='abc' style="display: none;">
<i class="fa fa-plus"></i> Add Activity
</div>