jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Drag and drop doesnt function

Tags: jqgrid drag and drop

09/03/2013
09:39

hugosilvaonetag

Porto, Portugal

Member

Members

Forum Posts: 3

Member Since:
04/01/2013

Offline

Hi, im trying to implement the drag and drop of a row between 2 grid. But when i try to do that, nothing happens, here is my code.

<?php
session_start();
if(!isset($_SESSION['nome']))
{
header("location: index.html");
}
else
{

}

// be sure to put text data in CDATA

?>
<html>

<head><title>Eulen</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>

$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});

//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
<style type="text/css" media="screen">
#sidemenu a {
    border-bottom: 1px solid #F6F7F9;
    border-top: 1px solid #F6F7F9;
    color: #596677;
    display: block;
    padding: 9px 26px 9px 15px;
    text-decoration: none;
}

#sidemenu a:hover {
    background: none repeat scroll 0 0 #EDF1F5;
    border-bottom: 1px solid #DCE7F0;
    border-top: 1px solid #DCE7F0;
    color: #3F4C59;
    text-decoration: none;
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

</style>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
    url:'gettags.php',
    width:600,
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ID','Estação','Nome Cliente','Piso','Descrição'],
    colModel :[
      {name:'id_tag', index:'id_estacaotag',hidden:true},
      {name:'nome', index:'nome'},
      {name:'nome2', index:'nome2'},
      {name:'id_piso', index:'id_piso'},
      {name:'descricao', index:'descricao'},
    ],
    pager: '#pager',
    hidegrid: false,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'nome',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,

    caption: 'Tags'
});
$("#list").jqGrid('navGrid','#pager',{
        edit:false,
        add:false,
        del:false,
        search:false


    });
});
</script>
<script type="text/javascript">
$(function(){
$("#list2").jqGrid({

    width:600,
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ID','Estação','Nome Cliente','Piso','Descrição'],
    colModel :[
      {name:'id_tag', index:'id_estacaotag',hidden:true},
      {name:'nome', index:'nome'},
      {name:'nome2', index:'nome2'},
      {name:'id_piso', index:'id_piso'},
      {name:'descricao', index:'descricao'},
    ],
    pager: '#pager2',
    hidegrid: false,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'nome',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,

    caption: 'Ronda'
});
$("#list2").jqGrid('navGrid','#pager2',{
        edit:false,
        add:false,
        del:false,
        search:false


    });
});
jQuery("#list").jqGrid('gridDnD',{connectWith:'#list2'});
jQuery("#list2").jqGrid('gridDnD',{connectWith:'#list'});
</script>
</head>
<body style="margin: 0px;padding: 0px; font-style: courier">

<div class="dropdown" style="float: right;right:50px;top:50%">
<a class="account" ><b>Bem Vindo,<?php $t=$_SESSION['nome'];echo $t;?></b></a>

    <div class="submenu">
    <ul class="root">
    <li ><a href="changepass.php" >Alterar Password</a></li>
    <li ><a href="logout.php" >Logout</a></li>

    </ul>
    </div>

</div>

         <span id="sidemenu" style="float: left; width: 15%;height: 100%;background-color:#F6F7F9;">
             <a href="admin.php">Inicio</a>
             <a href="adminclientes.php">Clientes</a>
             <a href="adminlocais.php">Locais</a>
             <a href="admintags.php">Tags</a>

            <a href="adminusers.php">Utilizadores</a>
            <a href="admintypeofuser.php">Tipo de Utilizadores</a>

         </span>

         <span style="float: left;width: 70%;height: 100%;">

          Nome da Ronda: <input type="text" name="nomeronda" id="nomeronda"><br><br>
          Utilizador:<select>
          <?php
          $db = mysqli_connect("localhost","user","pass");
   // select the database
   mysqli_select_db($db,"onetag51_db_metro");
          $SQL = "SELECT * FROM utilizadores ";
$result = mysqli_query( $db,$SQL ) or die("Couldn't execute query.".mysqli_error($db));
          while($row = mysqli_fetch_array($result,MYSQL_ASSOC)) {
          echo "<option value='".$row['id_utilizador']."'>".$row['nome']."</option>";
          }
          ?>
          </select>
          <table id="list"></table> <div id="pager"></div></script>
          <br>
          <br>
          Ronda:<br>
          <table id="list2"></table> <div id="pager2"></div></script>
         </span>

</div>

</body>

</html>
<?php

the grids are appearing fine, the first one is loaded...ive been searching a solution, am i missing something?