1

Here is my code,

 <script language="javascript" type="text/javascript"> 
    jQuery(function(){
    $("#cname").autocomplete("list1.jsp");
    });
       $(document).ready(function(){
       $('div.ajaxx').delegate("#cname","change",function(){
            var env_id=ui.item.value;
            $.ajax({
                url:'dc_ajax.jsp',
                type:'POST',
                data:{count:env_id},
                success:function(data){
                    $('div.dc').html(data);
                },
                error:function(){
                $('div.dc').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }               
            });
        }); 

       });
</script>

In this code, I want to use value select from autocomplete to call a ajax. but when I tried to use it, it shows null value but on redirecting to another page, it shows selected value. So how to use that value in javascript?

Here is my html code where ajax call 

        <div class='ajaxx'>
        <span style="font-family: 'Terminal Dosis Light', sans-serif;font-size: 20px"> <b>Select Customer :</b></span>  
          <input type="text" id="cname" name="cname" class="input_text" value="" required />
    <div class='dc' style="margin-top: 1em;"></div> 
    </div>
user3977863
  • 33
  • 5

2 Answers2

0

You can use Autocomplete change event like,

jQuery(function () {
    $("#cname").autocomplete({
        source: "list1.jsp",// your source
        change: function (event, ui) { // autocomplete changes
            var env_id = ui.item.value;// you will get here, in your case it is undefined
            $.ajax({
                url: 'dc_ajax.jsp',
                type: 'POST',
                data: { count: env_id },
                success: function (data) {
                    $('div.dc').html(data);
                },
                error: function () {
                    $('div.dc').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }
            });
        }
    });
});

Or try Select-event instead.

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
0

Your code works somehow with little changes, but you can see in working fiddle example, that because you used

$('div.ajaxx').delegate("#cname","change",function(){

then the ajax is not started when you select the item by mouse, only when when you hit enter.

If you want to do something when item is selected in autocomplete you need to use select event of autocomplete function

Look on: Working fiddle example

HTML:

<div class='ajaxx'> <span style="font-family: 'Terminal Dosis Light', sans-serif;font-size: 20px">
         <b>Select Customer :</b>
     </span> 
    <input type="text" id="cname" name="cname" class="input_text" value="" required />
    <div id='dc' style="margin-top: 1em;"></div>
</div>

JS:

$('#cname').autocomplete({
    source: ["Saab", "Volvo", "BMW", "One", "Oneeee", "Onayyy"],
    select: function (event, ui) {
        var env_id = ui.value;
        $.ajax({
            url: 'dc_ajax.jsp',
            type: 'POST',
            data: {
                count: env_id
            },
            success: function (data) {
                $('#dc').html("data: " + data);
            },
            error: function () {
                $('#dc').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
            }
        });
    }
});
Tomor
  • 814
  • 6
  • 10
  • Thank you for suggestion, and its working for your given value but when i use list1.jsp in place of source u have given, its not working.$('#cname').autocomplete({ source: "list1.jsp", – user3977863 Aug 26 '14 at 09:16
  • Does your list1.jsp return right json data? (Do simple request to your list1.jsp - what's the response?) – Tomor Aug 26 '14 at 12:53
  • rs=st1.executeQuery("SELECT c.cust_name AS cust FROM cust_mast c join env_mast e join service_mast s where c.cust_id=e.cust_id and e.service_id=s.service_id"); List li=new ArrayList(); while(rs.next()){li.add(rs.getString(1));} String[] str = new String[li.size()]; Iterator it = li.iterator();int i = 0;while(it.hasNext()){ String p=(String)it.next();str[i] = p;i++;} String query=(String)request.getParameter("q"); int cnt=1;for(int j=0;j=5)break; cnt++;}} – user3977863 Aug 27 '14 at 03:02
  • Above is my code of list1.jsp and it performs well in case of simple autocomplete jquery jQuery(function(){ $("#cname").autocomplete("list1.jsp"); }); – user3977863 Aug 27 '14 at 03:03
  • I guess the problem is that you don't return json array, but list of items separated by \n. Look here on the [php example](http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/) You need to have an array and then encode it to json. And here is [java example how to encode to json](http://www.tutorialspoint.com/json/json_java_example.htm) – Tomor Aug 27 '14 at 05:48
  • I don't have any idea how to pass json in jsp and related to this. Could you please help me to correct it or given correct solution – – user3977863 Aug 27 '14 at 06:21
  • At first try to call your list1.jsp file in the browser. What it returns? string like: item1\nitem2\item3 ? You need it to return json: ["item1", "item2", "item3"] Look on the links which I sent in my previous comment and also try to look there: http://stackoverflow.com/questions/3207092/what-is-the-jsp-equivalent-to-json-encode-in-php – Tomor Aug 27 '14 at 06:32
  • Actually i am trying to do this but not successfull in it. please help me in coding and how to use json for this problem – user3977863 Sep 01 '14 at 04:08
  • Maybe you can create new answer for it, because posting code into the comments is not that great :-/ Be sure to show your existing code in it explain clearly what are you trying to do (for other people to be clear) and we can discuss it. Also other people will be able to help you. You can post link to your question here into the comments. – Tomor Sep 01 '14 at 05:34