Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to make it clickable

    i have this contacts.txt (from notepad)

    kate|female|kathryn bailey beckinsale|26-jul-1973|#23 underworld drive|(621) 142-7827|kate@lycans.net
    jessica|female|jessica claire biel|03-mar-1982|27 texas avenue|(53)2344223|jbiel@yahoo.com
    johnny|male|john christopher depp ii|09-jun-1963|711 pirate road|(773) 476-6634|jsparrow@piratebay.org


    this is html and javascript:

    <html>
    <head>
    <title>Practice</title>
    <link rel="stylesheet" type="text/css" title="Preferred" href="css.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
    function syncText() {
    var xhr = new XMLHttpRequest();
    xhr.open("get", "data/contacts.txt", false);
    xhr.send(null);

    if (xhr.status == 200) {
    var data = xhr.responseText;
    var items = data.split("\n");
    items.sort();
    var frag = document.createDocumentFragment();

    for (i=0; i<items.length; i++){
    els = items[i].split("|");
    li = document.createElement("li");
    li.innerHTML = els[0];
    frag.appendChild(li);

    }
    document.getElementById("list").appendChild(frag);

    } else {
    alert("data retrieval failed...");
    }
    }


    </script>


    </head>

    <body onload="syncText()">


    <div id="header">
    <h1>My Contacts</h1>
    <img src="data/resources/contacts.png" alt="Contacts" />
    </div>

    <div>
    <h2>Contact List</h2>
    </div>

    <div id="header2" style="overflow:scroll;">
    <ul id="list"></ul>
    </div>

    <div>
    <h3>Contact Details</h3>
    </div >

    <div id="header3">
    <form>
    <table>
    <tr>
    <td>name:</td>
    <td><input type="text" id="ajaxName" name="name"><td>
    </tr>
    <tr>
    <td>birthday:</td>
    <td><input type="text" id="ajaxBday"name="bday"><td>
    </tr>
    <tr>
    <td>address:</td>
    <td><input type="text" id="ajaxAddress"name="address"><td>
    </tr>
    <tr>
    <td>phone: </td>
    <td><input type="text" id="ajaxPhone"name="phone"><td>
    </tr>
    <tr>
    <td>email:</td>
    <td><input type="text" id="ajaxEmail"name="email"><td>
    </tr>
    </table>
    </form>
    </div>

    </body>
    </html>

    the problem is how to be able to click the retrieved names and place it in the forms...

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    just eyeballing it, I'd say it would be something like this:

    Code:
    for (i=0; i<items.length; i++){
    els = items[i].split("|");
    li = document.createElement("li");
    li.innerHTML = els[0];
    frag.appendChild(li);
    li.onclick=function(){
    document.getElementById("ajaxName").value=this.innerHTML;
    }
    }
    completely untested, but something like that...

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow.. thankz.. im really happy...

    how about if I put the other like the email address.?

    i made

    for (i=0; i<items.length; i++){
    els = items[i].split("|");
    li = document.createElement("li");
    li.innerHTML = els[0];
    frag.appendChild(li);

    p = document.createElement("li");
    p.innerHTML = els[6];

    li.onclick=function(){
    document.getElementById("ajaxName").value=this.innerHTML;
    document.getElementById("ajaxEmail").value=p.innerHTML;
    }
    }

    but the email is not changing.. it's steady
    Last edited by RakiZtahX; 02-17-2013 at 05:08 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    assuming that everything else works, I think it would be more like:

    Code:
    for (i=0; i<items.length; i++){
    els = items[i].split("|");
    li = document.createElement("li");
    li.innerHTML = els[0];
    frag.appendChild(li);
    li.onclick=function(){
    document.getElementById("ajaxName").value=this.innerHTML;
    }
    p = document.createElement("li");
    p.innerHTML = els[6];
    p.onclick=function(){
    document.getElementById("ajaxEmail").value=this.innerHTML;
    }
    }
    although I can't see where you're appending the second li


  •  

    Posting Permissions

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