New Posts  All Forums:Forum Nav:

Jquery ajax issue

post #1 of 3
Thread Starter 
I need to use the ajax() function instead of the load() function. The .load function has a nice feature that allows you to add a selector to the URL you are loading.... the result being that the data you fetch from the other page doesn't contain everything on the page, it just contains the data inside of the element you specify in your connector.

So if test.html looks like this:
<html>
<body>
<div id="container">Data1</div>
</body>
</html>

And on your page you call this:
$('#result').load('test.html #container');

then your element with the id "result" would be populated only with "Data1" instead of the entire html contents of test.html. This is good because you don't want a div on your page populated with an html, head, and body tag etc.

But I need to do this with the ajax method instead. I have gotten it to work, however, it's a bit of a work-around and I know there is a better way. The issue is that I can't apply selectors to the data returned by the ajax function until I first assign it to an element on the current page. I do that by assigning it to a div with a style attribute of "none", then I use a selector on that div to get what I want and then put that data into the div I want displayed. That seems wasteful to me, but it works and here is what it looks like.....

Code:
 $.ajax({
   url: 'ProductResults.php',
   data: { },
   cache: false,
   success: function(data) {
     //Now data is the html from the ProductResults.php page
     $('#hid').html(data);  //Here I put the html retrieved into a hidden div
     $('#collectionResultsContainer').html($('#hid').find('#prodResultsContainer')); //Now I pull out the div I want from the html and put it into the div that is visible
   },
   error: function(request,err) { 
   alert(err);
   }
 });
What you'd THINK would work, would be this:
$('#collectionResultsContainer').html($(data).find ('#prodResultsContainer'));

but it doesn't work. There has to be some way to apply a selector to that "data" variable before assigning it to an element on the page... and that is my question: how?
2017
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 7 Galaxy GTX 580 32 GB G.Skill 
Hard DriveOptical DriveCoolingOS
Samsung 960 Pro 512GB Lite-On BD Corsair H100i V2 Windows 10 64 bit 
MonitorPowerCase
Crossover Corsair HX750 Corsair 650D 
  hide details  
Reply
2017
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 7 Galaxy GTX 580 32 GB G.Skill 
Hard DriveOptical DriveCoolingOS
Samsung 960 Pro 512GB Lite-On BD Corsair H100i V2 Windows 10 64 bit 
MonitorPowerCase
Crossover Corsair HX750 Corsair 650D 
  hide details  
Reply
post #2 of 3
Is it possible to use regular expressions to parse out the data from the ajax response?

E.g.

Quote:
success: function(data) {
document.getElementById('result').innerHTML=data.m atch(/<div.*?>([^<]*)<\\/div>/mi)[1];
CM HAF 932
(13 items)
 
  
CPUMotherboardGraphicsRAM
E8400 P5Q-Pro Sapphire 4850 OCZ 2x2GB PC2-8500 
Hard DriveOptical DriveOSMonitor
2xWD 320GB Caviar Pioneer 215D Vista 64bit Samsung T200 
PowerCase
Enermax Infiniti 720W CM HAF 932 
  hide details  
Reply
CM HAF 932
(13 items)
 
  
CPUMotherboardGraphicsRAM
E8400 P5Q-Pro Sapphire 4850 OCZ 2x2GB PC2-8500 
Hard DriveOptical DriveOSMonitor
2xWD 320GB Caviar Pioneer 215D Vista 64bit Samsung T200 
PowerCase
Enermax Infiniti 720W CM HAF 932 
  hide details  
Reply
post #3 of 3
Thread Starter 
Thanks for the reply... I'm not sure but someone on the Jquery form told me to use filter instead of find and that worked. I don't understand why... something about filter working off of root level elements while find works off sube elements? I don't know.

This worked though:
$('#collectionResultsContainer').html($(data).filt er('#prodResultsContainer'));
2017
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 7 Galaxy GTX 580 32 GB G.Skill 
Hard DriveOptical DriveCoolingOS
Samsung 960 Pro 512GB Lite-On BD Corsair H100i V2 Windows 10 64 bit 
MonitorPowerCase
Crossover Corsair HX750 Corsair 650D 
  hide details  
Reply
2017
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 7 Galaxy GTX 580 32 GB G.Skill 
Hard DriveOptical DriveCoolingOS
Samsung 960 Pro 512GB Lite-On BD Corsair H100i V2 Windows 10 64 bit 
MonitorPowerCase
Crossover Corsair HX750 Corsair 650D 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding