Question

Basically, I want the value to be passed from one div to other div through ajax call on success in the same page.

But still, I am able to do it
using another page which get the value from div .And on success, the value is load to the other div.

Here are my codes:

My index.pl has following code.

 while($query->fetch()) {
    print qq( "<option id='$tblname_id'>$tblname_name</option>" );
 }

print "<div id='body'></div>";

My script.js contains following code.

$(document).ready(function(){
 $('option').click(function(){
    var selected=$(this).val();
    var id=this.id;
    //alert(id);   //here I am getting the id of selected option
    $.ajax({
        type:"get",
        url:"hello.pl", //instead of hello.pl,I want to do with index.pl itself
        data:{'id':id},
        success: function(msg){
                   $("#body").html(msg);
                   $("#body").show();
            }
    });
  });
});

Hello.pl contains

  $obt_id=$q->param('id');

This one works. But when I do same with index.pl, it doesn’t.

Where is the problem?

In one line, my question is simple.

How to get value in a div through ajax call, sent from other div, in the same page?

Answer 1

How to get value in a div through ajax call, sent from other div ,in
the same page ?

Take a look at jQuery’s load() function. An Example:

$('#result').load('test.html #foo');

That would get contents of an element with id=foo and append the results to an element with id=result