Loading ...
Sorry, an error occurred while loading the content.

Reorder and submit to sql database with drag drop

Expand Messages
  • ryuoh64
    Hi im very new to javascript and am still trying to learn the syntax of it cant really find any good web resources for that but! im trying to pull data down
    Message 1 of 1 , Mar 27, 2009
    • 0 Attachment
      Hi im very new to javascript and am still trying to learn the syntax of
      it cant really find any good web resources for that but!

      im trying to pull data down data put in to drag drop boxes one on the
      left side will be stuff they can choose from and the one on the right
      will be questions to add to a survey. Then have a button to submit all
      the questions to a database. I can do all the PHP scripts for that and
      have the drag drop working but im having trouble getting the data to
      submit from the finshed list.

      Here is my code its pretty messy for the moment =/ Any help at all would
      be greatly appreciated



      <?php
      // Load required files
      require_once('include/pdo.php');
      require_once('include/testassess_connect.php');
      require_once('include/valid.php');
      require_once('HTML/QuickForm.php');

      // Connect to the database
      $connection = my_connect($prefix,$host,$dbname,$user,$pass);
      if (!$connection) {
      die("You did not connect to the database");
      }
      ?>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <!-- Individual YUI JS files -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-even\
      t.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></\
      script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js">\
      </script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></sc\
      ript>
      <!--CSS file (default YUI Sam Skin) -->
      <link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.7.0/build/logger/assets/skins/sam/logge\
      r.css">

      <!-- Source file -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.7.0/build/logger/logger-min.js"></script\
      >





      <style type="text/css">

      div.workarea { padding:10px; float:left }

      ul.draglist {
      position: relative;
      width: 300px;
      height:400px;
      background: #f7f7f7;
      border: 1px solid gray;
      list-style: none;
      margin:0;
      padding:0;
      }

      ul.draglist li {
      margin: 1px;
      cursor: move;
      zoom: 1;
      }

      ul.draglist_alt {
      position: relative;
      width: 300px;
      list-style: none;
      margin:0;
      padding:0;
      /*
      The bottom padding provides the cushion that makes the empty
      list targetable. Alternatively, we could leave the padding
      off by default, adding it when we detect that the list is empty.
      */
      padding-bottom:20px;
      }

      ul.draglist_alt li {
      margin: 1px;
      cursor: move;
      }


      li.list1 {
      background-color: #D1E6EC;
      border:1px solid #7EA6B2;
      }

      li.list2 {
      background-color: #D8D4E2;
      border:1px solid #6B4C86;
      }

      #user_actions { float: right; }

      </style>

      </head>
      <body class="yui-skin-sam">
      <script type="text/javascript">
      var myLogReader = new YAHOO.widget.LogReader();
      </script>
      <div id="myLogger"></div>
      <script type="text/javascript">
      var myLogReader = new YAHOO.widget.LogReader("myLogger");
      </script>

      <?php
      $queryString = "select * from questions";
      //echo "$queryString";
      $results = my_select_query($queryString,$connection);
      $displayBlock = "";

      echo'
      <div class="workarea">
      <h3>Questions To Add</h3>
      <ul id="ul1" class="draglist">'; echo"\n";
      $li1_number = 1;

      while ($row = my_fetch_array($results)){
      $displayBlock .= ' <li class="list1" id="li1_' .
      $row["question_id"] . '">' . $row["question_text"] . "</li> \n";
      $li1_number = $li1_number + 1;
      }
      $displayBlock .= " </ul>\n";
      $displayBlock .= "</div>\n";

      echo $displayBlock;

      ?>



      <div class="workarea">
      <h3>Added Questions</h3>
      <ul id="ul2" class="draglist">
      </ul>
      </div>

      <div id="user_actions">
      <input type="button" id="showButton" value="Submit Changes" />
      </div>


      <script type="text/javascript">

      (function() {

      var Dom = YAHOO.util.Dom;
      var Event = YAHOO.util.Event;
      var DDM = YAHOO.util.DragDropMgr;

      ////////////////////////////////////////////////////////////////////////\
      //////
      // example app
      ////////////////////////////////////////////////////////////////////////\
      //////
      YAHOO.example.DDApp = {
      init: function() {

      var rows=16,cols=2,i,j;
      for (i=1;i<cols+1;i=i+1) {
      new YAHOO.util.DDTarget("ul"+i);
      }

      for (i=1;i<cols+1;i=i+1) {
      for (j=1;j<rows+1;j=j+1) {
      new YAHOO.example.DDList("li" + i + "_" + j);
      }
      }

      Event.on("showButton", "click", this.showOrder);
      },

      showOrder: function() {
      var parseList = function(ul) {
      var items = ul.getElementsByTagName("li");
      var out = "";
      for (i=0;i<items.length;i=i+1) {
      out += items[i].id + ", ";
      }
      return out;
      };

      var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");

      //document.write(parseList(ul2));
      /*
      var div = document.getElementById('container');

      var handleSuccess = function(o){
      YAHOO.log("The success handler was called. tId: " + o.tId +
      ".", "info", "example");
      if(o.responseText !== undefined){
      div.innerHTML = "<li>Transaction id: " + o.tId +
      "</li>";
      div.innerHTML += "<li>HTTP status: " + o.status +
      "</li>";
      div.innerHTML += "<li>Status code message: " +
      o.statusText + "</li>";
      div.innerHTML += "<li>HTTP headers received: <ul>" +
      o.getAllResponseHeaders + "</ul></li>";
      div.innerHTML += "<li>PHP response: " + o.responseText +
      "</li>";
      div.innerHTML += "<li>Argument object: Array ([0] => " +
      o.argument[0] +
      " [1] => " + o.argument[1] + " )</li>";
      }
      };

      var handleFailure = function(o){
      YAHOO.log("The failure handler was called. tId: " +
      o.tId + ".", "info", "example");

      if(o.responseText !== undefined){
      div.innerHTML = "<li>Transaction id: " + o.tId +
      "</li>";
      div.innerHTML += "<li>HTTP status: " + o.status +
      "</li>";
      div.innerHTML += "<li>Status code message: " +
      o.statusText + "</li>";
      }
      };

      var callback =
      {
      success:handleSuccess,
      failure:handleFailure,
      argument:['foo','bar']
      };
      */
      var sUrl = "testsubmit.php";
      var postData = parseList(ul2);


      var request = YAHOO.util.Connect.asyncRequest('POST', sUrl,
      callback, postData);


      }

      };

      ////////////////////////////////////////////////////////////////////////\
      //////
      // custom drag and drop implementation
      ////////////////////////////////////////////////////////////////////////\
      //////

      YAHOO.example.DDList = function(id, sGroup, config) {

      YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup,
      config);

      this.logger = this.logger || YAHOO;
      var el = this.getDragEl();
      Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly
      transparent

      this.goingUp = false;
      this.lastY = 0;
      };

      YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

      startDrag: function(x, y) {
      this.logger.log(this.id + " startDrag");

      // make the proxy look like the source element
      var dragEl = this.getDragEl();
      var clickEl = this.getEl();
      Dom.setStyle(clickEl, "visibility", "hidden");

      dragEl.innerHTML = clickEl.innerHTML;

      Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
      Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl,
      "backgroundColor"));
      Dom.setStyle(dragEl, "border", "2px solid gray");
      },

      endDrag: function(e) {

      var srcEl = this.getEl();
      var proxy = this.getDragEl();

      // Show the proxy element and animate it to the src element's
      location
      Dom.setStyle(proxy, "visibility", "");
      var a = new YAHOO.util.Motion(
      proxy, {
      points: {
      to: Dom.getXY(srcEl)
      }
      },
      0.2,
      YAHOO.util.Easing.easeOut
      )
      var proxyid = proxy.id;
      var thisid = this.id;

      // Hide the proxy and show the source element when finished with
      the animation
      a.onComplete.subscribe(function() {
      Dom.setStyle(proxyid, "visibility", "hidden");
      Dom.setStyle(thisid, "visibility", "");
      });
      a.animate();
      },

      onDragDrop: function(e, id) {

      // If there is one drop interaction, the li was dropped either
      on the list,
      // or it was dropped on the current location of the source
      element.
      if (DDM.interactionInfo.drop.length === 1) {

      // The position of the cursor at the time of the drop
      (YAHOO.util.Point)
      var pt = DDM.interactionInfo.point;

      // The region occupied by the source element at the time of
      the drop
      var region = DDM.interactionInfo.sourceRegion;

      // Check to see if we are over the source element's
      location. We will
      // append to the bottom of the list once we are sure it was
      a drop in
      // the negative space (the area of the list without any list
      items)
      if (!region.intersect(pt)) {
      var destEl = Dom.get(id);
      var destDD = DDM.getDDById(id);
      destEl.appendChild(this.getEl());
      destDD.isEmpty = false;
      DDM.refreshCache();
      }

      }
      },

      onDrag: function(e) {

      // Keep track of the direction of the drag for use during
      onDragOver
      var y = Event.getPageY(e);

      if (y < this.lastY) {
      this.goingUp = true;
      } else if (y > this.lastY) {
      this.goingUp = false;
      }

      this.lastY = y;
      },

      onDragOver: function(e, id) {

      var srcEl = this.getEl();
      var destEl = Dom.get(id);

      // We are only concerned with list items, we ignore the dragover
      // notifications for the list.
      if (destEl.nodeName.toLowerCase() == "li") {
      var orig_p = srcEl.parentNode;
      var p = destEl.parentNode;

      if (this.goingUp) {
      p.insertBefore(srcEl, destEl); // insert above
      } else {
      p.insertBefore(srcEl, destEl.nextSibling); // insert
      below
      }

      DDM.refreshCache();
      }
      }
      });

      Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

      })();
      </script>
      </body>









      The recieve page to insert the data right now its just writing to a file
      to i can acualy pass the vairables through post


      <?php
      // Post proccessing of the form
      /* yadl_spaceid - Skip Stamping */
      header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
      // always modified
      header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
      // HTTP/1.1
      header("Cache-Control: no-store, no-cache, must-revalidate");
      header("Cache-Control: post-check=0, pre-check=0", false);
      print_r($_POST);
      ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html>
      <head>
      </head>
      <body>
      <?php

      $myFile = "testFile.txt";
      $fh = fopen($myFile, 'a') or die("can't open file");
      //fwrite($fh, print_r($_POST));
      $t = 'New Test';
      fwrite($fh, $t);
      foreach ($_POST as $line) {
      fwrite($fh, $line);
      }

      fclose($fh);


      //No variable continue what you were doing


      echo str_replace ("li1_", "", $_POST['test']);
      ?>
      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.