asynchronous iframe using jquery

Question

So I'm creating a code portfolio based upon what's in my svn repo.

I'm currently set up like this:

enter image description here

PHP loops through my JSON and creates these little menus for each file in each project. Here's some (very poorly structured) code showing how I generate each of these:

<form action = "" method = 'post'><select name = "s2" id = "s2"> <?php
    foreach($proj2->item_vers as $ver)
    {
         ?>
         <option value = <?php
         $base_str = (string)$ver->revision;
         $full_str = "\"".$base_str."\"";
         echo($full_str); ?> > <?php
         echo($base_str); ?> </option>
         <?php

    }   ?> </select><input type = 'submit'/></form>
        <a href = <?php
        if (isset($_POST['2']))
        {
             $rev2 = $_POST['s2'];
        }
        else 
             $rev2 = "";
        $full_url = "https://myrepo".
        $proj2->name."?p=".$rev2;
        $ret_url = "\"".$full_url."\"";
        echo($ret_url); ?> > Code </a></td>

So I have a form, select, option. The select will post the selected version from the drop down. Then I have a hyperlink which forms the correct url based upon the posted version number. This hyperlink will need to be replaced with an iframe. For the sake of simplicity, lets say that each project has its own iframe which is updated with appropriate project file any time you click one of the submit buttons.

So like this:

enter image description here

I'm looking for the simplest way to set this up to work asynchronously.

My thoughts: I've already set up an asynchronous comment system using jQuery. The difference was that I only had three little inputs and a button to submit the comment. This just seems like it will be much more complicated as the code I posted above will loop through about 100 times. I cant just hard code a different id to every single submit button and write 100 different .js scripts to operate when each individual button is clicked.

slap an ID on that <a> tag. Use an AJAX request to fetch whatever you have to from the server, then it's a simple little bit of DOM mangling to delete the <a> and replace with an <iframe>, e.g. $('#id_of_a_tag').replaceWith('<iframe ...>'); — Marc B
– Marc B, Commented Apr 2, 2014 at 21:54
I dont understand your problem. The above code create a single form, with a single select and a submit button. Yet you mention hundreds of submit buttons. Please include a more complete example and a thorough explanation of what you want to achieve. Im sure the answer will be a few lines of jquery with appropriate element targeting. — Steve
– Steve, Commented Apr 2, 2014 at 21:56
@user574632 I'm referring to the fact that the code I posted is in a loop. A form will be created for every single project file in my subversion repository. So I will have about a hundred instances of what I've shown up top. I.e. one for Assignment2.0/TestJSON.json, one for Assignment2.0/test_graph.py, etc. Sorry if that still doesn't clear things up. — Collin
– Collin, Commented Apr 2, 2014 at 22:05
@MarcB when you say fetch whatever you have to from the server, what do you mean? In this case I just need to set the src of the iframe to the link that I've created. — Collin
– Collin, Commented Apr 2, 2014 at 22:07
Sure, i kind of got that, but please edit your question with a more complete example. EG the code above contains fixed html IDs, so if its in a loop you have invalid duplicate ids, also what should happen when submit is pressed? Do you want one iframe on the page that changes or 100 different iframes? As it stands this question is too vague to answer — Steve
– Steve, Commented Apr 2, 2014 at 22:13

Steve · Accepted Answer · 2014-04-02 23:50:46Z

1

OK, so im going to simplify your form generation code to make this clearer. I am including the outer loop you dont show:

<div id="forms-holder">
    <!--this is the outer loop-->
    <?php foreach ($projects as $project):?>

    <!-- remove any ids in the loop, they can not be duplicated-->  
    <form action="" class="projectform">

    <!-- add name to data attribute for easy retrieval by js-->
    <select name="s2" data-projectname="<?php echo $project->name;?>">
        <?php foreach ($project->item_vers as $ver):?>
        <option value="<?php echo'"'. $ver->revision .'"';?>"><?php echo $ver->revision;?></option>
        <?php endforeach;?>
    </select>

    <input type = 'submit'/>

    <form>

    <?php endforeach;?>
</div>
<iframe src="" frameborder="0" id="myiframe"></iframe>

<script type="text/javascript">
    $(function(){
        //when any form is submitted
        $('.projectform').submit(function(ev){
            ev.preventDefault();

            //grab revision and project name
            var revision = $(this).find('select').val();
            var projname = $(this).find('select').attr('data-projectname');

            //generate the url
            var iframeurl = "https://myrepo"+projname+"?p="+revision;

            //set the iframes url
            $('#myiframe').attr('src', iframeurl);
        })
    });
</script>

edited Apr 2, 2014 at 23:50

answered Apr 2, 2014 at 23:39

Steve

20.5k5 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Collin Over a year ago

almost perfect. I think there's a problem with this line. var revision = $(this).find('select').val(); It doesn't seem to be taking in the revision number as intended. So the url ends up being https://repo/?p= every time. I've checked a few times, I don't think it's an error on my end.

Steve Over a year ago

@user2079802 Odd. Its very late here (UK) so i'll revisit this tomorrow. i'm sure we can fix it.

Collin Over a year ago

Well I managed to fix it somehow. var revision = $(this).find('select').find(':selected').text(). I've got no clue why it works, but solved. Anyway, cheers

Collectives™ on Stack Overflow

asynchronous iframe using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related