Problem with autocomplete and modal...

Problem with autocomplete and modal...

Hello, I've got a big issue using Jquery Autocomplete with modal.

the following code works good if not used in modal :

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <meta name="description" content="jquery autocomplete">
  9. <meta name="keywords" content="jquery autocomplete">
  10. <meta name="author" content="muni">
  11.     <title>jquery autocomplete using ajax php mysql </title>
  12. <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  13.     <!-- Bootstrap -->
  14.     
  15.     <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
  16. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  17. <link rel="stylesheet" type="text/css" href="css/main.css" />
  18.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  19.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  20.     <!--[if lt IE 9]>
  21.       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  22.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  23.     <![endif]-->
  24.     
  25. <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  26. <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  27.     <script type="text/javascript" src="js/jquery-ui.js"></script>
  28. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  29.     
  30.     
  31.     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">


  34.   </head>
  35.   <body>


  39. <div class="container-fluid">
  40. <div class="row main-content">      
  41.     <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
  42.    
  43.         <div style="width:100%; margin-bottom: 50px;" class="text-center" >
  44.         <div style="position:relative; float:right;">
  45. <a href="javascript:void(null);" onclick="showDialog();" title="Article"><button type="button" id="dialog-link"
  46.     class="btn btn-primary">Choisir client</button></a>
  47. </div>

  49. </div>
  50. </div>
  51.             
  52.             <!-- ***************************************************************** -->
  53. <!-- ui-dialog1 Choisir client -->
  54. <!-- ***************************************************************** -->
  55. <div id="client-modal" title="Fiche client" style="display: true;">
  56. <div class="col-sm-12 col-md-12">
  57. <form id="horsBon1" name="horsBon1" action="mods/bc/mod_bc_client.php?id_bc=" method="post"
  58.         target="_parent" name="monform" autocomplete="off">

  61. <div class="row">
  62. <div class="col-sm-3 col-md-3">
  63. <div class="input-group">
  64. <span class="input-group-addon">CP</span>
  65. <input type="text" name="cp_" id="cp" class="form-control maj" value=""
  66.                             placeholder="Code Postal" onfocus="this.select();" onkeypress="if (event.keyCode==13){ this.form.ville.focus();}">

  68. </div>  
  69. </div>

  71. <div class="col-sm-5 col-md-5">
  72. <div class="input-group">
  73. <span class="input-group-addon">Ville</span>
  74. <input size="16" class="form-control maj" type="text" name="ville_" id="ville" value=""
  75.                             placeholder="Ville" onfocus="this.select();" onkeypress="if (event.keyCode==13){ this.form.pays.focus();}">
  76. </div>
  77. </div>
  78. </div>
  80.                 <div class="formSep"> </div>

  82. <div class="row" align="right" style="padding-right:10px;">
  83.     <button onClick="window.parent.jQuery('#client-modal').dialog('close');" type="button" class="btn btn-default">Annuler</button>
  84.     <button id="submit1" onClick="javascript:document.horsBon1.submit();" type="button" class="btn btn-default">Confirmer</button>
  85. </div>                
  86. </form>
  87. </div>
  88. </div>
  89. <!-- ***************************************************************** -->
  90. <!-- Fin ui-dialog Choisir client -->
  91. <!-- ***************************************************************** -->
  93. </div>
  94. </div><!-- /container -->
  96. <div class="clearfix"></div>
  98.     
  99.     <!-- Footer -->
  100.     <footer>

  102.     </footer>
  103.     <!-- /Footer -->
  104.     
  105.     
  106.     
  107.     <script type="text/javascript">


  112. </script>
  113.     <script src="js/auto.js"></script>
  114.   </body>
  115. </html>
and the javascript : 

  2. function showDialog()
  3. {
  4. $("#client-modal").dialog({
  5. width: 850,
  6. height: 400,
  7. modal: true,
  8. })
  9. };


  13. $('#cp').autocomplete({
  14. source: function( request, response ) {
  15. $.ajax({
  16. url : 'ajax.php',
  17. dataType: "json",
  18. method: 'post',
  19. data: {
  20.   name_startsWith: request.term,
  21.   type: 'country_table',
  22.   row_num : 1
  23. },
  24. success: function( data ) {
  25. response( $.map( data, function( item ) {
  26. var code = item.split("|");
  27. return {
  28. label: code[0] + " - " + code[1],
  29. value: code[0],
  30. data : item
  31. }
  32. }));
  33. }
  34. });
  35. },
  36. autoFocus: true,      
  37. minLength: 0,
  38. select: function( event, ui ) {
  39. var names = ui.item.data.split("|");
  40. $('#cp').val(names[0]);
  41. $('#ville').val(names[1]);
  42. }      
  43. });
so the script works good when used out of the modal, but when I use it with the modal, nothing happen ;/

Can some one help me please?


Thank you very much.