Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Filter AJAX result before setHTML

Status
Not open for further replies.
lumoo

lumoo

Technical User
Feb 18, 2009
3
BE
If anyone could give me a pointer here I would be most grateful.
Have developed a Joomla AJAX search module for VirtueMart .

Works fine in everything except IE.

I know the reason is IE's limitation in innerHTML (block level html not allowed in inline)

The problem is the returned html from the AJAX call contains a form so IE throws an error.

To fix it I need to filter out the result before setting the html in the div, in other words select just the elements I need before doing the setHTML.

I've tried everything but I just can't get the syntax right. :chomp:

Here's what I have
Code: 
var req = new Ajax(url, { method: 'get', delay : 300, data: { 'option' : 'com_virtuemart', 'page' : 'shop.browse', blah blah }, 

onComplete: function(results) { 
 var theNewEle = new Element('div').setHTML(results); 

theNewEle.getChildren().each(function(r) { 

NEED TO FILTER RESULT HERE to display only the div class="browseProductContainer

$('vmlpsearch_tmpdiv').setHTML(r.innerHTML); 
  
 });

the returned html has this structure..

Code: 
<table>
<tr>
<td>Form element in here</td>
<td>
<div class="browseProductContainer">Required html</div>
</td>
</tr>
<tr>
repeat above for next result
</tr>
</table>

So what I need to do is target the div class="browseProductContainer and setHTML only that.

Any help I would be very grateful.

P:S: It's a freebie for Joomla...
 
Sort by date Sort by votes
You can use DOM to filter the XML, but if it's always the same structure, a simple substring can do the trick

Cheers,
Dian
 
Upvote 0 Downvote
Thanks Diancecht for the answer..

Please realise I'm a complete newbie on this...

I'm trying to do this for example..(and dozens of other combinations!!)

Code: 
var req = new Ajax(url, { method: 'get', delay : 300, data: { 'option' : 'com_virtuemart', 'page' : 'shop.browse', blah blah }, 

onComplete: function(results) { 
 var theNewEle = new Element('div').setHTML(results); 

theNewEle.getChildren().each(function(r) { 

if(r.getProperty('class') == 'browseProductTitle'){

$('vmlpsearch_tmpdiv').setHTML(r.innerHTML); 
  }
 });

I'll post the complete html returned (result) so maybe you get a better idea of what I'm trying to do.
(only want the browseProductTitle divs returned.. :)
Code: 
<div id="vmMainPage">


<div class="buttons_heading">

</div>
<h3>Search: hea</h3>
<table width="100%">
	<tbody><tr>
		<td> <div class="browseProductContainer">
        
        
        <h3 class="browseProductTitle"><a href="/index.php?page=shop.product_details&amp;flypage=flypage.tpl&amp;product_id=1&amp;category_id=1&amp;keyword=hea&amp;option=com_virtuemart&amp;Itemid=66&amp;lang=en" title="head">
            head</a>
        </h3>
        
        <div class="browsePriceContainer">
            

	<span class="productPrice">
		$2.17			</span>


        </div>
        
        <div class="browseProductImageContainer">
	        <script type="text/javascript">//<![CDATA[
	        document.write('<a href="javascript:void window.open(\'[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif\',[/URL] \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=130,height=127,directories=no,location=no\');">');
	        document.write( '<img src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"[/URL] class="browseProductImage" border="0" title="head" alt="head"  /></a>' );
	        //]]>
	        </script><a href="javascript:void window.open('[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif',[/URL] 'win2', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=130,height=127,directories=no,location=no');"><img border="0" alt="head" title="head" class="browseProductImage" src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"/></a>[/URL]
	        <noscript>
	            <a href="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"[/URL] target="_blank" title="head">
	            <img src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"[/URL] class="browseProductImage" border="0" title="head" alt="head"  />	            </a>
	        </noscript>
        </div>
        
        <div class="browseRatingContainer">
        
<!-- The "Average Customer Rating: xxxxX (2 votes) " Part -->
<span class="contentpagetitle">Average customer rating:</span>
<br/>
<img border="0" align="middle" alt="0 stars" src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/stars/0.gif"/>[/URL] 
Total votes: 0        </div>
        <div class="browseProductDescription">
             
            <a title="Product Details" href="/index.php?page=shop.product_details&amp;flypage=flypage.tpl&amp;product_id=1&amp;category_id=1&amp;keyword=hea&amp;option=com_virtuemart&amp;Itemid=66&amp;lang=en"><br/>
			Product Details...</a>
        </div>
        <br/>
        <span class="browseAddToCartContainer">
                </span>

</div>
</td>
	</tr>
	<tr>
		<td> <div class="browseProductContainer">
        
        
        <h3 class="browseProductTitle"><a href="/index.php?page=shop.product_details&amp;flypage=flypage.tpl&amp;product_id=4&amp;category_id=4&amp;keyword=hea&amp;option=com_virtuemart&amp;Itemid=66&amp;lang=en" title="heat">
            heat</a>
        </h3>
        
        <div class="browsePriceContainer">
            

	<span class="productPrice">
		$107.17			</span>


        </div>
        
        <div class="browseProductImageContainer">
	        <script type="text/javascript">//<![CDATA[
	        document.write('<a href="javascript:void window.open(\'[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif\',[/URL] \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=130,height=127,directories=no,location=no\');">');
	        document.write( '<img src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"[/URL] class="browseProductImage" border="0" title="heat" alt="heat"  /></a>' );
	        //]]>
	        </script><a href="javascript:void window.open('[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif',[/URL] 'win2', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=130,height=127,directories=no,location=no');"><img border="0" alt="heat" title="heat" class="browseProductImage" src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"/></a>[/URL]
	        <noscript>
	            <a href="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"[/URL] target="_blank" title="heat">
	            <img src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/noimage.gif"[/URL] class="browseProductImage" border="0" title="heat" alt="heat"  />	            </a>
	        </noscript>
        </div>
        
        <div class="browseRatingContainer">
        
<!-- The "Average Customer Rating: xxxxX (2 votes) " Part -->
<span class="contentpagetitle">Average customer rating:</span>
<br/>
<img border="0" align="middle" alt="0 stars" src="[URL unfurl="true"]http://shoes.optimagest.be/components/com_virtuemart/themes/default/images/stars/0.gif"/>[/URL] 
Total votes: 0        </div>
        <div class="browseProductDescription">
             
            <a title="Product Details" href="/index.php?page=shop.product_details&amp;flypage=flypage.tpl&amp;product_id=4&amp;category_id=4&amp;keyword=hea&amp;option=com_virtuemart&amp;Itemid=66&amp;lang=en"><br/>
			Product Details...</a>
        </div>
        <br/>
        <span class="browseAddToCartContainer">
                </span>

</div>
</td>
	</tr>
</tbody></table>
<br class="clr"/>

<div style="text-align: center; display: none; visibility: hidden;" id="statusBox"/></div>
 
Upvote 0 Downvote
VirtueMart is an excellent plugin for e-commerce on joomla

I am testing it with some few electronic payment methods
would like to know if ALERTPAY is supported?

(July of 2009 )(after six months of sleep ZebrAYA is back)
[Always Close your threads for avoiding other people to entangle]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
121
waubain
waubain
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
82
HansMaulwurf
HansMaulwurf
Marine1969
  • Locked
  • Question
AJAX - first attempt
Replies
11
Views
152
feherke
feherke
Marine1969
  • Locked
  • Question
Ajax textbox and value
Replies
4
Views
122
Marine1969
Marine1969
craigward
  • Locked
  • Question
Ajax JSON API Connection
Replies
4
Views
96
craigward
craigward

Part and Inventory Search

Sponsor

Back
Top