when i browse an image i want to show the image at the same time on my web page.for that i had used this code but the image is not showing and when i refresh the page the image is showing and i think my location.reload() function is not working that's why its not working
this is my script
<script type="text/javascript">
$(document).ready(function (){
//alert();
$('#modal-close').click();
$("#file").change(function() { $('#upload-image').submit(); });
$('#upload-image').on('submit',(function(e){
e.preventDefault();
//alert()
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(result)
{
$('#uploaded-img').html(result);
window.location.reload(true);
}
});
}));
});
this is my view
<div class="col-md-4" style="padding:0px;">
<div class="add-vehcle-image" >
<form id="uploaded-img">
<!-- added imges contain here -->
<?php if($this->session->userdata('image')){
foreach ($this->session->userdata('image') as $row)
{?>
<div class="col-md-12 col-xs-12 col-sm-12 upload-img">
<img class='img-responsive img-thumbnail' alt='Image' src="<?php echo base_url();?>uploads/thumb/<?php echo $row; ?>">
<div image="<?php echo $row;?>" class="close-btn" data-toggle="modal" data-target="#confirm" >
<span data-toggle="tooltip" data-placement="bottom" title='Delete' class="fa fa-close">
</span>
<i class="fa fa-times"></i>
</div>
</div>
<?php } } ?>
</form>
</div>
<div class="col-md-12" style="margin-top: 24px;">
<div class="add-vehcle-image">
<form enctype="multipart/form-data" method="POST" action="<?php echo base_url();?>admin_control/upload_image" id="upload-image">
<div class="form-group upload-image">
<input type="file" data-toggle="tooltip" data-placement="bottom" title="Upload Image" name="file" id="file" >
</div>
<input name="id" type="hidden" value="<?php echo $result->id; ?>"
id='product_id'>
<input name="table" type="hidden" value="results" id="table">
</form>
</div>
</div>
</div>
Related
my edit and delete query only work on the first page of datatables, but not on the second page.
i'm using ajax and jquery. i'm new and this is for my project in college. thanks for helping me.
here's the code.
<script>
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_modal").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_delete").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<button type="button" data-toggle="modal" data-target="#tambah" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> Tambah User</button>
</br>
</br>
<?php include"alert.php"; ?>
<table id="example1" class="table table-bordered table-striped" >
<thead>
<tr>
<th>Nomor</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Password</th>
<th>Level</th>
<th>Nama Toko</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include "connection.php";
$query_mysql = mysqli_query($connection,"SELECT username, password, level, nama_lengkap, status, nama_toko FROM master_user INNER JOIN master_toko ON master_user.id_toko = master_toko.id_toko where status='0'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql)){
?>
<tr>
<td><?php echo $nomor++; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['nama_lengkap']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['level']; ?></td>
<td><?php echo $data['nama_toko']; ?></td>
<td>
</span>Edit |
</span>Hapus
</td>
</tr> <?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- FOR EDIT AND DELETE -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
and this is for edit
i reference the username because username is my primary key
here the code
include "connection.php";
$username = $_GET['username'];
echo $username;
$ambildata = mysqli_query($connection,"select * from master_user where username='$username'");
while($row= mysqli_fetch_array($ambildata)){
?>
<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" id="myModalLabel">Edit User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="proses_edituser.php" name="modal-popup" enctype="multipart/form-data" method="POST" id="form-edit">
<div class="form-group">
<label class=" control-label col-md-3">Username</label>
<div class="col-md-9">
<input class="form-control" type="text" name="username" value="<?php echo $row['username']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Nama Lengkap</label>
<div class="col-md-9">
<input class="form-control" type="text" name="nama_lengkap" value="<?php echo $row['nama_lengkap']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input class="form-control" type="password" name="password" value="<?php echo $row['password']; ?>"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Level</label>
<div class="col-md-9">
<select name="level" class="form-control">
<option value=''>--Select--</option>
<option value='owner' <?php if ($row['level']=='owner'){echo"SELECTED";}?>>Owner</option>
<option value='manajer' <?php if($row['level'] == 'manajer'){ echo "SELECTED"; } ?>>Manajer</option>
<option value='bendahara' <?php if($row['level'] == 'bendahara'){ echo "SELECTED"; } ?> >Bendahara</option>
<option value='administrator' <?php if($row['level'] == 'administrator'){ echo "SELECTED"; } ?>>Administrator</option>
</select>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Toko</label>
<div class="col-md-9">
<select name="id_toko" class="form-control">
<option value="">-- Pilih Toko --</option>
<?php
require "connection.php";
$datatoko = "SELECT * FROM master_toko ORDER BY id_toko ASC";
$resultsql = mysqli_query($connection, $datatoko);
if (mysqli_num_rows($resultsql) > 0) {
while ($row = mysqli_fetch_assoc($resultsql)) {
echo "<option value='$row[id_toko]'>$row[nama_toko]</option>";
// $nama_toko = $row['nama_toko'];
//echo '<option value="'.$row['id_toko'].'">'. $nama_toko.'</option>';
}
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" value="Simpan"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>
</div>
</form>
<?php
}
?>
</div>
</div>
</div>
The issue is because the html for these buttons are rendered again & previous event attached to these are not found. So you need to add the events for newly elements also. One good solution is to use jQuery on method to attach the event on dynamic elements as well. Use the below code to check
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_modal', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_delete', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
The following is a simplified example of what i try:
When a user enter a number higher than 0 in the first shown form-field named "wz", a new form with a button will be inserted by ajax. When entering a number higher than 0 another form with another button will be inserted.
The first ajax call works well, but i have problems with the inserted button and the new input fields. One input field is readonly and holds only the value of the actual datetime (for the sql db later..), the other is for entering Initials.
When no Initials are entered in the input field "abbau_ma" and the ABBAU button is clicked, the ajax call shows the datetime and the value of "wz" in the 2nd message area with id="ajax-abbau". If Initials are entered additionally, the page will be reloaded and no error or data is shown !?.
Here is the simplified code:
index.php:
<div class="container ">
<div class="row">
<div class="container">
<form id="my-form" action="" novalidate="" method="post">
<div class="row">
<div class="form-group col-6 col-lg-4">
<label for="wz" class="form-control-label">Werkzeug-Nr.</label>
<input type="text" name="wz" class="form-control form-control-lg col-12" minlength="1" maxlength="5" pattern="\d*" placeholder="123-1" autofocus required>
</div>
<div class="form-group col-6 col-lg-4">
<button type="submit" class="btn btn-lg btn-info border btn-search col-12" style="margin-top:32px"><i class="fas fa-search"></i><b></b></button>
</div>
</div>
</form>
</div>
<div class="col-12 col-lg-8">
<div class="card bg-light" style="margin-top:20px">
<div class="card-body text-left">
<p class="card-text" id="input-fields">Place for the (search-)ajax-result</p>
</div>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="card bg-light" style="margin-top:20px">
<div class="card-body text-left">
<p class="card-text" id="ajax-abbau">Place for the 2nd ajax-result</p>
</div>
</div>
</div>
</div>
</div>
js part of index.php:
<script>
$(document).ready(function() {
$("#my-form").submit(function(e) {
e.preventDefault();
$.ajax( {
url: "wz-produktion-input-fields.php",
method: "post",
data: $("form").serialize(),
dataType: "text",
success: function(strMessage1) {
$("#input-fields").html(strMessage1);
console.log(strMessage1);
//$("#my-form")[0].reset();
}
});
});
});
function myFunctionABBAU() {
//alert("ABBAU button clicked");
$.ajax( {
url: "abbau_sql.php",
method: "post",
data: $("form").serialize(),
dataType: "text",
success: function(strMessage1) {
$("#ajax-abbau").html(strMessage1);
console.log(strMessage1);
//$("#my-form")[0].reset();
}
});
};
</script>
wz-produktion-input-fields.php
<?php
header('Content-type: text/html; charset=utf-8');
error_reporting (E_ALL);
ini_set ('display_errors', 'On');
$wz = $_POST['wz'];
$datetimenow = date('Y-m-d H:i');
if ($wz > 0)
{
//$form_ist_aufgebaut = "true";
echo nl2br("<div class='' id='aufbau_abbau_inputs'>");
echo nl2br("<form id='my-form' action='' method='post'>");
echo nl2br("<div class='row'>");
echo nl2br("<div class='form-group col-6 col-lg-4'>");
echo nl2br("<label for='abbau_ma' class='form-control-label'>Enter Initials</label>");
echo nl2br("<input type='text' name='abbau_ma' class='form-control form-control-lg col-12' minlength='1' maxlength='2' placeholder='z.B. LK' required>");
echo nl2br("</div>");
echo nl2br("<div class='form-group col-6 col-lg-4'>");
echo nl2br("<input type='text' name='abbau' class='form-control form-control-lg col-12 text-danger' value='$datetimenow' readonly>");
echo nl2br("</div>");
echo nl2br("<button onclick='myFunctionABBAU()' id='ab-bau' class='btn btn-lg btn-success col-12'>Abbau</button>");
echo nl2br("</div>");
echo nl2br("</form>");
echo nl2br("</div>");
}
else
{
//$form_ist_aufgebaut = "false";
echo nl2br("<button onclick='myFunctionAUFBAU()' class='btn btn-lg btn-info col-12'>Aufbau</button>");
}
?>
abbau_sql.php:
<?php
header('Content-type: text/html; charset=utf-8');
error_reporting (E_ALL);
ini_set ('display_errors', 'On');
$wz = $_POST['wz'];
$abbau = $_POST['abbau'];
$abbau_ma = $_POST['abbau_ma'];
echo nl2br("$wz" . "\n");
echo nl2br("$abbau" . "\n");
echo nl2br("$abbau_ma" . "\n");
?>
Updated answer as per comment solution:
function(e) was added to work with above code.
$(document).on("submit", "#my-form", function(e){
//Code: Action (like ajax...)
})
instead of
$("#my-form").submit(function(e) {
Please help, I have trouble in this Jquery onclick at my form, Why my data from database can't show ? example, I choose a category "jantung", that should be show data dokter where category is jantung, but if I use onchange at the form it's work.
This is a html where I click the category (if click this category will show the modal)
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link" data-toggle="modal" href="#poliklinikModal1" onclick="hmm('<?=$row->id_poli?>')">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
<br>
<br>
</div>
<?php endforeach; ?>
And This
<script>
function hmm(idnya) {
$(document).ready(function(){
document.getElementById('poli').value=idnya;
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
</script>
The Modal
<?php echo form_open('hal_user/add/')?>
<div class="form-group">
<label>Nama</label>
<input type="hidden" name="id_pasien" class="form-control" readonly="" value="<?=$this->session->userdata('id_pasien') ;?>">
<input type="text" name="nama_pasien" class="form-control" readonly="" value="<?php echo $this->session->userdata('nama_pasien') ; ?>">
</div>
<div class="form-group">
<label>Poli</label>
<select name="id_poli" id="poli" class="form-control">
<option value="">Select Poli</option>
<?php foreach ($poli as $p): ?>
<option value="<?php echo $p->id_poli;?>"><?php echo $p->nama_poli;?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Dokter</label>
<select name="id_dokter" id="dokter" class="form-control" disabled="">
<option value="">Select Dokter</option>
</select>
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" name="tanggal" placeholder="Pilih Tanggal">
</div>
<div class="form-group">
<label>Waktu</label>
<a class="btn btn-primary form-control" data-toggle="collapse" href="#waktuanak" role="button" aria-expanded="false" aria-controls="collapseExample">
Pilih Waktu
</a>
<div class="collapse" id="waktuanak">
<div class="card card-body">
<div class="btn-group-toggle" data-toggle="buttons">
<?php foreach ($waktu as $row) :?>
<label class="btn btn-outline-primary">
<input type="radio" name="id_waktu" autocomplete="off" value="<?php echo $row->id_waktu; ?>"><?php echo $row->waktu;?>
</label>
<?php endforeach;?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-wd">Simpan</button>
Batal
</div>
<?php echo form_close(); ?>
Try this
On your view file no need to call function and try to use data-attr and add a class hmm on
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link hmm" data-toggle="modal" href="#poliklinikModal1" data-attr="<?=$row->id_poli?>">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
</div>
<?php endforeach; ?>
On your jquery try this
<script>
$(document).ready(function(){
$('.hmm').on('click',function(){
var idnya = $(this).attr('data-attr');
$('#poli').val(idnya );
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
Updated
$("#poli option[value='" + idnya+ "']").prop("selected", true);
I am using Laravel, I have a following data view
<div class="content-inside-main">
<div class="content-inside" id="content-inside-feedback">
<div class="row header-content space-div">
<div class="col-lg-1"><h5>#</h5></div>
<div class="col-lg-1"><h5>Member Id</h5></div>
<div class="col-lg-4"><h5>Question</h5></div>
<div class="col-lg-4"><h5>Reply</h5></div>
<div class="col-lg-1"><h5>Replied by</h5></div>
<div class="col-lg-1"><h5>Options</h5></div>
</div>
<div>
<hr class="line-div"/>
</div>
<?php
$questions= \App\Question::all();
?>
<?php
foreach ($questions as $question):
$id = $question->id;
$member_id = $question->user_id;
$body = $question->message;
$status=$question->replied;
$reply=$question->reply;
$user_id=$question->replied_id;
$member=\App\Member::find($member_id);
$m_id=$member->id;
$m_name=$member->nick_name;
$m_reg_time=$member->reg_time;
$m_unreg_time=$member->unreg_time;
$m_status=$member->unreg;
$m_group_id=$member->group;
$group=\App\Group::find($m_group_id);
$m_group_name=$group->name;
if($id != NULL) {
?>
<div class="row content-messages" >
<input type="hidden" id="count" value="{{$id}}"/>
<div class="col-lg-1"><?php echo $id; ?></div>
<div class="col-lg-1"><?php echo $member_id; ?></div>
<div class="col-lg-4"><?php echo $body; ?></div>
<div class="col-lg-4">
<?php
if($status == 0){
?>
<div class="according-form-container" id="reply-feedback-form_<?php echo $id; ?>">
<a class="btn-link show-add-form-div" data-toggle="collapse" data-parent="#reply-feedback-form_<?php echo $id; ?>" href="#reply-feedback-form_content_<?php echo $id; ?>" >
Reply
</a>
<div id="reply-feedback-form_content_<?php echo $id; ?>" class="collapse collapse-add-form">
<form class="form" id="reply-feedback_<?php echo $id; ?>" enctype="multipart/form-data" method="post" action="addreply">
{{csrf_field()}}
<div class="control-group">
<label class="control-label" for="description">Message: </label>
<div class="controls">
<input type="hidden" name="id" id="id" value="{{$id}}"/>
<input type="hidden" name="member_id" id="member_id" value="{{$member_id}}"/>
<input type="hidden" name="user_id" id="user_id" value="{{Auth::id()}}"/>
<textarea name="description" id="feedback-message_<?php echo $id; ?>" class="input-block-level" required></textarea>
<br/><br/>
<button id="submitfeedback_<?php echo $id . '_' . $member_id; ?>" type="submit" class="btn feedback-reply-submit-btn">Send</button>
</div>
</div>
</form>
<div id='preview_feedback_<?php echo $id; ?>'>
</div>
</div>
</div>
<?php
} else {?>
<div class="col-lg-4">{{$reply}}</div>
<?php
}
?>
</div>
<div class="col-lg-1">
<?php
if($user_id != null){
$user_name= DB::table('admin')->where('id',$user_id)->value('name');
echo $user_name;
}else {
echo 'None';
}
?>
</div>
<div class="col-lg-1">
<button id="view_member" name="view_member" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#view_memeber"
>View
</button>
</div>
</div>
<hr class="line-div" />
<?php
}
endforeach;
?>
<div id="show"></div>
<div class="text-center navigation-paginator" id="paginator" >
</div>
</div>
I have another application.It fill question table anytime.I want to do If question table have new records,show them in this page without refreshing.
Like following screenshots:
before
after
You could send periodical ajax calls and then compare the results with the data you already have to add the new values. It could be something along this lines:
function query() {
$.ajax({
url: 'your/url',
success: function(data) {
var loadedValues = JSON.parse(data).values;
// Iterate only in the new values
for(i = existingValues.length; i < loadedValues.length; i++) {
$("#content-inside-feedback").append(/*HTML you want to add*/);
}
}
});
setTimeout(executeQuery, 5000);
}
$(document).ready(function() {
// First call, then it will be called periodically
setTimeout(query, 5000);
});
My ajax success function doesn't execute the script after it has sent the data to my database, the data saves fine on my database but after that everything stops there. What might be wrong?
Javascript Code:
$(document).ready(function() {
$(".wall_update").click(function() {
var element = $(this);
var boxval = $("#content").val();
var dataString = 'content=' + boxval;
$("#form1").validationEngine({
type: "POST",
ajaxSubmit: true,
ajaxSubmitFile: "update_ajax.php",
cache: false,
success: function(html) {
alert('success');
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value = '';
$('#content').value = '';
$('#content').focus();
$("#flash").hide();
}
});
});
});
update_ajax.php
<?php
include("db.php");
include("tolink.php");
if(isSet($_POST['content']))
{
$id=time();//Demo Use
$msg=$_POST['content'];
$date=date("M j, Y ");
$sql=mysql_query("insert into appointments(message,date_sent)values('$msg','$date')");
$result=mysql_query("select * from appointments order by msg_id desc");
$row=mysql_fetch_array($result);
$id=$row['msg_id'];
$msg=$row['message'];
$date=$row['date_sent'];
$msg= nl2br($msg);
$msg="<br>{$msg}<br>{$date}";
}
?>
<li class="bar<?php echo $id; ?>">
<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg; ?> </span>
<span class="delete_button">X</span>
<span class='feed_link'>comment</span>
</div>
<div id='expand_box'>
<div id='expand_url'></div>
</div>
<div id="fullbox" class="fullbox<?php echo $id; ?>">
<div id="commentload<?php echo $id; ?>" >
</div>
<div class="comment_box" id="c<?php echo $id; ?>">
<form method="post" action="" name="<?php echo $id; ?>">
<textarea class="text_area" name="comment_value" id="textarea<?php echo $id; ?>">
</textarea><br />
<input type="submit" value=" Comment " class="comment_submit" id="<?php echo $id; ?>"/>
</form>
</div>
</div>
</li>
HTML script
<div align="left">
<form method="post" name="form" action="" id="form1">
<table cellpadding="0" cellspacing="0" width="500px">
<tr><td align="left"><div align="left"><h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea class="validate[custom[last]] text-input" cols="30" rows="10" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" ></textarea><br />
<input type="submit" value="Update" name="submit" class="wall_update"/>
</td>
</tr>
</table>
</form>
</div>
<ol id="update" class="timeline">
// Display here after sending data to the database
</ol>
$('#content').value = '';
jQuery doesn't have a value property, you should use val:
$('#content').val('');
value is a property of the DOM Input object.