Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

James Robertson http://www.r0bertson.co.uk

« Newer Snippets
Older Snippets »
Showing 1-2 of 2 total  RSS 

'Delete a Twitter entry' dissected

The following code was copied from my Twitter home page, it shows how to delete a twitter entry on the server.

raw HTML code with embedded JavaScript code.

<a href="/status/destroy/719423092" onclick="if (confirm('Sure you want to delete this update? There is NO undo!')) 
{var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 
'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); 
m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = 
document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); 
s.setAttribute('value', 'd0057265c3784d2a6dc6cdb2c26083f638152151'); f.appendChild(s);f.submit(); };return false;" 
title="Delete this update?">


same code as above but with comments.
<a href="/status/destroy/719423092" onclick="

                     // if the user clicks the 'OK' button the confirm function will return true
if (confirm('Sure you want to delete this update? There is NO undo!')) { 

  // -- dhtml: creating html elements on-the-fly -------------------------------
  var f = document.createElement('form'); // create the dhtml 'form' (<form/>) element
  f.style.display = 'none';               // hide the form
  this.parentNode.appendChild(f);         // append the form element to the parent of the current node (<a/>)
  f.method = 'POST';                      // add the method to the form
  f.action = this.href;                   // add the action using the href of the current node (<a/>)
    
  var m = document.createElement('input');   // create the input (<input/>) 'element' 
  m.setAttribute('type', 'hidden');          // set the input type to 'hidden'
  m.setAttribute('name', '_method');         // set the input name to '_method'
  m.setAttribute('value', 'delete');         // set the input value to 'delete'
  f.appendChild(m);                          // append the input element to the form element
  
  var s = document.createElement('input');   // create another input element
  s.setAttribute('type', 'hidden');          // set the type to 'hidden'
  s.setAttribute('name', 'authenticity_token'); // set the name to 'authenticity_token'
  
                                     // set the input element's value using a unique id.
  s.setAttribute('value', 'd0057265c3784d2a6dc6cdb2c26083f638152151'); 
  
  f.appendChild(s);                  // apend the input element to the form element
  // -- end of dhtml: creating html elements on-the-fly -------------------------------
  
  f.submit(); // post the form data back to the server to delete the record, 
              // just as if the user had pressed the submit button.
};

  return false; // returning false cancels the default <a href="..."> request. 
                 // However if JavaScript had been disabled for some reason the 
                 // <a href="..."> would have acted normally, meaning the record 
                 // would have been deleted from following the URL request directly.
 "

Note: Twitter needs JavaScript for the web page to work properly, I've tried and it is not possible to delete a record without JavaScript. The authenticity_token has been altered by me to prevent any malicious activity on my Twitter account.

1st attempt at building an autocomplete dhtml user interface

This following html, javascript, and css code is used to build a basic auto-complete user interface. The next step will be to build the back-end server which will handle AJAX requests.

file:autocomplete.html
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/xml;charset=utf-8" />
    <title>auto-complete</title>
    <link rel="stylesheet" type="text/css" href="default.css"/>
    <script type="text/javascript">
      m_i = -1;
      m_keyval = '';
      
      function showResult(keycode){
        oresult = document.getElementById('result');
        oresult.style.visibility = 'visible';
        otext = document.getElementById('tel_search');

        if (keycode =='40'){  // down
          if (m_i > 0){
            cancelHighlight('i'+m_i);
          }
          if (m_i < 5){
            m_i++;
          }
          else
          {
            m_i = 1;
          }
          highlight('i'+m_i);
        }
        if (keycode =='38'){  // up
          if (m_i > 0 || m_i < 6){
            cancelHighlight('i'+m_i);
          }
          m_i--;
          highlight('i'+m_i);
        }
        if (keycode =='27' || keycode == '39'){   // escape
          if (m_keyval != ''){
            otext.value = m_keyval;
            m_keyval = '';
          }
          hideResult();
          cancelHighlight('i'+m_i);
          m_i = 0;
        }
        if (keycode =='13'){    // enter
          itemText = getItem('i'+m_i);
          otext.value = itemText;
          m_keyval = itemText;
        }
      }
      function setTextValue(i){        
        otext = document.getElementById('tel_search');
        itemText = getItem('i'+i);
        otext.value = itemText;
        m_keyval = itemText;
        m_i = i;
      }
      
      function hideResult(){
        oresult = document.getElementById('result');
        oresult.style.visibility = 'hidden';
      }

      function getItem(id){
        oItem = document.getElementById(id);
        return oItem.innerHTML;
      }
            
      function highlight(id){
        oItem = document.getElementById(id);
        oItem.className = 'highlight';
        oItem.style.backgroundColor = '#789';
        oItem.style.color = '#ee8';
      }
      
      function cancelHighlight(id){
        oItem = document.getElementById(id);
        oItem.style.backgroundColor = '#de8';
        oItem.style.color = '#bbb';
      }
      
      function mHighlight(i){
        if (m_i > 0){
          cancelHighlight('i'+m_i);
        }
        highlight('i'+i);
      }
      
      function handleKeyword(keycode){
        if (!(m_i < 0 && keycode == 40) && keycode != 9 && keycode != 37 && !(m_i < 1 && keycode == 38) ) {
          showResult(keycode);
          if (m_i == -1) m_i = 0;
        }
        else {
          hideResult();
        }
      }
    </script>
  </head>
  <body onclick="hideResult();">
  <div id="search">
    <input type="text" id="tel_search" name="tel_search" onkeyup="handleKeyword(event.keyCode);"/>
    <p>dhtml is fun </p>
    <div id="result">
      <ul>
        <li id="i1" onmouseover="mHighlight(1);" onmouseout="cancelHighlight('i1');" onclick="setTextValue(1)">1erter</li>
        <li id="i2" onmouseover="mHighlight(2);" onmouseout="cancelHighlight('i2');" onclick="setTextValue(2)">2tttye</li>
        <li id="i3" onmouseover="mHighlight(3);" onmouseout="cancelHighlight('i3');" onclick="setTextValue(3)">3erter</li>
        <li id="i4" onmouseover="mHighlight(4);" onmouseout="cancelHighlight('i4');" onclick="setTextValue(4)">4tttye</li>
        <li id="i5" onmouseover="mHighlight(5);" onmouseout="cancelHighlight('i5');" onclick="setTextValue(5)">5erter</li>

      </ul>
    </div>
  </div>
  </body>
</html>

file: default.css
body {background-color: #e34;}
#search {background-color: #478; height: 4em;position: relative;}
#result {background-color: transparent; max-height: 8em; position: absolute;  overflow: hidden; z-index: 500;left:0; top:1.4em; visibility:hidden; width: 10.2em; padding:0; margin:0;}
#result ul {background-color: #9de; list-style-type: none; padding:0; margin: 0}
  #result li {background-color:#de8; color: #bbb; padding:0; margin: 0.2em}
    .highlight {background-color: #9ab; cursor: pointer}
« Newer Snippets
Older Snippets »
Showing 1-2 of 2 total  RSS