jquery filter raw html form load()

Question

I want to load part of an external page int on OS X widget. Using JQuery I can load the page but I then encounter errors trying ot put it in to the page.

I am having a problem filtering the returned html before I put it on the page.

I would like to be able to fetch the page, filter out the table I want, then append it to the page (at loadArea div)

    $(document).ready(function() {
  $().load("source.html", function(request) {
   $("#loadArea").append(request).filter(".myclass"); // this is in callback because the loading is asynchronous and you cant filter it before it is all there) 
  });    
 });

When I do the above nothing appened to the screen and the page is blank (it should be the colour black -> something is breaking the whole page)

Is doing it with the empty selector $() the right way? Am I going about it generally in the right way?

Answer 1

I'd suggest breaking it down into functional sections for testing. Firstly see if the page is actually being returned without error, so test the load call in isolation. Then try updating the loadArea separately with some dummy data.

Using the debugger keyword in the callback may help to inspect the response from the server.

Answer 2

Your empty selector approach might work, but using $.get or $.post makes much more sense. Also, you'll have to filter the elements you want to append before you append them. Try

$.get('source.html', function(data) {
  $(data).filter('.myClass').appendTo('#loadArea');
});

Answer 3

I will do it like that

$(document).ready(function() {
  $(#loadArea).load('source.html .myclass'
     function());                             
  });

that will load into #loadArea the .myclass from the source.html