Results 1 to 4 of 4

Thread: Convert iframe target to Javascript / ajax div?

  1. #1
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Convert iframe target to Javascript / ajax div?

    This seems like a great thing to learn but I can't find a good tutorial or resource to accomplish what I'm trying to do.

    I have this site that I'm working on
    http://lucalune.com/wordpress/

    If you click on Search Projects, it will bring up a drodown. If you select an option or two you can filter the projects (click Search). It is basically a search form and the form is targeting the iframe "results"
    <form action="<?php bloginfo('template_url') ?>/build_search.php" method="post" target="results" accept-charset="utf-8">

    It works great in firefox, but in ie you have to click the iframe for the results to show up. Why? I have no idea. But..... That made me think that having an ajax or jquery driven div display the results would be a better solution an something I want to learn.

    If I were just directing a link to show content in the div, I could do it. But since I'm using the target="" code in a form, I can't figure out how to do it. Aaaarggghhh.
    This must be common thing to do, right?

    Does anyone know how to target a div using an html form?

    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    As regards the use of ddaccordion.js -

    Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.



    As regards your question - Put this script in the head of the page:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('form').submit(function(e){
    		e.preventDefault();
    		var $f = $(this);
    		$.ajax({
    			url: $f.attr('action'),
    			type: 'post',
    			data: $f.serialize(),
    			success: function(data){
    				$('#results').replaceWith('<div id="results">' + data + '<\/div>');
    			}
    		});
    	});
    });
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey John,

    Thanks for the head's up on that, regarding ddaccordian.js
    I have added that into the header.

    And thanks for that code! Works perfect. Now I can dissect and learn.

    Much, much appreciated!

  4. #4
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey John,

    I have that working great. Thanks again!
    http://lucalune.com/wordpress

    and i'm trying to find an answer to one last piece. After some searching I thought I'd see if you might have an answer.....

    When you click Search Project and sort by something, say just the first option, Available by Exhibit, it produces a list of page results. If you click one of those links, you will go to that page and I'm able to keep the menu dropdown open (this is all perfect), BUT.... the results are cleared on page refresh.

    What I would love to figure out, is how to keep those results shown when the page is refreshed. It would essentially be keeping the results shown at all times until a new search overrides the previous one.

    Do you know of any way to achieve this?

    Thanks again for your help,
    Ty

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •