jquery对话框似乎没有在ie7＆amp; IE8

时间：2014-01-08 22:14:15

标签： jquery-ui-dialog

我在使应用程序在IE7和IE8中工作时遇到困难。它在Chrome和FireFox中运行良好，尽管不完整。看来IE7＆amp; IE8对我正在使用的jquery对话框构造不满意。您可以在以下网址找到该申请：www.majbox.net/pers6/pers.html。

点击“管理会员”，然后点击其中一行;它应该以红色背景突出显示。接下来，单击“编辑”。此时，流程不会显示“编辑”对话框，而是返回主页面：pers.html。这是我第一次尝试使用jquery，如果有人能发现我的方式错误，我会很感激。我将在下面列出感兴趣的代码 - 这是在主页上单击时“管理成员”加载的页面。非常感谢提前。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv='content-Type' content='text/html; charset=UTF-8'></meta>
<link rel="stylesheet"  href="nav.css"  type="text/css"></link>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<h1> Show Members</h1>
<?php
    include('glob.inc.php');

    $dbhndlr = getDbHandle ();

    $query = "SELECT * FROM members";
    $result = mysql_query($query) 
    or die (mysql_error());

    $a = "<html><body>";
    echo "<form id='myPageForm' action='#'>";
    echo "<table id='tbl' border='1'>";
    echo "<tr class='ROW'> <th>Userid</th><th>Operation</th> <th>FirstName</th> <th>LastName</th> <th>Email</th> </tr>";
    while ( $record = mysql_fetch_assoc($result) ) {
        echo "<tr><td>"; 
        echo $record['userid'];
        echo "</td><td>"; 
        echo "I";
        echo "</td><td>"; 
        echo $record['firstName'];
        echo "</td><td>"; 
        echo $record['lastName'];
        echo "</td><td>"; 
        echo $record['emailAddr'];
        echo "</td></tr>"; 
    }

    mysql_close($dbhndlr);
    echo "</table>";
    echo "<button id='Add'>Add </button> <button id='Edit'>Edit </button> 
          <button id='Delete'>Delete </button> <button id='PrintIt'>Print Table </button><br></br>
          <button id='Submit'>Submit </button>";
    echo "<form>";
?>    

<div id="dialog" style="display:none;">
    <form id="dialog-form" action="#">
    <table>
    <tr>  
        <td><a style="width: 60px; color: #0000ff; font-size: 10; font-weight:normal; background-color:#e8e8e8;">First Name</a></td>
        <td><input type="text" name="firstname" id="firstname" class="text ui-widget-content ui-corner-all"></input></td>
    </tr>  
    <tr>  
        <td><a style="width: 60px; color: #0000ff; font-size: 10; font-weight:normal; background-color:#e8e8e8;">Last Name</a></td>
        <td><input type="text" name="lastname" id="lastname" class="text ui-widget-content ui-corner-all"></input></td>
    </tr>  
    <tr>  
        <td><a style="width: 60px; color: #0000ff; font-size: 10; font-weight:normal; background-color:#e8e8e8;">Email Address</a></td>
        <td><input type="text" name="emailaddr" id="emailaddr" class="text ui-widget-content ui-corner-all"></input></td>
    </tr>  
    </table> 
    </form>
</div>

<script type="text/javascript"> 
<!--
    // variable to reference window
    var myWindow = $('#dialog');

    $(document).ready (function() {
        $("#Add").click( addDialog );
        $("#Edit").click( editDialog );
        $("#Delete").click( deleteDialog );
        $("#Submit").click( submitDialog );


        //instantiate the dialog
        myWindow.dialog ({
            autoOpen: false,
            modal: false,
            buttons: {
                "Ok": function() {
            var op = myWindow.data('op');

            if ( op == 'edit') {
                    var fn = myWindow.find('input[name="firstname"]');
                    var ln = myWindow.find('input[name="lastname"]');
                    var ea = myWindow.find('input[name="emailaddr"]');

                    var tr = $('.rowHighlight').eq(0);
                    var userid = $('.rowHighlight').eq(0).find('td').eq(0).text();
                    tr.find('td').eq(0).text(userid);
                    tr.find('td').eq(1).text('E');
                    tr.find('td').eq(2).text(fn.val());
                    tr.find('td').eq(3).text(ln.val());
                    tr.find('td').eq(4).text(ea.val());
                    tr.removeClass('rowHighlight');
                    myWindow.dialog("close");
                    } else if ( op == 'add') {
                    var fn = myWindow.find('input[name="firstname"]');
                    var ln = myWindow.find('input[name="lastname"]');
                    var ea = myWindow.find('input[name="emailaddr"]');

            var uid = fn.val()[0] + (new Date()).getTime() + ln.val()[0];
            var row = "<tr><td>" + uid + "</td>" +     
              "<td>A</td>" + 
              "<td>" + fn.val() + "</td>" +     
              "<td>" + ln.val() + "</td>" +     
              "<td>" + ea.val() + "</td></tr>";

                    if ($addToEnd == 'false') {
                $('#tbl tr').eq($addBeforeThisIdx).before(row);
                        } else {
                $('#tbl tr:last').after(row);
                        }
                    myWindow.dialog("close");
                    } else  {
            console.log("Operation is neither edit nor add.... bailing");
            return;
                    }
                },
                "Cancel": function() {
                    myWindow.dialog("close");
                }
            }
        });
    });

    var editDialog = function() {
        var rowCount = 0;
        //tr = $('#tbl').find('tr');
        $("tr").each(function(i, tr) {
            if ($( this ).hasClass( "rowHighlight" )) {
                rowCount = rowCount + 1;
            }
        });

    console.log("Inside editDialog");
        // allow edit of only one member at a time - keep this little toy really simple
        if (rowCount > 1) {
        console.log("You selected " + rowCount +  " members to edit.  You're allowed to select one member at a time - sorry");
            $('#main').load('showMembers.php');
            return;
        }

        var tr = $('.rowHighlight').eq(0);
        var userid = tr.find('td').eq(0).text();
        var firstname = tr.find('td').eq(2).text();
        var lastname = tr.find('td').eq(3).text();
        var emailaddr = tr.find('td').eq(4).text();


        //alert("fn: " + firstname + "  ln: " + lastname);
        myWindow.find('input[name="firstname"]').val(firstname);
        myWindow.find('input[name="lastname"]').val(lastname);
        myWindow.find('input[name="emailaddr"]').val(emailaddr);


        //if the contents have been hidden with css, you need this
        myWindow.show(); 
        //open the dialog
        myWindow.data('op', 'edit');
        myWindow.dialog("open");
    }

    var deleteDialog = function() {
        //var tr = $('#tbl').find('tr');
        $("tr").each(function(i, tr) {
            if ($( this ).hasClass( "rowHighlight" )) {
            $(this).find('td').eq(1).text('D');
            $(this).removeClass('rowHighlight');
                $(this).addClass('deletedRow').find('td');
            }
        });
    }

    var submitDialog = function() {
        //var tr = $('#tbl').find('tr');
        $("tr").each(function(i, tr) {
            var op = $(this).find('td').eq(1).text();
            if (op == "A" || op == "E" || op == "D") {
                var ui = $(this).find('td').eq(0).text();
                var fn = $(this).find('td').eq(2).text();
                var ln = $(this).find('td').eq(3).text();
                var ea = $(this).find('td').eq(4).text();
        //alert (ui + "  " + op + "  " + fn + "  " + ln + "  " + ea );
        updateMember(ui, fn, ln, ea, getOpStr(op));
            }
        });
    }

    function getOpStr (op) {
    if (op == 'A') {
        return "add";
    } else if (op == 'E') {
        return "edit";
    } else if (op == 'D') {
        return "delete";
        }
    }

    var addDialog = function() {
        var rowCount = 0;
        $("tr").each(function(i, tr) {
            if ($( this ).hasClass( "rowHighlight" )) {
                rowCount = rowCount + 1;
            }
        });

    myWindow.find('input[name="firstname"]').val('');
        myWindow.find('input[name="lastname"]').val('');
        myWindow.find('input[name="emailaddr"]').val('');

        // add new member before the one selected.  Otherwise, add new member at the end
    if (rowCount == 1) {
        $addBeforeThisIdx = $('.rowHighlight').eq(0).index();
            $addToEnd = 'false';
        } else {
            $addToEnd = 'true';
        }

        //if the contents have been hidden with css, you need this
        myWindow.show(); 
        //open the dialog
        myWindow.data('op', 'add');
        myWindow.dialog("open");
    }

    // selects row by highlighting it.  Also deselects a selected row
    $(function() {
        $("#tbl").on('click', 'tr', function() {
        if ($(this).hasClass('rowHighlight')) {
                    $(this).removeClass('rowHighlight');
        } else {
            if (!($( this ).hasClass( "ROW" ))) {
                        $(this).addClass('rowHighlight');
            } 
        }
        });
    });

    function updateMember(ui, fn, ln, ea, rqst) {
    var vals = [];
    vals[0] = ui;
    vals[1] = fn;
    vals[2] = ln;
    vals[3] = ea;
    //var rqst = "edit";

        //alert('calling dbMemberMod.php with:  vals=' + vals + '   rqst=' + rqst);
        //alert('CALLING delMembers.php with:  vals=' + vals[0] + vals[1] + vals[2] + vals[3] + '   rqst=' + rqst);
        //alert('callinG delMembers.php with:  vals=' + vals + '   rqst=' + rqst);

    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                console.log("Your browser broke!");
                return false;
            }
        }
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            console.log("Response: " + ajaxRequest.responseText);   
                //$('#main').html(ajaxRequest.responseText);    
        }
    }

    var data = 'userid=' + vals[0] + '&firstName=' + vals[1] + '&lastName=' + vals[2] + '&emailAddr=' + vals[3] + '&rqst=' + rqst;
    ajaxRequest.open("POST", "dbMemberMod.php",false);
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(data);         
    }
-->
</script>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题