Adding data from a database to a text field - jQuery

Question

I created a dynamic list in jQuery, and when the user clicks on an element, he displays them on a new page that displays specific elements for the selected list. So far, for me, they appear inside the various attributes of paragraphs and headings, and so on only for testing.

What I'm trying to do is get the data that is currently being displayed using tags, and instead place them inside the text fields in the form.

A sample code that transfers data and passes them to attributes, etc., looks like this:

<script type="text/javascript"> $(document).on('pagebeforeshow', '#index', function(){ $("#list").empty(); var url="http://localhost/test/login/json4.php"; $.getJSON(url,function(json){ //loop through deals $.each(json.deals,function(i,dat){ $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>"); $(document).on('click', '#'+dat.dealid, function(event){ if(event.handled !== true) // This will prevent event triggering more then once { dealObject.dealID = $(this).attr('id'); dealObject.restaurantid = $(this).attr('data-restaurantid'); dealObject.name = $(this).find('h1').html(); dealObject.image = $(this).attr('data-image'); //dealObject.dname = $(this).find('input').html(); dealObject.dname = $(this).find('input').val(); $.mobile.changePage( "#index2", { transition: "slide"} ); event.handled = true; } }); }); $("#list").listview('refresh'); }); }); $(document).on('pagebeforeshow', '#index2', function(){ //$('#index2 [data-role="content"]').html('You have selected Link' + dealObject.dname); $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject); $('#index2 [data-role="content"]').find('#title').html(dealObject.name); //$('#index2 [data-role="content"]').find('#description').html(dealObject.dname); $('#index2 [data-role="content"]').find('#name').html(dealObject.dname); }); var dealObject = { dealID : null, restaurantid : null, name : null, image : null, dname : null } </script> 

Here's a snapshot of the 2 html index to the end of the div content:

  <div data-role="page" id="index2"> <div data-role="header"> <h1> Find A Deal </h1> </div> <div data-role="content"> <?php if( !isset( $_SESSION ) ){ session_start(); } if( isset( $_SESSION['username'] ) ){ echo "."; } ?> <label for="name">Deal Name:</label> <input type="text" value="" name="name" id="name"/> <label for="desc">Description</label> <input type="text" value="" name="desc" id="desc"/> <a data-role="button" id="submit-button" data-theme="b">Submit</a> <img src="" width="100px" height="100px" id="deal-img"> <h1 id="title"></h1> <h3 id="description"></h3> <p id="name"></p> </div> 

Answer 1

 dealObject.dname = $(this).find('input').html(); 

Are you setting it to innerHTML of input type = 'text' element? The innerHTML element of type = 'text' element should always be returned as an empty string.

I think you should use .val ()

 dealObject.dname = $(this).find('input').val(); 

Answer 2

Oh, pity, I did not look at it close enough .... this is probably because there are several types of input = "text elements" ... This means that it corresponds to multiplex elements. To confirm my theory, you should try this ...

 dealObject.dname = $(this).find('input').eq(0).val(); 

By adding .eq (0), it should only do this with the first input type = 'text' element, which is id = 'name'

Answer 3

Found your problem, name cannot be used as variable name inside js object.

Edit:

 var dealObject = { dealID : null, restaurantid : null, name : null, image : null, dname : null } 

like that:

 var dealObject = { dealID : null, restaurantid : null, shortname : null, image : null, dname : null } 

Also use this:

 $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description); $('#index2 [data-role="content"]').find('input#name').val(dealObject.dealName); $('#index2 [data-role="content"]').find('input#did').val(dealObject.dealID);