javascript - How to add input field using jQuery and call Ajax into new input field -

-

i using table input fields. use jquery adding new row/ input field, , want call ajax new row/input field. not working. because it's not filling condition of document.ready() function..

here html form:

<table> <thead> <tr>     <th>account name:</th>     <th>branch:</th> </tr> </thead> <tr>     <td>         <div>              <input type="text" name="ac_name" class="auto-search-ac">         </div>     </td>     <td>         <div>             <input type="text" name="branch">         </div>     </td> </table>

script add new row in table ( working perfectly) : 

<script> $(document).on("focus",'#table tr:last-child td:last-child',function() {         //append new row here.         var table = $("#table");          table.append('<tr>\         <td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\          </td>\         <td><div><input type="text" name="branch"></div>\         </td>\        </tr>');    });    </script>

ajax call new inserted input field:: (in first row - ajax working nicely)

<script type="text/javascript">  $(".auto-search-ac").autocomplete({     source: "/ca-list",     minlength: 1,     select: function( event, ui ) {         $('.auto-search-ac').val(ui.item.value);         $('#ca-id-val').val(ui.item.ca_id);     } });  </script>

note :: using scripts , html in modal. in first row, ok.

after adding new row jquery can not call ajax. may issue of document.ready().

question : how may call script/ajax/jquery after adding new input field/row using jquery in html ? in advanced.

use class selector not have element having auto-search-ac. after appending element, find element having class auto-search-ac appended tr , initialize autocomplete

try this:

$(".auto-search-ac").autocomplete({    source: "/ca-list",    minlength: 1,    select: function(event, ui) {      alert(ui.item.value);      alert(ui.item.ca_id);    }  });      $(document).on("focus", '#table tr:last-child td:last-child', function() {    var table = $("#table");    var element = '<tr>\          <td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\           </td>\          <td><div><input type="text" name="branch"></div>\          </td>\         </tr>';    table.append(element);      $("#table tr:last-child").find(".auto-search-ac").autocomplete({      source: "/ca-list",      minlength: 1,      select: function(event, ui) {        alert(ui.item.value);        alert(ui.item.ca_id);      }    });  });
<table id='table'>    <thead>      <tr>        <th>account name:</th>        <th>branch:</th>      </tr>    </thead>    <tr>      <td>        <div>          <input type="text" name="ac_name" class="auto-search-ac">        </div>      </td>      <td>        <div>          <input type="text" name="branch">        </div>      </td>  </table>

fiddle demo


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more