使用jQuery异步iframe

Question

所以我要根据我的svn存储库中的内容创建一个代码组合。

我目前的设置是这样的：

PHP遍历我的JSON，并为每个项目中的每个文件创建这些小菜单。 这是一些（结构很差的）代码，显示了如何生成这些代码：

<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>

所以我有一个form ， select ， option 。 选择项将从下拉列表中发布所选版本。 然后，我有一个超链接，可根据发布的版本号形成正确的URL。 此超链接将需要替换为iframe 。 为了简单起见，可以说每个项目都有自己的iframe，只要您单击其中一个提交按钮，就会使用相应的项目文件进行更新。

像这样：

我正在寻找最简单的方法来将其设置为异步工作。

我的想法：我已经使用jQuery建立了异步注释系统。 不同之处在于我只有三个小inputs和一个提交评论的button 。 这似乎看起来要复杂得多，因为我上面发布的代码将循环大约100次。 我不能为每个提交按钮硬编码一个不同的ID，并且在单击每个按钮时编写100个不同的.js脚本进行操作。

Answer 1

好的，因此我将简化您的表单生成代码以使其更清楚。 我包括您不显示的外部循环：

<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>