SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist Miguel61's Avatar
    Join Date
    Mar 2008
    Posts
    402
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Table Edit with Jquery and Ajax

    Hi there, I need your appreciated help.

    Live Table Edit with Jquery and Ajax: http://www.9lessons.info/2011/03/liv...-and-ajax.html

    I have this problem:
    When update the fields in the table MYSQL the spaces between words are eliminated.

    For example this phrase: Hello world !
    In update is stored as: Helloworld!

    Can you help me?
    Cheers

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Miguel61 View Post
    Can you help me?
    If you post your code, then hopefully yes

  3. #3
    SitePoint Evangelist Miguel61's Avatar
    Join Date
    Mar 2008
    Posts
    402
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    If you post your code, then hopefully yes
    Thanks, the code:
    Code:
       
       
    <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" src="jquery-1.7.min.js"></script>
    
    <script type="text/javascript"> 
     
    $(document).ready(function()
    {
    $(".edit_tr").click(function()
    {
    var ID=$(this).attr('id');
    $("#UN_"+ID).hide();
    $("#RE_"+ID).hide();
    $("#VI_"+ID).hide();
    $("#CP_"+ID).hide();
    $("#CM_"+ID).hide();
    $("#PR_"+ID).hide();
    $("#RT_"+ID).hide();
    $("#RF_"+ID).hide();
    $("#RC_"+ID).hide();
     
    $("#UN_input_"+ID).show();
    $("#RE_input_"+ID).show();
    $("#VI_input_"+ID).show();
    $("#CP_input_"+ID).show();
    $("#CM_input_"+ID).show();
    $("#PR_input_"+ID).show();
    $("#RT_input_"+ID).show();
    $("#RF_input_"+ID).show();
    $("#RC_input_"+ID).show();
     
    }).change(function()
    {
    var ID=$(this).attr('id');
    var UN=$("#UN_input_"+ID).val();
    var RE=$("#RE_input_"+ID).val();
    var VI=$("#VI_input_"+ID).val();
    var CP=$("#CP_input_"+ID).val();
    var CM=$("#CM_input_"+ID).val();
    var PR=$("#PR_input_"+ID).val();
    var RT=$("#RT_input_"+ID).val();
    var RF=$("#RF_input_"+ID).val();
    var RC=$("#RC_input_"+ID).val();
     
    var dataString = 'id='+ID+'&UN='+UN+'&RE='+RE+'&VI='+VI+'&CP='+CP+'&CM='+CM+'&PR='+PR+'&RT='+RT+'&RF='+RF+'&RC='+RC;
     
    $("#UN_"+ID).html('<img src="ajax.gif" />');
    $("#RE_"+ID).html('<img src="ajax.gif" />');
    $("#VI_"+ID).html('<img src="ajax.gif" />');
    $("#CP_"+ID).html('<img src="ajax.gif" />');
    $("#CM_"+ID).html('<img src="ajax.gif" />');
    $("#PR_"+ID).html('<img src="ajax.gif" />');
    $("#RT_"+ID).html('<img src="ajax.gif" />');
    $("#RF_"+ID).html('<img src="ajax.gif" />');
    $("#RC_"+ID).html('<img src="ajax.gif" />');
     
    if(UN.length>0 && RE.length>0 && VI.length>0 && CP.length>0 && CM.length>0 && PR.length>0 && RT.length>0 && RF.length>0 && RC.length>0) 
    {
    $.ajax({
    type: "POST",
    url: "UPDATE.asp",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#UN_"+ID).html(UN);
    $("#RE_"+ID).html(RE);
    $("#VI_"+ID).html(VI);
    $("#CP_"+ID).html(CP);
    $("#CM_"+ID).html(CM);
    $("#PR_"+ID).html(PR);
    $("#RT_"+ID).html(RT);
    $("#RF_"+ID).html(RF);
    $("#RC_"+ID).html(RC);
    }
    });
    }
    else
    {
    alert('ko');
    }
     
    });
    $(".editbox").mouseup(function() 
    {
    return false
    });
     
     
    $(document).mouseup(function()
    {
    $(".editbox").hide();
    $(".text").show();
    });
    });
    </script>
    </head>
     
    <body>
     
    <div>
     
    <thead>
    <th scope="col">UN</th>
    <th scope="col">RE</th>
    <th scope="col">VI</th>
    <th scope="col">CP</th>
    <th scope="col">CM</th>
    <th scope="col">PR</th>
    <th scope="col">RT</th>
    <th scope="col">RF</th>
    <th scope="col">RC</th>
    </thead>
       
    <tr id="688" class="edit_tr">
    <th scope="col" class="edit_td">
    <span id="UN_688" class="text">HELLOWORLD!</span>
    <input type="text" value="HELLOWORLD!" class="editbox" id="UN_input_688" />
    </th>
    
    <th scope="col" class="edit_td">
    <span id="RE_688" class="text">RobertREDFORD</span>
    <input type="text" value="RobertREDFORD" class="editbox" id="RE_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="VI_688" class="text">FOLLOWME,54</span>
    <input type="text" value="FOLLOWME,54" class="editbox" id="VI_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="CP_688" class="text">0136</span>
    <input type="text" value="0136" class="editbox" id="CP_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="CM_688" class="text">TOKYO</span>
    <input type="text" value="TOKYO" class="editbox" id="CM_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="PR_688" class="text">FI</span>
    <input type="text" value="FI" class="editbox" id="PR_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="RT_688" class="text">232210</span>
    <input type="text" value="232210" class="editbox" id="RT_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="RF_688" class="text">000</span>
    <input type="text" value="000" class="editbox" id="RF_input_688" />
    </th>
     
    <th scope="col" class="edit_td">
    <span id="RC_688" class="text">329</span>
    <input type="text" value="329" class="editbox" id="RC_input_688" />
    </th>
    
    </tr>
     
    </body>
    </table>
    </html>

    Style.css
    Code:
    table {
    	font: normal 65%/130% Verdana, Arial, Helvetica, sans-serif;
    	border-collapse: collapse;
    	border: 3px solid #f0f8ff;
    	border-top: 5px double #87CEFA;
    	border-bottom: 5px double #87CEFA;
    	text-align:center; 
        margin-left:10px; 
        margin-right:auto; 
        width:100%;
    
    }
    th {
    	font: bold 1.1em/120% Verdana, Arial, Helvetica, sans-serif;
    	padding: 5px 10px;
    	font-variant: small-caps;
    	color: #047;
    	font-weight: bold;
    	text-align: left;
    	letter-spacing: -1px;
    }
    thead th {
    	border: 1px solid #87CEFA;
    	white-space: nowrap;
    	background: #F0F8FF;
    	
    }
    tbody td ,tbody th {
    	padding: 5px 10px;
    	/*background: #fff;*/
    	color: #000;
    }
    tbody th {
    	color: #047;
    	font-weight: normal;
    	font-variant: normal;
    	font-size: 1em;
    }
    tbody tr.odd {
    	border: 1px solid #87CEFA;
    }
    tbody tr.odd td, tbody tr.odd th {
    	background: #F0F8FF;
    }
    tfoot td, tfoot th {
    	border: none;
    	padding-top: 10px;
    }
    caption {
    	font-family: "Georgia", serif;
    	letter-spacing: 2px;
    	font-style: italic;
    	text-align: center;
    	text-indent: 2em;
    	text-transform: uppercase;
    	font-size: 100%;
    	padding: 10px 0;
    	color: #047;
    }
    
    table a:link {
    	color: #DC143C;
    }
    table th a:link {
    	color: #047;
    	text-decoration: none;
    }
    table a:visited{
    	color: #036;
    	text-decoration: line-through;
    }
    table a:hover{
    	color: #000;
    	text-decoration:none;
    }
    table a:active{
    	color: #000;
    }
    
    
    /*****************************************/
    
    .editbox
    {
    display:none
    }
    .editbox
    {
    font: normal 90%/180% Verdana, Arial, Helvetica, sans-serif;
    width:120px;
    background-color:#ffffcc;
    border:solid 1px #000;
    padding:0px;
    }
    .edit_tr:hover
    {
    background:url(icon.gif) right no-repeat #80C8E5;
    cursor:pointer;
    }
    .head
    {
    background-color:#333;
    color:#FFFFFF
    }
    Update.asp
    Code:
    <% Set cn = Server.CreateObject("ADODB.Connection")
          cn.Open "DRIVER={MySQL ODBC 5.1 Driver};...;OPTION=3;" %>
    
    <% If Request.Form("ID") > 0 then      
          SQL = "UPDATE table "
          SQL = SQL & "  SET "
          SQL = SQL & "  UN = '" & Replace(request.form("UN"),"'", "\'") & "' "
          SQL = SQL & ", RE = '" & Replace(request.form("RE"),"'", "\'") & "' "
          SQL = SQL & ", VI = '" & Replace(request.form("VI"),"'", "\'") & "' "
          SQL = SQL & ", CP = '" & Replace(request.form("CP"),"'", "\'") & "' "
          SQL = SQL & ", CM = '" & Replace(request.form("CM"),"'", "\'") & "' "
          SQL = SQL & ", PR = '" & Replace(request.form("PR"),"'", "\'") & "' "
          SQL = SQL & ", RT = '" & Replace(request.form("RT"),"'", "\'") & "' "
          SQL = SQL & ", RF = '" & Replace(request.form("RF"),"'", "\'") & "' "
          SQL = SQL & ", RC = '" & Replace(request.form("RC"),"'", "\'") & "' "      
          SQL = SQL & "  WHERE 1 AND ID = " & Request.Form("ID")
          cn.execute(SQL)  
    %>
    
    <% cn.Close()
       set cn  = nothing %>

  4. #4
    SitePoint Evangelist Miguel61's Avatar
    Join Date
    Mar 2008
    Posts
    402
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    This script working and update the fields in the table MYSQL with the spaces ...
    http://www.aquim.com/web-article-229.html


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •