CODEWITHSUNDEEP
jqueryajaxtextbox
user2025934
user2025934

Reputation: 129

object Object return when trying to set value to textbox - Jquery

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!

Upvotes: 2

Views: 1762

Answers (2)

Gajotres
Gajotres

Reputation: 57309

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]".

Upvotes: 1

Seder
Seder

Reputation: 2763

You are trying to set the value for the text val(this) and this as an Object from the each

If you are trying to get the value you can say 

 dealObject.name = $(this).find('desc').eq(0).val();

If you are assigning a value 

dealObject.name = $(this).find('desc').eq(0).val('My Value');
or 
dealObject.name = $(this).find('desc').eq(0).val(this.something);

So Your code 

    <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();

                        $.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>

I hope this can help

Upvotes: 0

Related Questions