Develop Reference

Why can't I use part of this AJAX response?

I have a jQuery ajax call:
$.ajax ({
url : 'foo/bar/',
success: function(data) {
console.log(data);
var newHeaderText = $(data).find('#header-text').text();
$("#header-text").text(newHeaderText);
var newContent = $(data).find('#content').html();
console.log(newContent);
$("#content").html(newContent);
}
});
The logged data successfully shows the complete html of the target page.
The header-text section works as expected.
The console.log(newContent), however, returns undefined. Short of posting the entire html of foo/bar/ here, suffice it to say that I am quite sure a div of id content is in data, and that it has many child elements.
Why is my attempt at grabbing the content of one page and plopping it into the content of another page not working. It is especially confusing to me as header-text seems to work just fine.

You could try $.parseHTML instead:
var newContent = $($.parseHTML(data)).find('#content');
If #content is a top-level element, then the above code might still miss it. You could then solve this by first loading the HTML in container, and then find the element in there:
var newContent = $('<div>').append($.parseHTML(data)).find('#content');

Trying to convert jQuery get request into parseable object

I am trying to parse a jQuery get request into an object or some other way of getting a particular div on a page.
Here's my code:
$.get("http://en.wikipedia.org/wiki/Afghanistan", function(response) {
var elements;
elements = $.html(response);
console.log(elements);
});
The only problem is that elements is not HTML to parse. Let's say I want to get a specific div on the response variable - how would I go about doing that? This is with the intention of (eventually, after some processing) copying it to a div on my local page.
Don't worry about cross domain issues - this is for a Phonegap application

Use $.parseHTML() so you can convert that response to a set of DOM nodes and later insert that to the document.
You can do it like this:
$.get("http://en.wikipedia.org/wiki/Afghanistan", function(response) {
var elements;
elements = $.parseHTML(response);
console.log(elements);
var myDiv = $(elements).find('#idForDiv');
});

It sounds like the jQuery load function does exactly what you want. You can specify a selector after the url to load a particular part of the page:
$("#mydiv").load( "http://en.wikipedia.org/wiki/Afghanistan #divonpage");
http://jqapi.com/#p=load

If the response from the server is HTML then you can wrap it in a jQuery object and act upon it.
I would vouch for this approach:
var server_response = '<div style="background-color:yellow;"><div class="find-me">Hello</div></div>';
$('span').html($(server_response).find('.find-me'));
.find-me {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span></span>

Counting classes on another page and displaying them

To save me a lot of work editing a number in when adding a document to a site I decided to use javascript to count the number of elements with a class doc .
I am two main problems:
There is trouble displaying the variable. I initially thought this was because I hadn't added function, however when I tried adding this the variable was still not displayed.
The elements with the class I want to count are on another page and I have no idea how to link to it. For this I have tried var x = $('URL: /*pageURL*/ .doc').length; which hasn't worked.
Essentially I want the total elements with said class name and this to be displayed in a span element.
Currently I have something similar to what's displayed below:
<script>
var Items = $('.doc').length;
document.getElementById("display").innerHTML=Items;
</script>
<span id="display"></span>
Found an example of something similar here where the total numbers of articles are displayed.
Edit:
#ian
This code will be added to the homepage, domain.net/home.html. I want to link to the page containing this documents, domain.net/documents.html. I've seen this done somewhere before and if I remember correctly they used url:domainname.com/count somewhere in their code. Hope this helps.

Here is a jQuery call to retrieve the url "./" (this page) and parse the resulting data for all elements with class "lsep" "$('.lsep', data)". You should get back a number greater than 5 or so if you run this from within your debug console of your browser.
$.get("./", function(data, textStatus, jqXHR)
{
console.log("Instances of class: " + $('.lsep', data).length)
});
One important thing to remember is that you will run into issues if the URL your are trying to call is not in the same origin.
Here's an updated snippet of code to do what you're describing:
$(document).ready(
function ()
{
//var url = "/document.html" //this is what you'd have for url
//var container = $("#display"); //this is what you'd have for container
//var className = '.data'; //this is what you'd have for className
var url = "./"; //the document you want to parse
var container = $("#question-header"); //the container to update
var className = '.lsep'; //the class to search for
$.get(url, function (data, textStatus, jqXHR) {
$(container).html($(className, data).length);
});
}
);
If you run the above code from your browser's debug console it will replace the question header text of "Counting classes on another page and displaying them" with the count of instances the class name ".lsep" is used.

First, you have to wait until the document is ready before manipulating DOM elements, unless your code is placed after the definition of the elements you manipulate, wich is not the case in your example. You can pass a function to the $ and it will run it only when the document is ready.
$(function () {
//html() allows to set the innerHTML property of an element
$('#display').html($('.doc').length);
});
Now, if your elements belongs to another document, that obviously won't work. However, if you have used window.open to open another window wich holds the document that contains the .doc elements, you could put the above script in that page, and rely on window.opener to reference the span in the parent's window.
$('#display', opener.document.body).html($('.doc').length);
Another alternative would be to use ajax to access the content of the other page. Here, data will contain the HTML of the your_other_page.html document, wich you can then manipulate like a DOM structure using jQuery.
$.get('your_other_page.html', function(data) {
$('#display').html($('.doc', data).length);
});

How to pass value from one div to the other through ajax call in perl?

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?

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

How can I replace a table with a new one using jQuery?

Whats the best way to replace a <table> with a new one using jQuery? I'm using ajax on the page to get the new data.

If you don't want to add a wrapper element, something like this should work:
$.ajax({
url: 'yoururl.php',
success: function(r) {
$('table#something').replaceWith(r);
}
});
..assuming the response you get is an table element.

Wrap it in a div, and:
$("#myDiv").load("/some/url.php"); // where url.php outputs the entire table
You can specify a portion of the remote document to insert by putting it's selector with the URL parameter as follows:
$("#myDiv").load("/some/url.php #myTable");