CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Andrew
Andrew

Reputation: 156

jQuery Mobile - dynamically replacing script tag within html

I can see the value when I print it out within console log, however I don't see the value being populated in the html page within list.html. So I am guessing that I need to make sure that the element has been loaded prior to it? Any advice would be greatly appreciated.

html:

<script type="text/html" id="searchPickPlaceTemplate">
<div class="searchPickWhere_box">
    <ul data-inset="true">                             
        <li><a data-transition="slide" id="searchPickWhere" href="list.html">{{whereSearch}}</a></li>                             
     </ul>
 </div>

​

Script:

 $('#restWhere').bind('touchstart mousedown', function (e) {                
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: WebServiceURL + "GetSuburbsWithPlacesAndCity",
                dataType: "json",
                data: "{'cityId':'" + cityId + "', 'categoryId': '" + categoryId + "'}",
                success: function (result) {
                    $("#searchPickPlace").html("");
                    $.each(result.d, function () {
                        $(document).ready(function () {
                            console.log('SubrubName asdfsd ' + this.name);
                            var test = $("#searchPickPlaceTemplate").text();
                            test = test.replace("{{whereSearch}}", this.name);
                            $("#searchPickPlace").append(searchPickRestaurnt);
                        });
                    });
                }
            });
        });

Upvotes: 0

Views: 638

Answers (2)

Shibbir Ahmed
Shibbir Ahmed

Reputation: 1350

always try to place your JavaScript codes just before the html body tag. for example:

<body>
    your html code
    <script>
         // your js code
    </script>
</body>

or use the jQuery document ready function. you have to use it only once, NOT in every iterations.

Thank you

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

First:

  1. Remove $(document).ready(function () { from each block, it is not going to work with it and you don't need it.

  2. Replace this line: $("#searchPickPlace").append(searchPickRestaurnt); with this $(".searchPickPlace").append(test); You were appending the wrong thing to the wrong element.

Here's an dumb down example of your code: http://jsfiddle.net/Gajotres/tJBGw/

So it should look something like this:

$('#restWhere').bind('touchstart mousedown', function (e) {                
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: WebServiceURL + "GetSuburbsWithPlacesAndCity",
            dataType: "json",
            data: "{'cityId':'" + cityId + "', 'categoryId': '" + categoryId + "'}",
            success: function (result) {
                $("#searchPickPlace").html("");
                $.each(result.d, function () {
                    console.log('SubrubName asdfsd ' + this.name);
                    var test = $("#searchPickPlaceTemplate").text();
                    test = test.replace("{{whereSearch}}", this.name);
                    $(".searchPickPlace").append(test);
                });
            }
        });
    });

Upvotes: 1

Related Questions