梅西弹出框与内部HTML和Javascript

时间:2013-03-28 12:01:58

标签: php javascript jquery html popup

我正在开发一个php应用程序,使用Messi,一个jquery弹出框:http://marcosesperon.es/apps/messi/

在我的申请中,我有一个定价时间表,我正在努力使其可编辑。想法是当他们点击一个按钮时,会出现一个弹出框,他们可以选择一些选项并输入数据,然后将其添加到表格中。

我已经到了你点击按钮的阶段,并且出现了梅西弹出框,显示了用户可以选择不同选项的选择框。

代码如下:

function new_header()
{
    var content = "<form class='format_form' action='add_category.php' method='POST'>
                       <fieldset>
                           <legend>Choose a Pricing Category</legend>

                           <ol>
                               <li>
                                   <label for='category'>Category</label>

                                   <select id='category' name='category'>
                                       <option value='short_break'>Short Break</option>
                                       <option value='nightly_rate'>Nightly Rate</option>
                                       <option value='percentage_off'>Percentage Off</option>
                                       <option value='free_nights'>Free Nights</option>
                                   </select>
                               </li>
                           </ol>
                       </fieldset>

                       <fieldset>
                           <button type='submit' name='add_category' onclick='return validate_form();' id='add_category'>Add the Pricing Category</button>
                       </fieldset>
                   </form>";

    new Messi(content, {title: "Add a New Pricing Category", modal: true, width: '650px'});
}

在表格中是一个可点击的图片,用于调出梅西弹出框,代码如下:

<th scope="col" class="rounded-topright">
    <img class='hover_off' src='../../../includes/images/table/add_header.png' width='25px' height='25px'>

    <a href='#' onclick='new_header()'>
        <img class='hover_on' src='../../../includes/images/table/add_header_hover.png' width='25px' height='25px'>
    </a>
</th>

然后出现在messi弹出框中的内容取决于用户在选择框中的选择。作为测试,我试图让系统在更改选择框选项时显示javascript警报,如下所示:

$(document).ready(function()
{ 
    var category_number;

    $("#category").change(function()    //When the category is changed
    { 
        category_number = document.getElementById('category').selectedIndex;        //Get the property location in the array

        alert(category_number);
    }); 
}); 

我已经尝试将此代码放在.js文件中我已经拥有所有其他javascript,然后当它不起作用时,我把它放在带有原始定价计划表的.php文件中,但是那也行不通。

有人可以帮忙吗?或者失败了,想出一个更好的方法来实现同样的目标吗?

2 个答案:

答案 0 :(得分:0)

通过添加以下内容解决了问题:

onchange='category_change(this)' 

进入选择框属性,然后创建一个函数 category_change()来处理所选的选项。

答案 1 :(得分:0)

尝试添加:

var category_number;

$("#category").change(function()    //When the category is changed
{ 
    category_number = document.getElementById('category').selectedIndex;        //Get the property location in the array

    alert(category_number);
}); 

var content并使用messi弹出窗口启动它们