Question

I’m new to using Jquery so forgive my ignorance.
I’ve made a dynamic list from a local mysql data and when the user selects one of the values on the list I want some of the selected information to appear in textbox’s. I was successful in gathering the info I needed and setting the value to various attributes tags. However when I finally got one of the values attached to a textbox it comes up saying

“[object Object]”

in the textbox. I read about a conversion of this to text but can’t seem to figure out where exactly this needs to go in my sample exercise. I’m wondering if anyone could help me out?

A sample of the code which renders the information and sets the value to the textbox is the following:

    <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('desc').eq(0).val(this);

                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       

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


    });

    var dealObject = {
        dealID : null,
        restaurantid : null,
        name : null,
        image : null,
        dname : null
    }    
</script>

And this is where I’m going displaying it:

<form id="test">
        <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>

If anybody can help me I’d seriously appreciate it. Thanks in advance!

Answer 1

Your main problem was name attribute inside a dealObject, name is a special word and it can’t be used as a object attribute name.

In your case you were adding it to the correct input but dealObject.name don’t exist. And because of how jQuery Mobile works even empty element will return “[object Object]”.