Dragable Textbox Focus Problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • atram
    New Member
    • Jul 2007
    • 4
    #1

    Dragable Textbox Focus Problem

    Hi,
    I am using 8 dragable textboxes. here the problem is focus of a dragable textbox, it is working fine in IE6 but it is not working in firefox. If i apply focus() then focus is working but i am loosing dragable feature. But i need both can any one help me plz to solve this problem.
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      hi ...

      welcome to TSDN ...

      please post some code concerning your problem ... show how you add the event-handlers ...

      kind regards

        Comment

        • thulaseeram
          New Member
          • Sep 2006
          • 23
          #3
          Originally posted by gits
          hi ...

          welcome to TSDN ...

          please post some code concerning your problem ... show how you add the event-handlers ...

          kind regards
          Hi,
          i am sending my code can u help me
          <?php
          include('db_con fig.php');
          /*mysql_connect( 'localhost', 'root','');
          mysql_select_db ('wakapa_db');
          error_reporting (E_ALL^E_WARNIN G^E_NOTICE);
          */
          $_REQUEST['uid'] = 1;


          function parse_data($dat a){
          $containers = explode(":", $data);
          foreach($contai ners AS $container)
          {
          $container = str_replace(")" , "", $container);
          $i = 0;
          $lastly = explode("(", $container);
          $values = explode(",", $lastly[1]);
          foreach($values AS $value)
          {
          if($value == '')
          {
          continue;
          }
          $final[$lastly[0]][] = $value;
          $i ++;
          }
          }
          return $final;
          }





          function update_db($data _array, $col_check){
          foreach($data_a rray AS $set => $items)
          {
          $i = 0;
          foreach($items AS $item)
          {
          $item = mysql_escape_st ring($item);
          $set = mysql_escape_st ring($set);
          $value=$value.$ item.",";
          $i ++;
          }
          }

          $storyarr=explo de(",",$value) ;
          for($i=0;$i<cou nt($storyarr)-1;$i++){
          $txtbox = "txtlist".$stor yarr[$i];
          $urltxtbox = "txturllist".$s toryarr[$i];
          $order_id = ($i+1);

          $selectval="sel ect * from todays_news where uid=".$_REQUEST['uid'];
          $resultval=mysq l_query($select val);
          $valueresult=my sql_num_rows($r esultval);

          if($valueresult >0){
          $updatestory="u pdate todays_news set label='".$_POST[$txtbox]."',url='".$_PO ST[$urltxtbox]."' where uid=".$_REQUEST['uid']." and order_id=".$ord er_id;
          mysql_query($up datestory);
          }
          else{
          for($i=1;$i<=8; $i++){
          echo $insertq = "insert into todays_news(ord er_id,uid,label ,url) values(".$i."," .$_REQUEST['uid'].",'".$_POST[$txtbox]."','".$_POS T[$urltxtbox]."')";
          mysql_query($in sertq);
          }
          }
          }
          }








          // Lets setup Sajax
          require_once('d d/Sajax.php');
          sajax_init();
          // $sajax_debug_mo de = 1;

          function sajax_update($d ata){
          $data = parse_data($dat a);
          update_db($data , "AND (`set` = 'sajax1' OR `set` = 'sajax2')");
          return 'y';
          }

          sajax_export("s ajax_update");
          sajax_handle_cl ient_request();

          if(isset($_POST['order']))
          {
          $data = parse_data($_PO ST['order']);
          update_db($data , "AND (`set` = 'left_col' OR `set` = 'right_col' OR `set` = 'center')");
          // redirect so refresh doesnt reset order to last save
          }
          ?>









          <html>
          <head>
          <title>Drag Drop</title>
          <style type="text/css">
          #left_col {
          width: 180px;
          float: left;
          margin-left: 5px;
          }

          #center {
          width: 180px;
          float: left;
          margin-left: 5px;
          }

          #right_col {
          width: 180px;
          float: left;
          margin-left: 5px;
          }

          #sajax1 {
          width: 180px;
          float: left;
          margin-left: 5px;
          }

          #sajax2 {
          width: 180px;
          float: left;
          margin-left: 5px;
          }

          form {
          clear: left;
          }


          h2 {
          color: #7DA721;
          font-weight: normal;
          font-size: 14px;
          margin: 20px 0 0 0;
          }

          br {
          clear: left;
          }

          .form-text{
          width: 8em;
          height: 1.9em;
          padding: 0 0.2em 0 0.2em;
          margin: 0 0 0.5em 0;
          border: 1px solid #744533;
          }
          input.button
          {
          color:#FFFFFF;
          font-size:9.0pt;
          font-weight:bold;
          border:0.8pt
          border-color:#FF3333;
          color:#000000;
          height:18.0pt;
          width:66.0pt;
          font-family:Verdana;
          filter:progid:D XImageTransform .Microsoft.Grad ient

          (GradientType=0 ,StartColorStr= '#cccccc',EndCo lorStr='#FFFFFF ');
          }
          </style>

          <link rel="stylesheet " href="dd/dd_files/lists.css" type="text/css">
          <script language="JavaS cript" type="text/javascript" src="dd/dd_files/coordinates.js" ></script>
          <script language="JavaS cript" type="text/javascript" src="dd/dd_files/drag.js"></script>
          <script language="JavaS cript" type="text/javascript" src="dd/dd_files/dragdrop.js"></script>
          <script type="text/javascript" src="dd/dd_files/ajaxObj.js"></script>
          <script language="JavaS cript" type="text/javascript"><!--
          <?php sajax_show_java script(); ?>

          function confirm(z){
          window.status = 'Sajax version updated';
          }

          function onDrop() {

          var data = DragDrop.serDat a('g2');
          x_sajax_update( data, confirm);
          }

          window.onload = function() {
          var list = document.getEle mentById("cente r");
          DragDrop.makeLi stContainer( list, 'g1' );
          list.onDragOver = function() { this.style['background'] = "#EEF"; };
          list.onDragOut = function() {this.style['background'] = "none"; };

          };

          function getSort(){
          alert("rama");
          var order = document.getEle mentById("order ");
          alert(order);
          order.value = DragDrop.serDat a('g1', null);
          alert(order.val ue);
          //showValue();
          }

          function showValue(){

          order = document.getEle mentById("order ");

          }
          function updatenull(id){

          document.getEle mentById("txt"+ id).value='';
          //story=document. getElementById(
          story='';
          getSort();
          document.draggg .action="dd.php ?vid="+encodeUR I(id)+"&storypo st="+encodeURI( story);
          document.draggg .submit();
          }
          function deleteBox(id){
          document.getEle mentById(id).va lue = '';
          getSort();
          document.draggg .submit();
          }

          function load() {
          document.forms[0].txtlist8.focus ();
          }

          /*function init()
          {
          document.getEle mentById('txtli st1').focus()";
          }*/

          //-->
          </script>
          </head>
          <body onload="load(); ">
          <form action="" name="draggg" id="draggg" method="post">

          <table width=95% cellpadding=0 cellspacing="0" border="0" align="center" style="cursor:p ointer;"><tr><t d>Today's News:</td><td>&nbsp;</td></tr><tr><td>&nbs p;</td><td>&nbsp;</td></tr><tr><td width="50%">Lab el:</td><td>URL</td></tr></table>
          <table cellpadding=0 cellspacing="0" border="0" width="690px">
          <tr>
          <td width="690px">
          <ul name="center" id="center" class="sortable boxy" style="width:69 0px">
          <?
          $j=1;
          $r = mysql_query("se lect * from todays_news where uid=".$_REQUEST['uid']);
          while($rw = mysql_fetch_arr ay($r)){
          if($rw['label']!=""){
          echo '<li name="list'.$j. '" id="list'.$j.' " value="'.$j.'" style="width:69 0px"><div name="list'.$j. '" id="list'.$j.' " value="'.$j.'"> <table border="0" cellpadding=0 cellspacing="0" width=100%><tr> <td><input type="text" class="form-text" style="width:24 em;" value="'.$rw['label'].'" name="txtlist'. $j.'" id="txtlist'.$j .'"></td><td width="10">&nbs p;</td><td><strong> <a href="#"><span> <input type="text" class="form-text" style="width:24 em;" value="'.$rw['url'].'" id="txturllist' .$j.'" name="txturllis t'.$j.'"></span></a></strong></td><td><a href="#" onclick="delete Box(\'list'.$j. '\');">X</a></td></tr></table></div></li>';
          $j++;
          }
          }
          for($k=$j;$k<=8 ;$k++){
          echo '<li name="list'.$k. '" id="list'.$k.' " value="'.$k.'" style="width:69 0px"><div name="list'.$k. '" id="list'.$k.' " value="'.$k.'"> <table border="0" cellpadding="0" cellspacing="0" width="100%"><t r><td><input type="text" name="txtlist'. $k.'" id="txtlist'.$k .'" value="" class="form-text" style="width:24 em;"></td><td width="10">&nbs p;</td><td><strong> <a href="#"><span> <input type="text" name="txturllis t'.$k.'" id="txturllist' .$k.'" value="" class="form-text" style="width:24 em;"></span></a></strong></td><td><a href="#" onclick="delete Box(\'list'.$k. '\');">X</a></td></tr></table></div></li>';
          }
          ?>
          </ul>
          </td>
          </tr>
          </table>


          <br/>
          <input type="hidden" name="order" id="order" value="" />
          <input type="hidden" name="uid" id="uid" value="<?echo $_REQUEST['uid'];?>" />
          <input type="submit" class="form-submit" onclick="getSor t()" value="Update Order" />
          </form>
          </body>
          </html>

            Comment

            • atram
              New Member
              • Jul 2007
              • 4
              #4
              Originally posted by gits
              hi ...

              welcome to TSDN ...

              please post some code concerning your problem ... show how you add the event-handlers ...

              kind regards
              Hi,
              i am sending my code can u help me

              [CODE=php]<?php
              include('db_con fig.php');
              /*mysql_connect( 'localhost', 'root','');
              mysql_select_db ('wakapa_db');
              error_reporting (E_ALL^E_WARNIN G^E_NOTICE);
              */
              $_REQUEST['uid'] = 1;


              function parse_data($dat a){
              $containers = explode(":", $data);
              foreach($contai ners AS $container)
              {
              $container = str_replace(")" , "", $container);
              $i = 0;
              $lastly = explode("(", $container);
              $values = explode(",", $lastly[1]);
              foreach($values AS $value)
              {
              if($value == '')
              {
              continue;
              }
              $final[$lastly[0]][] = $value;
              $i ++;
              }
              }
              return $final;
              }

              function update_db($data _array, $col_check){
              foreach($data_a rray AS $set => $items)
              {
              $i = 0;
              foreach($items AS $item)
              {
              $item = mysql_escape_st ring($item);
              $set = mysql_escape_st ring($set);
              $value=$value.$ item.",";
              $i ++;
              }
              }

              $storyarr=explo de(",",$value) ;
              for($i=0;$i<cou nt($storyarr)-1;$i++){
              $txtbox = "txtlist".$stor yarr[$i];
              $urltxtbox = "txturllist".$s toryarr[$i];
              $order_id = ($i+1);

              $selectval="sel ect * from todays_news where uid=".$_REQUEST['uid'];
              $resultval=mysq l_query($select val);
              $valueresult=my sql_num_rows($r esultval);

              if($valueresult >0){
              $updatestory="u pdate todays_news set label='".$_POST[$txtbox]."',url='".$_PO ST[$urltxtbox]."' where uid=".$_REQUEST['uid']." and order_id=".$ord er_id;
              mysql_query($up datestory);
              }
              else{
              for($i=1;$i<=8; $i++){
              echo $insertq = "insert into todays_news(ord er_id,uid,label ,url) values(".$i."," .$_REQUEST['uid'].",'".$_POST[$txtbox]."','".$_POS T[$urltxtbox]."')";
              mysql_query($in sertq);
              }
              }
              }
              }
              // Lets setup Sajax
              require_once('d d/Sajax.php');
              sajax_init();
              // $sajax_debug_mo de = 1;

              function sajax_update($d ata){
              $data = parse_data($dat a);
              update_db($data , "AND (`set` = 'sajax1' OR `set` = 'sajax2')");
              return 'y';
              }

              sajax_export("s ajax_update");
              sajax_handle_cl ient_request();

              if(isset($_POST['order']))
              {
              $data = parse_data($_PO ST['order']);
              update_db($data , "AND (`set` = 'left_col' OR `set` = 'right_col' OR `set` = 'center')");
              // redirect so refresh doesnt reset order to last save
              }
              ?>
              <html>
              <head>
              <title>Drag Drop</title>
              <style type="text/css">
              #left_col {
              width: 180px;
              float: left;
              margin-left: 5px;
              }

              #center {
              width: 180px;
              float: left;
              margin-left: 5px;
              }

              #right_col {
              width: 180px;
              float: left;
              margin-left: 5px;
              }

              #sajax1 {
              width: 180px;
              float: left;
              margin-left: 5px;
              }

              #sajax2 {
              width: 180px;
              float: left;
              margin-left: 5px;
              }

              form {
              clear: left;
              }


              h2 {
              color: #7DA721;
              font-weight: normal;
              font-size: 14px;
              margin: 20px 0 0 0;
              }

              br {
              clear: left;
              }

              .form-text{
              width: 8em;
              height: 1.9em;
              padding: 0 0.2em 0 0.2em;
              margin: 0 0 0.5em 0;
              border: 1px solid #744533;
              }
              input.button
              {
              color:#FFFFFF;
              font-size:9.0pt;
              font-weight:bold;
              border:0.8pt
              border-color:#FF3333;
              color:#000000;
              height:18.0pt;
              width:66.0pt;
              font-family:Verdana;
              filter:progid:D XImageTransform .Microsoft.Grad ient

              (GradientType=0 ,StartColorStr= '#cccccc',EndCo lorSt r='#FFFFFF');
              }
              </style>

              <link rel="stylesheet " href="dd/dd_files/lists.css" type="text/css">
              <script language="JavaS cript" type="text/javascript" src="dd/dd_files/coordinates.js" ></script>
              <script language="JavaS cript" type="text/javascript" src="dd/dd_files/drag.js"></script>
              <script language="JavaS cript" type="text/javascript" src="dd/dd_files/dragdrop.js"></script>
              <script type="text/javascript" src="dd/dd_files/ajaxObj.js"></script>
              <script language="JavaS cript" type="text/javascript"><!--
              <?php sajax_show_java script(); ?>

              function confirm(z){
              window.status = 'Sajax version updated';
              }

              function onDrop() {

              var data = DragDrop.serDat a('g2');
              x_sajax_update( data, confirm);
              }

              window.onload = function() {
              var list = document.getEle mentById("cente r");
              DragDrop.makeLi stContainer( list, 'g1' );
              list.onDragOver = function() { this.style['background'] = "#EEF"; };
              list.onDragOut = function() {this.style['background'] = "none"; };

              };

              function getSort(){
              alert("rama");
              var order = document.getEle mentById("order ");
              alert(order);
              order.value = DragDrop.serDat a('g1', null);
              alert(order.val ue);
              //showValue();
              }

              function showValue(){

              order = document.getEle mentById("order ");

              }
              function updatenull(id){

              document.getEle mentById("txt"+ id).value='';
              //story=document. getElementById(
              story='';
              getSort();
              document.draggg .action="dd.php ?vid="+encodeUR I(id)+"&storypo st="+encodeURI( story);
              document.draggg .submit();
              }
              function deleteBox(id){
              document.getEle mentById(id).va lue = '';
              getSort();
              document.draggg .submit();
              }

              function load() {
              document.forms[0].txtlist8.focus ();
              }
              //-->
              </script>
              </head>
              <body onload="load(); ">
              <form action="" name="draggg" id="draggg" method="post">

              <table width=95% cellpadding=0 cellspacing="0" border="0" align="center" style="cursor:p ointer;"><tr><t d>Today's News:</td><td>&nbsp;</td></tr><tr><td>&nbs p;</td><td>&nbsp;</td></tr><tr><td width="50%">Lab el:</td><td>URL</td></tr></table>
              <table cellpadding=0 cellspacing="0" border="0" width="690px">
              <tr>
              <td width="690px">
              <ul name="center" id="center" class="sortable boxy" style="width:69 0px">
              <?
              $j=1;
              $r = mysql_query("se lect * from todays_news where uid=".$_REQUEST['uid']);
              while($rw = mysql_fetch_arr ay($r)){
              if($rw['label']!=""){
              echo '<li name="list'.$j. '" id="list'.$j.' " value="'.$j.'" style="width:69 0px"><div name="list'.$j. '" id="list'.$j.' " value="'.$j.'"> <table border="0" cellpadding=0 cellspacing="0" width=100%><tr> <td><input type="text" class="form-text" style="width:24 em;" value="'.$rw['label'].'" name="txtlist'. $j.'" id="txtlist'.$j .'"></td><td width="10">&nbs p;</td><td><strong> <a href="#"><span> <input type="text" class="form-text" style="width:24 em;" value="'.$rw['url'].'" id="txturllist' .$j.'" name="txturllis t'.$j.'"></span></a></strong></td><td><a href="#" onclick="delete Box(\'list'.$j. '\');">X</a></td></tr></table></div></li>';
              $j++;
              }
              }
              for($k=$j;$k<=8 ;$k++){
              echo '<li name="list'.$k. '" id="list'.$k.' " value="'.$k.'" style="width:69 0px"><div name="list'.$k. '" id="list'.$k.' " value="'.$k.'"> <table border="0" cellpadding="0" cellspacing="0" width="100%"><t r><td><input type="text" name="txtlist'. $k.'" id="txtlist'.$k .'" value="" class="form-text" style="width:24 em;"></td><td width="10">&nbs p;</td><td><strong> <a href="#"><span> <input type="text" name="txturllis t'.$k.'" id="txturllist' .$k.'" value="" class="form-text" style="width:24 em;"></span></a></strong></td><td><a href="#" onclick="delete Box(\'list'.$k. '\');">X</a></td></tr></table></div></li>';
              }
              ?>
              </ul>
              </td>
              </tr>
              </table>


              <br/>
              <input type="hidden" name="order" id="order" value="" />
              <input type="hidden" name="uid" id="uid" value="<?echo $_REQUEST['uid'];?>" />
              <input type="submit" class="form-submit" onclick="getSor t()" value="Update Order" />
              </form>
              </body>
              </html>[/CODE]
              Last edited by gits; Jul 20 '07, 12:53 PM. Reason: added CODE-tags

                Comment

                • atram
                  New Member
                  • Jul 2007
                  • 4
                  #5
                  Originally posted by gits
                  hi ...

                  welcome to TSDN ...

                  please post some code concerning your problem ... show how you add the event-handlers ...

                  kind regards
                  Hi, Mr gits i posted my code can u help me in solving that problem
                  thanks

                    Comment

                    • atram
                      New Member
                      • Jul 2007
                      • 4
                      #6
                      Originally posted by atram
                      Hi, Mr gits i posted my code can u help me in solving that problem
                      thanks
                      HI,
                      At last i found solution for the above problem the solution is like this

                      we need to place this code onClick="this.f ocus();" in that particulor textbox then the things will work perfectly without any side effects.
                      thanks&regards

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          Originally posted by atram
                          HI,
                          At last i found solution for the above problem the solution is like this

                          we need to place this code onClick="this.f ocus();" in that particulor textbox then the things will work perfectly without any side effects.
                          thanks&regards
                          heya atram,

                          glad you got it working and ... may be i don't get it but when you click on the textbox it will get the focus automaticly ... why do you set the focus explicitly again?

                          kind regards ...

                          ps: please check your PMs and send a reply to me

                            Comment

                            Previous template Next
                            Working...