You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.
With xMatters, you'll never miss a beat.
Course Of The Month
2 days, 17 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
jquery inside Bootstrap modal
Posted on 2016-08-29
I'm using jquery code to check for duplicates in a database as the user types an email address in a field. The code works fine until I place the field inside a Bootstrap modal.
Here's the jquery function
Here's the form code
The page is here..
http://testregister.cenational.org/cc/dashboard.php
You'll see at the top a field where the jqery call works--when you finish typing, the database is dup-checked for the email address. But when you click 'Add Family' you'll see a field called 'Enter f_email' that doesn't work.
Thanks for any help give,
Steve
Here's the jquery function
<script type="text/javascript"> //Check if family email address has already been used.
$(document).ready(function() {
var x_timer;
$("#f_email").keyup(function (e){
clearTimeout(x_timer);
var f_email_var = $(this).val();
x_timer = setTimeout(function(){
check_f_email_ajax(f_email_var);
}, 1000);
});
function check_f_email_ajax(f_email){
$("#user-result").html('<img src="ajax-loader.gif" />');
$.post('/support/check_f_email.php', {'f_email':f_email}, function(data) {
$("#user-result").html(data);
});
}
});
</script>
Here's the form code
<div id="registration-form">
<label for="f_email">Enter f_email :
<input name="f_email" type="text" id="f_email" maxlength="45"> <span id="user-result"></span>
</label>
</div>
The page is here..
http://testregister.cenational.org/cc/dashboard.php
You'll see at the top a field where the jqery call works--when you finish typing, the database is dup-checked for the email address. But when you click 'Add Family' you'll see a field called 'Enter f_email' that doesn't work.
Thanks for any help give,
Steve
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
4-
4
8 Comments
Active today
I suspect your problem is with event binding. The way in which you're binding is only binding to elements that exist on the page at the point in time when this code runs:
Try using "on", which will bind elements that are dynamically added to a page.
$("#f_email").keyup(function (e){
}
Try using "on", which will bind elements that are dynamically added to a page.
$("#f_email").on("keyup",function (e){
}
Active today
Thanks for the suggestion, I do appreciate the help. I inserted your code, but still don't get the function to work inside the modal.
Steve
Steve
Active today
Put a console log inside the jQuery function to verify it's triggering. If it's not triggering, then please post the HTML for the modal, including the div or whatever that contains the modal.
Active today
It didn't trigger. Here's the HTML for the modal. But if it's not triggering, would this code even have a chance to run?
<div class="container">
<!-- Trigger the modal with a button -->
<td colspan="1"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add Family</button></td>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Add Family</h4>
Email, first and last name are required. Other information will need to be filled out by the family contact.
</div>
<div class="modal-body">
<p>
<div id="registration-form">
<label for="f_email">Enter f_email :
<input name="f_email" type="text" id="f_email" maxlength="45"> <span id="user-result"></span>
</label>
</div>
<form name="form1" method="post" action="family_add_code.php">
<strong>Email address:</strong>
<br />
<input type="text" name="f_email" id="f_email" size="40" maxlength="50" value='' /> <span id="user-result"></span>
<br />
<strong>First Name:</strong><br />
<input type="text" name="f_fname" id="f_fname" size="25" maxlength="25" value='' required>
<br />
<strong>Last Name:</strong><br />
<input type="text" name="f_lname" id="f_lname" size="40" maxlength="40" value='' required>
<br />
<strong>Phone</strong><br />
<input type="text" name="f_phone" id="f_phone" size="12" maxlength="12" value=''>
<br />
<strong>Address 1</strong><br />
<input type="text" name="f_address1" id="f_address1" size="40" maxlength="50" value=''>
<br />
<strong>Address 2</strong><br />
<input type="text" name="f_address2" id="f_address2" size="40" maxlength="50" value=''>
<br />
<strong>City</strong><br />
<input type="text" name="f_city" id="f_city" size="40" maxlength="40" value=''>
<br />
<strong>State</strong><br />
<input type="text" name="f_state" id="f_state" size="20" maxlength="20" value=''>
<br />
<strong>Zip</strong><br />
<input type="text" name="f_zip" id="f_zip" size="20" maxlength="20" value=''>
<br />
<strong>Country</strong><br />
<input type="text" name="f_country" id="f_country" size="20" maxlength="20" value='United States'>
<br />
<br />
<input type="text" name="id_church" id="id_church" value='<?php echo $id_church;?>'>
<input type="submit" name="button" id="button" value="Add Family">
</form>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Active today
You must have something else going on then. Because the code you posted works fine and triggers the jQuery event when I type. Here is a Fiddle Demo
For the demo, I just copied your code directly, and added the jQuery:
For the demo, I just copied your code directly, and added the jQuery:
$('#f_email').on('keyup', function() {
console.log('hello world');
});
Featured Post
WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month2 days, 17 hours left to enroll
696 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.