Develop Reference

ajax response not proper binding in select option value jQuery

I'm trying to get value from ajax to HTML but it's not correctly binding in the dropdown even I tried in the textbox it's not showing. I tried to add some static value it's also not showing.
Ajax response is properly getting in the console but when I am trying to bind in the HTML its not show proper.
HTML code:
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1" id="defaultModalLabel"></h4>
</div>
<div class="modal-body">
<form method="POST" action="" accept-charset="UTF-8" >
<label>Room Type</label>
<h1 class="modal-title1" ></h1>
<!-- <input type="text" class="apple"> -->
<select class="apple" tabindex="-98">
<option>-Select Room type-</option>
</select>
<div class="modal-footer">
<input class="btn btn-lg bg-indigo waves-effect" type="submit" value="SAVE">
<button class="btn btn-lg bg-black waves-effect" data-dismiss="modal" type="button">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
</div>
JQuery code:
$(document).off('click', '.hotel_add').on('click', '.hotel_add', function () {
var id = $(this).attr('id');
var pos = $(this).closest('.hotel-result').data('pos-id');
$.get("<?php echo base_url('hotel/hotelDataGet') ?>/" + id + '/' + pos, function (result) {
var data = JSON.parse(result)
$.each(data,function(index,value){
console.log(value);
$('#defaultModalLabel').html(value.hotel_name);
$('.apple').append('
<option value="'+value['roomtype']+'">'+value['roomtype']+'</option>
');
});
$("#largeModal").modal();
//debugger;
});
});
AJAX response
[
{
"id": "1",
"hotel_name": "Hotel Bharat",
"room_type": "4,1,2",
"cp_price": "98"
},
{
"roomtype": "Deluxe Room"
},
{
"roomtype": "Luxury Room"
},
{
"roomtype": "Family room"
}
]

hotel_name only exists on the first object of your response, and the roomtype does not exist in your fist object, so you can change to this:
$.each(data,function(index,value){
//check to see if this object has the property "hotel_name"
if(value.hasOwnProperty("hotel_name"){
$('#defaultModalLabel').html(value.hotel_name);
}
//check to see if this object has the property "roomtype"
if(value.hasOwnProperty("roomtype") {
$('.apple').append(
'<option value="' +
value['roomtype'] +
'">' +
value['roomtype'] +
'</option>'
);
}
});

How to I use get document.getElementById for changing button div

My code is
<div class="flex-shrink-1 " id="request_btn<?= $contact['id'] ?>">
<button data-request-to="<?= $contact['id'] ?>" data-request-from="<?= $_SESSION['id'] ?>" class="btn btn-sm btn-primary send_request" >Send Request
</button>
</div>
<div class="flex-shrink-1 " id="del_request<?= $contact['id'] ?>">
<button data-request-to="<?= $contact['id'] ?>" data-request-from="<?= $_SESSION['id'] ?>" class="btn btn-sm btn-danger del_request" style="display:none;">Reject Request
</button>
</div>
I want to use in JavaScript
document.getElementById("del_request[int_values]").setAttribute('style','display:none');
document.getElementById("del_request[int_values]").removeAttribute('style');
and
document.getElementById("send_request[int_values]").setAttribute('style','display:none');
document.getElementById("send_request[int_values]").removeAttribute('style');
I hope you will understand, How can I add send_request[int_values] in javascript

you can do something like
var a = [int_values] // for multiple values, can be taken as input of a function
var elementId = "send_request" + a ;
document.getElementById(elementId)

javascript functions stop working after writing another function in the same script

Im doing am employee leave management system. The approve and disapprove buttons were working fine in the beginning. But after writing the code to show employee details in the same modal, the approve and disapprove buttons stopped working. Now it gives error. Does anyone have an idea on whats wrong?
controller
//admin approve leave
public function approveLeave() {
$id = $this->input->post('id');
$result = $this->Admin_Model->approve($id);
if(!$result){
// something went wrong
$data = array(
"value" => $id,
"error" => true,
"msg" => "something went wrong"
);
$this->output
->set_content_type('application/json')
->set_output(json_encode($data));
return;
}
// approved leave
$data = array(
"value" => $id,
"error" => false,
"msg" => "successfully updated"
);
$this->output
->set_content_type('application/json')
->set_output(json_encode($data));
}
modal
<!-- Modal -->
<div class="modal fade" id="pendingLeaveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Leave Request</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="leave_details" >
<p> </p>
</div>
<div class="modal-footer">
<input type="hidden" name="current_leave_id" id="current_leave_id" value="" />
<button type="button" id="declinebtn" class="btn btn-secondary" data-dismiss="modal">Decline</button>
<button type="button" id="approvebtn" class="btn btn-primary">Approve</button>
</div>
</div>
</div>
</div>
javascript
<script>
$(function(){
var BASE_URL = "http://localhost/employeemgt/index.php/";
$('#pendingLeaveRequest').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var current_leave_id = button.data('id');
var modal = $(this);
modal.find('input[name="current_leave_id"]').val(current_leave_id);
});
//approve button
$('#approvebtn').click(function(){
var id = $('input[name="current_leave_id"]').val();
$.post(BASE_URL + 'admin/AdminDashboardController/approveLeave',
{'id': id},
function(result){
console.log(result);
if(result.error){
alert('try again');
}else{
alert('Leave has been approved!');
}
});
});
//disapprove button
$('#declinebtn').click(function(){
var id = $('input[name="current_leave_id"]').val();
$.post(BASE_URL + 'admin/AdminDashboardController/disapproveLeave',
{'id': id},
function(result){
console.log(result);
if(result.error){
alert('try again');
}else{
alert('Leave has been disapproved!');
}
});
});
});
//show leave details on modal
$('.detailButton').on('click', function(){
var BASE_URL = "http://localhost/employeemgt/index.php/";
var leave_id = $(this).val();
var i;
$.ajax({
type: 'POST',
dataType: "JSON",
data:{leave_id:leave_id},
url: BASE_URL + 'admin/AdminDashboardController/viewRequest',
success:function(data){
console.log(data);
$('#leave_details').html("<p>" + "Name: " + data[0].user_name + "</p>" +
"<p>" + "Leave Type: " + data[0].leave_type + "</p>" +
"<p>" + "Start Date: " + data[0].leave_start + "</p>" +
"<p>" + "End Date: " + data[0].leave_end + "</p>");
$('#pendingLeaveRequest').modal('show');
},
error:function(error){
alert(error);
}});
});
</script>
view
<div id="showleave">
<h4 class="mb-4">Pending Requests</h4>
<?php
foreach ($leave as $row) {
if($row->status != "1")
{
echo '
<ul class="list-unstyled">
<li class="media border-bottom border-top py-3">
<img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">'.$row->user_name.'</h5>
<p class="mb-0 mt-0">'.$row->leave_start.' to '.$row->leave_end.'</p>
<p class="mt-0">'.$row->leave_type.'</p>
<button type="button" class="detailButton" href="<?php echo $id; ?>" data-id="'.$row->id.'" data-name="'.$row->user_name.'" data-toggle="modal" value="'.$row->id.'">View Request</button>
</div>
</li>
</ul>
';
}
}
?>
</div>

Use
$(document).on('click','#declinebtn',function(){}) instead of $('#declinebtn').click(function(){}) .
change your view code like this :
<div id="showleave">
<h4 class="mb-4">Pending Requests</h4>
<?php
foreach ($leave as $row) {
if($row->status != 1)
{
?>
<ul class="list-unstyled">
<li class="media border-bottom border-top py-3">
<img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1"><?= $row->user_name ?></h5>
<p class="mb-0 mt-0"> <?= $row->leave_start.' to '.$row->leave_end ?></p>
<p class="mt-0"><?= $row->leave_type ?></p>
<button type="button" class="detailButton" href="<?php echo $row->id; ?>" data-id="<?= $row->id ?>" data-name="<?= $row->user_name ?>" data-toggle="modal" value="<?= $row->id ?>">View Request</button>
</div>
</li>
</ul>
<?php
}
}
?>
By this I think your problem will be solve

Try this.
$(document).on("click", "#approvebtn", function(event){
// your code here
});
And you can also try triggering your btn from browser console to check if it works.

How do I detect the id of a currently displayed element using Javascript?

I am basically using Gmail API to create send and reply to functionalities for myself. The problem is in the reply section. I am using jQuery to dynamically create divs for every message that appears in my inbox (max-count:10) and a separate set of divs (any single one to appear on clicking a mail link) wherein for each div, I am having the modal-header div for the subject, reply and close buttons whereas a modal-body div with an iframe for displaying the content.
var message1;
function appendMessageRow(message) {
$('.table-inbox tbody').append(
'<tr>\
<td>' + getHeader(message.payload.headers, 'From') + '</td>\
<td>\
<a href="#message-modal-' + message.id +
'" data-toggle="modal" id="message-link-' + message.id + '">' +
getHeader(message.payload.headers, 'Subject') +
'</a>\
</td>\
<td>' + getHeader(message.payload.headers, 'Date') + '</td>\
</tr>'
);
$('body').append(
'<div class="modal fade" id="message-modal-' + message.id +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title" id="myModalLabel">' +
getHeader(message.payload.headers, 'Subject') +
'</h4>\
<button type="button"\
class="close"\
data-dismiss="modal"\
aria-label="Close" style="float:right;">\
<span aria-hidden="true">×</span></button>\
<span></span>\
<a data-toggle="modal" href="#reply-modal" id="reply-button" class="btn btn-primary">Reply</a>\
</div>\
<div class="modal-body">\
<iframe id="message-iframe-' + message.id + '" srcdoc="<p>Loading...</p>">\
</iframe>\
</div>\
</div>\
</div>\
</div>'
);
$('#message-link-' + message.id).on('click', function() {
var ifrm = $('#message-iframe-' + message.id)[0].contentWindow.document;
$('body', ifrm).html(getBody(message.payload));
message1 = message;
});
$('#reply-button).on('
click ',function(){
$("#reply-to").val(getHeader(message1.payload.headers, 'From')); $("#reply-subject").val('RE: ' + getHeader(message1.payload.headers, 'Subject')); $("#message-modal-" + message1.id).fadeOut(); $('div.modal-backdrop.fade.in').fadeOut();
});
}
I intend to use the Reply button to call a function which will fill the 'To' and 'Subject' field in the reply-modal(Reply button is an a tag with href=#reply-modal) that'd be visible after the message-modal-message.iddiv fades out. The problem is I am unable to get the id of this div which I need to fade out (along with that greyish background).
Also if you can see I need the whole message object and just not the message.id of the clicked message link so that I can transfer 'To' and 'Subject' to the newly appeared reply-modal div. But it just doesn't get the message.id of the clicked-on message but the last one in the list of mails displayed on the inbox page and so the #message-modal-message.id does not fade out as the message.id is not correct. Similarly, the 'To' and 'From' fields in the reply-modaldiv also contain information of the last mail in the list - doesn't matter which mail you've opened. Also as the message-modal-message.id div does not disappear, the reply-modal div appears behind it and I have to close the it div to see the reply-modal div.
I even tried having a JS function on the outside instead of the jQuery selector method $('#reply-modal').on('click',.. but couldn't do it.
Basically,
How do I get the message object after a message has been opened to view?

This is what exactly I was talking about. Sorry I couldn't paste the whole code in the questions too if that created some sort of confusion while trying to understand the question.
'Reply' button needs to be there for every message we add as divs to the display page, which also uses the two critical variables reply-to and reply-subject to pass the required data to the new reply form that opens up.
The closing of the 'Show message' div which was not possible earlier, was also linked to the message-id, which now becomes accessible.
Everything else is pretty neat; the functions required to send the reply are the same as sending a new email and are present at the very end of the code.
What I was unable to do was capture the message id of the currently displayed message on the click of "Reply" button. This is a "better" solution than a workaround, but man would it be shorter if I could have done what I'd have had wanted!
<!doctype html>
<html>
<head>
<title>Gmail API demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
iframe {
width: 100%;
border: 0;
min-height: 80%;
height: 600px;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1>Gmail API demo</h1>
<button id="authorize-button" class="btn btn-primary hidden">Authorize</button>
Compose
<table class="table table-striped table-inbox hidden">
<thead>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date/Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<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">Compose</h4>
</div>
<form onsubmit="return sendEmail();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="compose-to" placeholder="To" required />
</div>
<div class="form-group">
<input type="text" class="form-control" id="compose-subject" placeholder="Subject" required />
</div>
<div class="form-group">
<textarea class="form-control" id="compose-message" placeholder="Message" rows="10" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="send-button" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="reply-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<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">Reply</h4>
</div>
<form onsubmit="return sendReply();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="reply-to" required disabled/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="reply-subject" required />
</div>
<div class="form-group">
<textarea class="form-control" id="reply-message" placeholder="Message" rows="10" required></textarea>
</div>
</div>
<input type="hidden" id="reply-message-id" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="reply-button" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>
<script type="text/javascript">
var clientId = 'YOUR_CLIENT_ID.apps.googleusercontent.com';
var apiKey = 'YOUR_API_KEY';
var scopes = 'https://www.googleapis.com/auth/gmail.readonly';
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth, 1);
}
function checkAuth() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true
}, handleAuthResult);
}
function handleAuthClick() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult);
return false;
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
loadGmailApi();
$('#compose-button').removeClass("hidden");
$('#authorize-button').remove();
$('.table-inbox').removeClass("hidden");
} else {
$('#authorize-button').removeClass("hidden");
$('#authorize-button').on('click', function() {
handleAuthClick();
});
}
}
function loadGmailApi() {
gapi.client.load('gmail', 'v1', displayInbox);
}
function displayInbox() {
var request = gapi.client.gmail.users.messages.list({
'userId': 'me',
'labelIds': 'INBOX',
'maxResults': 10
});
request.execute(function(response) {
$.each(response.messages, function() {
var messageRequest = gapi.client.gmail.users.messages.get({
'userId': 'me',
'id': this.id
});
messageRequest.execute(appendMessageRow);
});
});
}
function appendMessageRow(message) {
var reply_to = (getHeader(message.payload.headers, 'Reply-to') !== '' ? getHeader(message.payload.headers, 'Reply-to') : getHeader(message.payload.headers, 'From')).replace(/\"/g, '"');
var reply_subject = 'Re: ' + getHeader(message.payload.headers, 'Subject').replace(/\"/g, '"');
$('.table-inbox tbody').append(
'<tr>\
<td>' + getHeader(message.payload.headers, 'From') + '</td>\
<td>\
<a href="#message-modal-' + message.id +
'" data-toggle="modal" id="message-link-' + message.id + '">' +
getHeader(message.payload.headers, 'Subject') +
'</a>\
</td>\
<td>' + getHeader(message.payload.headers, 'Date') + '</td>\
</tr>'
);
$('body').append(
'<div class="modal fade" id="message-modal-' + message.id +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title" id="myModalLabel">' +
getHeader(message.payload.headers, 'Subject') +
'</h4>\
<button type="button"\
class="close"\
data-dismiss="modal"\
aria-label="Close" style="float:right;">\
<span aria-hidden="true">×</span></button>\
<span></span>\
</div>\
<div class="modal-body">\
<iframe id="message-iframe-' + message.id + '" srcdoc="<p>Loading...</p>">\
</iframe>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
<button type="button" class="btn btn-primary reply-button" data-dismiss="modal" data-toggle="modal" data-target="#reply-modal"\
onclick="fillInReply(\'' + reply_to + '\',\'' + reply_subject + '\',\'' + getHeader(message.payload.headers, 'Message-ID') + '\');">Reply</button>\
</div> \
</div>\
</div>\
</div>\
</div>'
);
$('#message-link-' + message.id).on('click', function() {
var ifrm = $('#message-iframe-' + message.id)[0].contentWindow.document;
$('body', ifrm).html(getBody(message.payload));
});
}
function getHeader(headers, index) {
var header = '';
$.each(headers, function() {
if (this.name === index) {
header = this.value;
}
});
return header;
}
function getBody(message) {
var encodedBody = '';
if (typeof message.parts === 'undefined') {
encodedBody = message.body.data;
} else {
encodedBody = getHTMLPart(message.parts);
}
encodedBody = encodedBody.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
return decodeURIComponent(escape(window.atob(encodedBody)));
}
function getHTMLPart(arr) {
for (var x = 0; x <= arr.length; x++) {
if (typeof arr[x].parts === 'undefined') {
if (arr[x].mimeType === 'text/html') {
return arr[x].body.data;
}
} else {
return getHTMLPart(arr[x].parts);
}
}
return '';
}
function sendEmail() {
$('#send-button').addClass('disabled');
sendMessage({
'To': $('#compose-to').val(),
'Subject': $('#compose-subject').val()
},
$('#compose-message').val(),
composeTidy
);
return false;
}
function sendMessage(headers_obj, message, callback) {
var email = '';
for (var header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
var sendRequest = gapi.client.gmail.users.messages.send({
'userId': 'me',
'resource': {
'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
}
});
return sendRequest.execute(callback);
}
function fillInReply(to, subject, message_id) {
$('#reply-to').val(to);
$('#reply-subject').val(subject);
$('#reply-message-id').val(message_id);
}
function sendReply() {
$('#reply-button').addClass('disabled');
sendMessage({
'To': $('#reply-to').val(),
'Subject': $('#reply-subject').val(),
'In-Reply-To': $('#reply-message-id').val()
},
$('#reply-message').val(),
replyTidy
);
return false;
}
function replyTidy() {
$('#reply-modal').modal('hide');
$('#reply-message').val('');
$('#reply-button').removeClass('disabled');
}
function composeTidy() {
$('#compose-modal').modal('hide');
$('#compose-to').val('');
$('#compose-subject').val('');
$('#compose-message').val('');
$('#send-button').removeClass('disabled');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</body>
</html>

How to submit data from a modal?

These buttons are echo out from the database,
When the user clicks onto the button, the user will get to see a pop out before submitting it.
This is my code,
$con = getDbConnect();
$day = date("l");
if (mysqli_connect_errno($con)) {
"Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'");
while ($schedule = mysqli_fetch_array($result)) {
?>
<div class="col-md-3">
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal" schedule="
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>">
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="myModalLabel">Insert Today's Activity</h4>
</div>
<div class="modal-body">
<p class="activity"></p>
<p>Click on the submit button if the above infomation is correct.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary btn-ok">Submit</a>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('schedule', $(e.relatedTarget).attr('schedule'));
$('.activity').html('You have selected: <strong>' + $(this).find('.btn-ok').attr('schedule') + '</strong>');
});
</script>
<?php
}
mysqli_close($con);
}
?>
</div>
Once the user click onto the submit button, the "academicInstitution" and "duration" will be entered into a database called, "myRecord".But I do not know how to connect the submit button to the database.

If you need to stay on the same page, make an ajax post call to a server side php script: http://api.jquery.com/jquery.post/
This way you will be able to execute the query you want on the server
If you can accept to reload the page, you may simply use an html form
This question may be useful for you: jQuery Ajax POST example with PHP
Note that you don't necessarily need the form element if you choose the ajax post approach