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>
Related
I want make modal boxes for some edit form. The modal box is opening, but my text value does not show up, it only showing my int value (except my 1st value). Whats wrong with my code?
//--Code--//
<button type="button" id="editNilai" class="btn btn-sm btn-info nilai"
data-toggle="modal" data-target="#editNilai"
data-nama="<?= $user['nama'] ?>"
data-nipd="<?= $user['nipd'] ?>"
data-kelas="<?= $user['kelas'] ?>"
data-verifikasi="<?= $user['verifikasi'] ?>"
data-visitasi="<?= $user['visitasi'] ?>"
data-presentasi="<?= $user['presentasi'] ?>" >
Edit
</button>
</td>
</tr>
<?php endforeach; }?>
</tbody></table>
Script for my edit.js
$(document).on("click", ".nilai", function () {
var nama = $(this).data('nama');
var nipd = $(this).data('nipd');
var kelas = $(this).data('kelas');
var verifikasi = $(this).data('verifikasi');
var visitasi = $(this).data('visitasi');
var presentasi = $(this).data('presentasi');
$(".modal-body #nama").val(nama);
$("#nipd_a").val(nipd);
$("#kelas_a").val(kelas);
$("#verifikasi").val(verifikasi);
$("#visitasi").val(visitasi);
$("#presentasi").val(presentasi);
});
Script for My modal box.php
<div class="modal fade" id="editNilai" tabindex="-1" role="dialog" aria-labelledby="user" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="nilai">Edit Nilai Badan Publik</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?php echo site_url('admin/updateNilai');?>" method="post">
<div class="form">
<div class="">
<div class=" form-group">
<label for="" class="">Badan Publik <span><i class="text-danger">*</i></span></label>
<input name="nama" id="nama" type="" class="form-control text-danger" readonly>
</div>
</div>
<div class="">
<div class=" form-group">
<label for="" class="">NIPD <span><i class="text-danger">*</i></span></label>
<input name="nipd" id="nipd_a" type="number" class="form-control text-danger" readonly>
</div>
</div>
<div class="">
<div class=" form-group">
<label for="" class="">Kategori <span><i class="text-danger">*</i></span></label>
<input name="kelas" id="kelas_a" type="" class="form-control text-danger" readonly>
</div>
</div>
<div class="">
<div class=" form-group">
<label for="" class="">Verifikasi <span><i class="text-danger">*</i></span></label>
<input name="verifikasi" id="verifikasi" type="number" class="form-control text-danger">
</div>
</div>
//---Continue---//
I dont know why data-nipd & data-kelas does not show up, eventhough "button" successfully submitted the value
(From inspect at browser)
<button type="button" id="editNilai" class="btn btn-sm btn-info nilai" data-toggle="modal" data-target="#editNilai" data-nama="Dummy OPD" data-nipd="2101000" data-kelas="OPD Sumbar 2021" data-verifikasi="20" data-visitasi="30" data-presentasi="">
Edit Nilai</button>
I think I found the answer. It the browser cache/cookies, after i clearing my all browsing data, value show up normally now. Sorry, I dont know browser cache can affect this.
I'm updating some content on a website running Bootstrap 2.0.4 (I know it's dated but don't have the time to update it yet!).
I'm trying to prepend a button on to an input element. When the button is clicked I'm adding another button dynamically below it using jquery, I need this also to have the button prepended.
I've created a fiddle, would appreciate any help.
HTML
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
JQUERY
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Check updated snippet below....
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").before(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
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>
As the title already says, I'd like to have a button that will open a modal and call a controller method at the same time. The method will return a JSON object.
How can I link the button so it will call the method and display the modal? Subsequently, I'd like to use the object returned by the function to populate the modal.
<i data-toggle="modal" data-target="#modal-default" class="fa fa-pencil-square-o"></i>
Modal:
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Default Modal</h4>
</div>
<div class="modal-body">
<form class="form-group">
<div class="row">
<label class="col-xs-2" for="first">First Name: </label>
<input type="text" class="form-control col-md-2" id="first" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="last">Last Name: </label>
<input type="text" class="form-control col-md-2" id="last" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="email">Email: </label>
<input type="text" class="form-control col-md-2" id="email" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="phone">Phone: </label>
<input type="text" class="form-control col-md-2" id="phone" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="status">Status: </label>
<input type="text" class="form-control col-md-2" id="status" name="" value="">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You should bind the open modal event to another function that makes an asynchronous call to your server in order to retrieve the data
You can use jquery the show event:
$('#modal-default').on('shown', function (){
//use $.get('path/to/controller').done(function(resp){
console.log(resp); })
//|| $.ajax() || $.post()
})
or you can bind an id:
<i data-toggle="modal" data-target="#modal-default" class="fa fa-pencil-square-o" id="async_id"></i>
And use a listener:
$('#async_id').on('click', function(){
//use $.get('path/to/controller').done(function(resp){
console.log(resp); })
//|| $.ajax() || $.post()
})
EDIT:
use
$('#modal-default').on('shown.bs.modal', function (e) {...
for bootstrap 3
use $ .ajax first you make the request and then use .done to call the modal with setTimeout
i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.