flexigrid popup modal window_问答_开发者_运维开发者技术经验分享

I am trying to create a script using FLEXIGRID as a method to display the information from a database, but I want the users to able to input info into the database as well. I would like to be able to launch a modal window where the user can input the information and submit it. The way the buttons on the FLEXIGRID are coded is as following:

$(document).ready(function(){

 $("#flex1").flexigrid
   (
   {
   url: 'post2.php',
   dataType: 'json',
   colModel : [
    {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
......
   buttons : [
    {name: 'Add', bclass: 'add', onpress : test},
    {separator: true},
    {name: 'Delete', bclass: 'delete', onpress : test},
    {separator: true},
.... some more code ...

   }
   );   

});
function test(com,grid)
{
    if (com=='Add')
    {
              the code that triggers the modal window
    }
}

Okay, my problem:

When I press 'Add', I would like a modal popup window to appear to load using Ajax the content of a local file so the user can input the information.

What I have so far:

I tried using the code from JqModal: loaded the CSS and Javascript:

<link rel="stylesheet" type="text/css" href="css/jqmodal.css" /> 
<script type="text/javascript" src="js/jqModal.js"></script>
$().ready(function() {
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
});

added the div at the bottom of the page:

<div class="jqmWindow" id="ex2">
Please wait... <img src="inc/busy.gif" alt="loading" />
</div>

but how to trigger the function?

Thanks, Cristian.

LE: This is the code I have right now and it still doesn't work:

IE says: Object doesn't support this property or method flexigrid, line 56 character 5 That's exactly where the $dialog function starts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.3.custom.css" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#flex1").flexigrid
            (
            {
            url: 'post2.php',
            dataType: 'json',
            colModel : [
                {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
                {display: 'URL', name : 'url', width : 450, sortable : true, align: 'left'},
                {display: 'File Name', name : 'filename', width : 270, sortable : true, align: 'left'},
                {display: 'Availability', name : 'availability', width : 50, sortable : true, align: 'center'},
                {display: 'State', name : 'state', width : 40, sortable : true, align: 'center'},
                {display: 'Total Size', name : 'totalsize', width : 90, sortable : false, align: 'center'},
                {display: 'Current Size', name : 'currentsize', width : 90, sortable : false, align: 'center'},
                {display: 'Procent', name : 'procent', width : 40, sortable : true, align: 'center'},
                {display: 'Log',  width : 20, sortable : false, align: 'center'},
                ],
            buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {separator: true},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true},
                {name: 'Select All', bclass : 'selectall', onpress : test},
                {name: 'DeSelect All', bclass : 'deselectall', onpress : test},
                {separator: true}
                ],
            searchitems : [
                {display: 'URL', name : 'url'},
                {display: 'Filename', name : 'filename', isdefault: true}
                ],
            sortname: "state",
            sortorder: "asc",
            usepager: true,
            title: '',
            useRp: false,
            rp: 10,
            showTableToggleBtn: true,
            singleSelect: true
            }
            );   
});
$(document).ready(function() {
    $("#myDialog").dialog({
        autoOpen: false,
        resizable: false,
        position: 'center',
        stack: true,
        height: 'auto',
        width: 'auto',
        modal: true
     });

    $("#showDialog").button().click(function (event) {
        $("#myDialog").dialog('open');
    });
});
function test(com,grid)
{
    if (com=='Add') {
        $("#myDialog").dialog('open');
    }
    if (com=='Select All')
    {
        $('.bDiv tbody tr',grid).addClass('trSelected');
    }

    if (com=='DeSelect All')
    {
        $('.bDiv tbody tr',grid).removeClass('trSelected');
    }

    if (com=='Delete')
        {
           if($('.trSelected',grid).length>0){
               if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
                    var items = $('.trSelected',grid);
                    var itemlist ='';
                    for(i=0;i<items.length;i++){
                        itemlist+= items[i].id.substr(3)+",";
                    }
                    $.ajax({
                       type: "POST",
                       url: "delete.php",
                       data: "items="+itemlist,
                       success: function(data){
                        $('#flex1').flexReload();
                        alert(data);
                       }
                    });
                }
            } else {
                return false;
            } 
        }          
} 
</script>
</head>

<body>
<table id="flex1" style="display:none"></table>
<div id="myDialog" style="display:none" title=""></div>
</body>
</html>

LE2: How to load the external file thru ajax:

$(document).ready(function(){
    //define config object
   var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 500,
        width: 500,
        draggable: true,
        resizeable: true,
        open: function() {
        //display correct dialog content
        $("#myDialog").load("form.php");}
        };
    $("#myDialog").dialog(dialogOpts);  //end dialog

    $('#showdialog').click(function (开发者_Go百科event){
            $("#myDialog").dialog("open");
            return false;
        }
    );

});

The following sample will work with jQuery UI dialog

First defines the needed markup for the dialog:

<div id="myDialog" style="display:none" title=""></div>

Then, on DOM ready, setup the dialog to be a jquery UI dialog

$("#myDialog").dialog({
    autoOpen: false, position: 'center', stack: true, height: 'auto', width: 'auto', modal: true
});

Please notice the autoOpen: false parameter.

When you want to show the dialog just call the open method inside of your code

function test(com,grid) {
    if (com=='Add') {
        $("#myDialog").dialog('open');
    }
}

hope it helps!

Update:

I have created a sample on jsbin.com for you. You can see it working here while you can see the code here.

Chris19 is this error due to the css classes if your using visual studio 2008 as jquery uses css3 validation. VS2008 doesn't support css3 validation so certain elements of jquery css are unknown.

The quick fix is to go to Tools -> Options -> show all checkbox -> Text Editor -> Css -> Css Specific and turn off detection