Textarea and modal not working on mobile - javascript

I'm making out a ticket system for a repair shop with an option to update the status of the repair with canned responses. you can click a button, it opens a modal with canned response options, you click insert, and it inserts the response into the textarea below the button. everything works as it should on desktop, however, on mobile, the button for canned responses is not clickable, and the textarea can't be clicked either.
Button and textarea:
<div class="col-xs-12">
<div class="form-group">
<label for="message">Status Update Message:
<button type="button" class="btn btn-secondary text-left" data-toggle="modal" data-target="#myModal"><i class="fa fa-file-text" aria-hidden="true"></i></button></label>
<textarea class="form-control" required rows="8" maxlength="750" name="message" id="message"></textarea>
</div>
</div>
Modal:
<div id="myModal" class="modal fade" role="dialog">
<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">Canned Responses</h4>
</div>
<div class="modal-body">
<div class="col-xs-12">
<div class="col-xs-3">
<p>Diagnosing</p>
</div>
<div class="col-xs-7">
<p id="Dingmess">Hi, Thanks for coming in. We are currently diagnosing your machine...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Diagnosing"class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Diagnosis</p>
</div>
<div class="col-xs-7">
<p id="Dmess">Hi, We took a look at your device, and the issue is *. It will be $...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Diagnosis" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Repair Approved</p>
</div>
<div class="col-xs-7">
<p id="Appmess">Thanks for your approval. We will proceed with the fix and let you know when it's ready to pick...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Approved" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<div class="col-xs-3">
<p>Repair Declined</p>
</div>
<div class="col-xs-7">
<p id="Decmess">Your repair has been marked as declined. Please let us know...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Declined" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Parts Ordered</p>
</div>
<div class="col-xs-7">
<p id="Partmess">Parts have been ordered. We will notify you when we begin...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Parts" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>In Progress</p>
</div>
<div class="col-xs-7">
<p id="Progmess">Your repair is in progress. We will notify you when complete</p>
</div>
<div class="col-xs-2">
<button type="button" id="Progress" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Completed</p>
</div>
<div class="col-xs-7">
<p id="Compmess">Your repairs are complete, and your device is ready!</p>
</div>
<div class="col-xs-2">
<button type="button" id="Completed" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Closed/Invoiced</p>
</div>
<div class="col-xs-7">
<p id="Closedmess">The ticket has been closed. Thank you.</p>
</div>
<div class="col-xs-2">
<button type="button" id="Closed" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-xs-12">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Javascript for insertion:
$(document).ready(function(){
$("#Diagnosing").click(function(){
$('#message').html('Hi, Thanks for coming in! We are currently diagnosing your machine. We\'ll let you know what the issue is as soon as we finish.');
});
$("#Diagnosis").click(function(){
$('#message').html('Hi, We took a look at your device, and the issue is *. It will be $ +tax to repair. Shall we proceed with the fix?');
});
$("#Approved").click(function(){
$('#message').html('Your device has been marked as approved! We will proceed with the fix and let you know when it\'s ready to be picked up!');
});
$("#Declined").click(function(){
$('#message').html('Your repair has been marked as declined. Please let us know if there is anything we can do to change your mind!');
});
$("#Parts").click(function(){
$('#message').html('Your parts have been ordered. We will let you know when we receive the parts and begin installing them.');
});
$("#Progress").click(function(){
$('#message').html('We are currently working on your repair. We will notify you when it is done!');
});
$("#Completed").click(function(){
$('#message').html('Hey there - your repair is all set! We just finished cleaning it up so you can come pick it up and pay at your earliest convenience. We *** and tested ***.');
});
$("#Closed").click(function(){
$('#message').html('The ticket has been closed. Thank you.');
});
});
Any thoughts as to why it wont work on mobile? i've looked for an hour or so, and i haven't found anyone with the same issue.

This code works for me. I'd make sure my scripts are in the following order and version:
<script type="text/javascript" src="scripts/jquery-2.2.3.js"></script>
<script type="text/javascript" src="scripts/bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Diagnosing").click(function(){
$('#message').html('Hi, Thanks for coming in! We are currently diagnosing your machine. We\'ll let you know what the issue is as soon as we finish.');
});
........
</script>
</body>

Related

Bootstrap modal opens automatically on page load, but how to disable if form is submitted

I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click
By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}

Reusable modals in html/javascript

I have the following popup modal:
<div class="modal-wrapper" style="display: block;">
<div class="modal-popup-margin">
<div class="modal-popup">
<div class="modal-header">
<button type="button" class="close close-modal">×</button>
<span class="modal-title">Change Password</span>
</div>
<div class="modal-body">
<div class="row">
<span class="label">Old Password</span>
<input class="Textinput form-control ng-pristine ng-untouched ng-invalid old-password ng-invalid-required" value="" type="password" name="oldPassword" />
</div>
<div class="row">
<span class="label">New Password</span>
<input class="Textinput form-control ng-pristine ng-untouched ng-invalid new-password ng-invalid-required" value="" type="password" name="newPassword" />
</div>
<div class="row error-row">
<span class="label"> </span>
<span class="error-message"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary submit">SAVE</button>
<button type="button" class="btn btn-default-flat-goog pull-right close-modal">CANCEL</button>
</div>
</div>
</div>
<div class="modal-backdrop close-modal"></div>
</div>
It is meant to be re-usable, in that I would define the following for each item that calls it:
The name or the button(s) that are included in the modal-footer.
The various fields in the modal body, everything that is now a row.
The name of the modal, in modal-title.
The url the form submits to on clicking the SAVE button.
How would I create a "re-usable" form here without copy-pasting this same modal into each template and re-writing the changeable parts of it?
For this purpose, I would suggest injecting HTML with javascript, if you don't want to use frameworks. Your html inside a very basic builder function:
function makeModal(buttonshtml, bodyhtml, title, saveurl){
return `<div class="modal-wrapper" style="display: block;">
<div class="modal-popup-margin">
<div class="modal-popup">
<div class="modal-header">
<button type="button" class="close close-modal">×</button>
<span class="modal-title">${title}</span>
</div>
<div class="modal-body">
${bodyhtml}
</div>
<div class="modal-footer">
${buttonshtml}
</div>
</div>
</div>
<div class="modal-backdrop close-modal"></div>
</div>`
}
However, I don't see any save button or form.

How to add fields in bootstrap model dynamically in angular

I am new to webDevelopment. Now, Here I have a list of buttons , but the data-target is a same model for every button click. So, My model is like -
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
In this buttons are like -
<ul class="col-md-12 list-group suggestion">
<li class="list-group-item suggestion-list-group-item nopadding" ng-repeat="suggestion in suggestions | orderBy:'name'" tooltip-trigger
tooltip-placement="bottom" tooltip={{suggestion.name}} tooltip-popup-delay=200 tooltip-append-to-body="true">
<button ng-click="grabIndex(suggestion)" class="btn btn-default btn-block suggestion-button" role="button" data-toggle="modal"
data-target="#myModalHorizontal"><span class="suggestion-text">{{suggestion.name}}</span>
</button>
</li>
</ul>
Every Button is going to open a same model,But It should be respective to that of click value. E.g. If the button is like FullName , I should be able to add the two Input box fistName and lastName . Its like on click of the Button, How can I add the fields respective of that button.? Can any one help me with this ?
I think you can use ng-if
Just create all fields in modal
Like
firstname
lastname
email
password
remember me
When you click on btn , set a variable like showFields
Eg:
showFields== "login" or ""
showFields== "register"
use ng-if ='showFields== "register"' for fields that need to show only on register page
Hope it will help

Boostrap modal showing popup content on page before clicking on modal button

Trying to make this modal work on the checkout page here: http://designatwork.net/c3/checkout/ under the "Have a Physician Code? Enter your Physician Code" link at the top. When I put the modal code in, it shows the content that's supposed to be in the popup below the link that's supposed to open the popup. How do I get this to work properly?
<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<!-- Physician Code Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
<button class="nm-simple-add-to-cart-button single_add_to_cart_button button alt" data-dismiss="modal" aria-label="Close">Generate a Code</button>
</div>
</div>
</div>
You need to wrap your modal content within the a <div class="modal fade"></div> and have the role="dialog" attribute to that wrapper as following :
The modal html goes like this:
<div class="modal fade" id="physcode" tabindex="-1" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Physician Code</h4>
</div>
<div class="modal-body">
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And the trigger element looks like this:
<p>Don't have a Physician Code?
<!-- Button trigger modal -->
<a data-toggle="modal" data-target="#physcode">Get one here!</a>
</p>
You need to wrap the entire thing in a modal div, also there you need to set the id of it to the element that the button uses. Try this code:
<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<div class="modal" id="physcode">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Physician Code</h4>
</div>
<div class="modal-body">
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Or pulled directly from my website, I use jQuery to open the modal automatically, but a button still works to open it.
<div class="modal" id="modalLogin">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formLogin" method="post" action="./index.php">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUsername" name="inputUsername" data-validation="alphanumeric length required" data-validation-allowing="-_" placeholder="User">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" name="inputPassword" data-validation="strength required" data-validation-strength="3" placeholder="Password">
<span class="help-block">Forgot My Password</span>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a type="button" href="./index.php" class="btn btn-default">Cancel</a>
<button type="submit" class="btn btn-default" form="formLogin">Login</button>
</div>
</div>
</div>
</div>

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<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">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});

Categories