Solved

jquery inside Bootstrap modal

Posted on 2016-08-29
8
50 Views
Last Modified: 2016-09-01
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
    <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>

Open in new window


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>

Open in new window


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
0
Comment
Question by:stkoontz
  • 4
  • 4
8 Comments
 
LVL 42

Accepted Solution

by:
zephyr_hex earned 500 total points
ID: 41775468
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:

$("#f_email").keyup(function (e){

}

Open in new window


Try using "on", which will bind elements that are dynamically added to a page.

$("#f_email").on("keyup",function (e){

}

Open in new window

0
 
LVL 2

Author Comment

by:stkoontz
ID: 41776239
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
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41776642
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.
0
 
LVL 2

Author Comment

by:stkoontz
ID: 41776790
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">&times;</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>

Open in new window

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 2

Author Comment

by:stkoontz
ID: 41779905
Thanks @zephyr_hex for helping me. Any ideas from the modal code?

Steve
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41779996
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

demo result
For the demo, I just copied your code directly, and added the jQuery:
$('#f_email').on('keyup', function() {
  console.log('hello world');
});

Open in new window

0
 
LVL 2

Author Closing Comment

by:stkoontz
ID: 41780632
I don't know what was going on, but it's working now.  Thanks for the help!

Steve
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41780646
Glad you were able to get it working.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now