SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to enable click in retrieved fragments

    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 Code:
    <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...
    Last edited by cpradio; Feb 17, 2013 at 10:32. Reason: Added [html] tags


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
  •