How can I pass the value of my "ACTIVE" status attribute to my textbox? My goal is to update the status of my user by pressing ACTIVE button. Knowing that the user status is pending. I can easily pass the userID, but I'm having a problem in regards of passing the status.
I have provided screenshot below.
Views:
<button data-id="<?php echo $rows->transID?>" ustatus="Active" class="showmodal" class="fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> active
</button> // I can pass the ID to my textbox easily, but the status is not working.
<div id="fundModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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 action="#">
<div class="form-group">
<label for="">UserID</label>
<input type="text" id="usertransferid">
</div>
<div class="form-group">
<label for="">status</label>
<input type="text" name="status" id="user_status" value="">
</div>
</form>
</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 changes</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('.showmodal').on('click', function(e){
e.preventDefault();
$('#usertransferid').val(this.dataset.id);
$('#fundModal').modal('show')
})
$('#fundModal').on('hidden.bs.modal', function () {
$('#usertransferid').val('')
$('#ustatus').val('')
})
</script>
<script type="text/javascript">
$(document).on('click','.user_status',function(){
var status = $(this).attr('ustatus');
//get attribute value in variable
$('#user_status').val(status); //I tried passing the user status but it's not working
});
</script>
Controller:
public function user_status_changed()
{
//get hidden values in variables
$id = $this->input->post('id');
$status = $this->input->post('status');
$data = array('status' => $status );
$this->db->update('users', $data); //Update status here
//Create success message
$this->session->set_flashdata('msg',"User status has been changed successfully.");
$this->session->set_flashdata('msg_class','alert-success');
return redirect('welcome/users');
}
You don't get the status updated, because you getting undefined with $(this).attr('ustatus');
That's because $(this) points to the class user_status, which doesn't have an attribute ustatus
What you want is the value of the attribute ustatus of your button, which has a class showmodal, so you need to change your code to:
$(document).on('click','.user_status',function(){
var status = $('.showmodal').attr('ustatus'); // check the change here
$('#user_status').val(status);
});
P.S: in your button definition, you are using class="..." twice, which is faulty. Just do:
<button data-id="<?php echo $rows->transID?>" ustatus="Active" class="showmodal fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> active
</button>
Related
I have a function where I add shops. In this function, I can select whether the shop is OPEN or CLOSE. My target is, on my other modal,
when I create a user and selected the shop I created, The status of
the shop whether OPEN or CLOSE will appear on my textbox.
I provided my codes below and my screenshot. Any help will be appreciated
HTML:
<div class="col-md-3 float-left mb-2" >
<button type="button" class=" btn-block btn bbutton text-bold btn-lg" data-toggle="modal" data-target="#accountModal"
data-id="<?php echo $_SESSION['uid']?>" data-user="<?php echo $_SESSION['username']?>"
Edit <?php echo $_SESSION['uid']?>>
Add User
</button>
<div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-image: linear-gradient(90deg, #00e6ac, #1f9388);">
<h5 class="modal-title text-bold" id="exampleModalLabel">Add Users For shop</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body bg-white">
<form id="createAccount">
<div class="form-group" >
<label>Company</label>
<select class="form-control" name="nameofshop" required>
<option value="">No Selected</option>
<?php
foreach($category as $row):?>
<option value="<?php echo $row->shopName;?>"><?php echo $row->shopName;?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">status:</label>
<label class="container">Open
<input type="radio" name="status" value="open">
</label>
<label class="container">Close
<input type="radio" name="status" value="close">
</label>
</div>
</div>
<button type="submit" class="btn btn btn-dark btn-flat float-right" value="">Submit</button>
</form>
</div>
</div>
</div>
</div>
I would listen to any change in the shop input field using javascript. Whenever an option is selected, I would take that option's value (let's say "icecreamshop" for instance), and get the status of that shop from the model. When you finally get that "close" status, you can then insert it manually into the second input field.
An example using jQuery:
let shopField = $('#shop-field');
let statusField = $('#status-field');
shopField.change(() => {
let status = findShopStatus($(this).val());
statusField.val(status);
});
where findShopStatus is a function that gets the status of a shop by its name from the model.
I am using mbd material design angular7 template. I have a set of tasks that has an edit button each. When i click on the Edit button a modal opens up. I want this modal to have the existing values of the field. I can be done through formControlName. But it is not happening.I click on the edit button and on that click function , i assign the values before opening the edit Modal. However, they don't fill the text boxes in the modal. In console it appears before i click the modal button. Please help
app.component.ts
openEditModal(taskIdValue:number){
console.log("Task Id Value = ", taskIdValue)
for(var i = 0 ; i<this.result.length ; i++){
if(this.result[i].taskId == taskIdValue ){
console.log("this.result[i] = ", this.result[i])
localStorage.setItem('editTaskId',this.result[i].taskId);
localStorage.setItem('editTaskName',this.result[i]. taskName);
}
}
this.editTaskId = localStorage.getItem('editTaskId')
this.editTaskName = localStorage.getItem('editTaskName')
$('#editModal').click();
this.displayEdit = true;
}
editTask(){
console.log("this.result.taskId", )
}
app.component.html
<td>
<button class = "btn btn-primary waves-light"
(click)="openEditModal(data.taskId)">Edit</button>
<button type="button" id = "editModal" style =
"visibility:hidden" class="btn btn-primary waves-light" data-
toggle="modal" data-target="#EditExample"
(click)="centralLarge.show()" mdbWavesEffect>
Edit
</button>
<div mdbModal #centralLarge="mdb-modal" class="modal fade"
id="EditExample" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
[config]="{backdrop: true, ignoreBackdropClick: false}">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Edit
Data</h4>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close" (click)="centralLarge.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" *ngIf = "displayEdit">
<div>
<div>
<form (ngSubmit)="editTask(editTaskForm.value)"
[formGroup]="editTaskForm">
<div class="form-group">
<label>Task Id : </label>
<input type="text" maxlength="100"
class="form-control" placeholder="Enter Task Id "
formControlName="editTaskId"
[formControl]="editTaskForm.controls['editTaskId']"
required>
</div>
<div class="form-group">
<label>Task Name : </label>
<input type="text" maxlength="1000"
class="form-control" placeholder="Enter Task Name "
formControlName='editTaskName'
[formControl]="editTaskForm.controls['editTaskName']"
required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
secondary btn-sm waves-light" data-dismiss="modal"
(click)="centralLarge.hide()"
mdbWavesEffect>Close</button>
<button type="submit"
[disabled]="!editTaskForm.valid" class="btn btn-primary btn-sm
waves-
light"
(click)="centralLarge.hide()"
mdbWavesEffect>Save </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
You'd better use [(ngModel)] with your object maybe, your typescript code is not clear enough with the way you build editTaskForm, so I suggest to organize the code clearly, and step by step, you will get it working.
Greetz!
you can set the previous value by using this.formGroupname.patchValue({}), For example
this.form.patchValue({ fullname1: this.fullname1, });
I have a dynamically created table and onclick of button in a row a modal opens like this:
If I type anything then it must show alert...
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" class="form-control input-md message"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength()">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
function checkLength(){
var textbox = document.getElementsByClassName("message");
console.log(textbox.value);
if(textbox.value.length <= 100 && textbox.value.length >= 0){
}
else{
alert("Make sure the input is between 1-100 characters long")
}
}
console.log is printing value as undefined...I am using get elements by classname as their is duplicacy if i use Id..What is the actual problem?
getElementsByClassName gets all elements having a particular class. To get access to message textarea, you need to change the following code:
var textbox = document.getElementsByClassName("message");
to
var textbox = document.getElementsByClassName("message")[0];
getElementsByClassName returns not just one element, but an array-like of elements. Try doing textbox[0].value.
try this JS code:
function checkLength(that){
var textbox = that.parentNode.parentNode.getElementsByClassName("message")[0];
console.log(textbox.value);
if(textbox.value.length <= 100 && textbox.value.length >= 0){
}
else{
alert("Make sure the input is between 1-100 characters long")
}
}
And in your HTML pass the parameter this in function checkLength(this).
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)">Accept</button>
Here am I updating the data through modal and its working but the thing is, I want to show the selected data as selected. The update function is working but not getting idea for the value to be selected.
Here is my view
<td><a class="btn btn-primary vehicle_user" data-toggle="modal" data-target="#myModaledit" id="<?php echo $row->id;?>" vehicle="<?php echo $row->vehicle_id; ?>">Edit</a></td>
This is my modal
<div class="modal fade" id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 Vehicle</h4>
</div>
<form action="<?php echo base_url();?>vehicle/vehicle_control/edit_vehicle_user" method="post">
<div class="modal-body">
<div class="form-group">
<label for="vehicle" class="control-label">Vehicle:</label>
<select name="vehicle" class="form-control">
<?php foreach($vehicles as $res){?>
<option <?php if($res->id==$row->vehicle_id)echo 'selected' ?> value="<?php echo $res->id;?>"><?php echo $res->name;?></option>
<?php }?>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" value="" id="vehicle_user_id">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Here is my jQuery script
$(document).ready(function() {
$(".vehicle_user").click(function() {
var id = $(this).attr('id');
//alert(id);
$("#vehicle_user_id").val(id);
$("#vehicle").val($(this).attr('vehicle'));
});
});
As you not specified the ID attribute. You need to use Attribute Selector to target the vehicle drop-down element.
$("[name='vehicle']").val($(this).attr('vehicle'));
OR, Set the ID attribute of vehicle drop-down element.
<select id="vehicle" name="vehicle" class="form-control">
</select>
I have a form inside a bootstrap modal that I want to submit via an Ajax request. I've followed along closely with this post. For some reason, I can't get the form to actually submit. Here's the HTML for my modal.
<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="modal-form-close" method="post">
<input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
<input type="hidden" name="event_desc" value="{{event.desc}}">
<input type="hidden" name="status" value="closed">
<input type="text" name="resolution" value="">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
</div>
</div>
</div>
</div>
And here's my JavaScript:
<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
e.preventDefault();
$.ajax({
url: '/events/edit/{{event.event_id}}/script',
data: $('#modal-form-close').serialize(),
type: 'POST',
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
</script>
With the javascript written this way, nothing ever happens when I press submit the form. However, if I change the function to .on('click'), things work as expected. What am I missing?
Found the answer here.
I needed to wire the "click" action back to the submit button.
$('button#submit').on('click', function(e){
And add an id=submit to the submit button
<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
It's amazing how far you can get copy-pasting code from stack overflow.
Try to add this type in your button
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
I do this:
give a form an ID <form id="submit_modal">
make a button type="button" and tells him what to do when click onClick="document.getElementById('submit_modal').submit();". So the submit button will looks like this :
<button type="button" class="btn btn-primary" onClick="document.getElementById('submit_modal').submit();">Submit</button>