How do you to add page slide to a dynamic created list using jquery mobile?

Question

Here is my html for my populated listview. I have the link grabbed from the php script aswell. Where would i put the page slide function on click event. It wont allow me to but html in the script

   <div data-role="content">
<script type="text/javascript">
                            $(document).on("pagebeforeshow", "#index1", function() {
                                $(function(){
                                    var items="";
                                    $.getJSON("check-events.php",function(data){
                                    $.each(data,function(index,item) 
                                    {
                                    items+="<li><a href="+item.col1+"?eventid="+item.id+">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
                                     });






                                    $("#contacts").append(items); 
                                     $("#contacts").listview("refresh");
                                    });
                                });
                            });  
                        </script>

            <div data-role="fieldcontain">
                        <ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
                     <li data-role="list-divider" role="heading">
                 List view
                </li> 
            </ul>
            </div>

Where would i add this piece this code. It keeps producing an error when i add it like this

items+="<li><a href="+item.col1+"?eventid="+item.id+" data-transition="slide">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";

Any ideas

Working solution php

$data = array();
        while($rowa = mysql_fetch_array($a, MYSQL_ASSOC)) 
            { 
            $row_array['id'] = $rowa['eventid'];
            $row_array['col1'] = "index.html";
            $row_array['col2'] = $rowa['eventname'];
            $row_array['col3'] = date("D jS F Y",strtotime($rowa[enddate]));
            $row_array['col4'] = "slide";
            array_push($data,$row_array);

            }
        echo json_encode($data);
}

changed html

items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""+item.col4+"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";});

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

You need to escape your quotes when putting in the variables (\")

items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""slide"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";

But, on a side note, you should be letting JQuery create your elements for you. See: https://stackoverflow.com/a/4158203/1178781

edited May 23 '17 at 11:57

Community

1
1

answered Apr 18 '13 at 16:45

justderb

2,835
1
25
38

Thank your for your response, The problem is putting data-transition there still doesnt work. It thinks its a variable and its not – Steven Kinnear Apr 18 '13 at 16:50
Is there a Javascript error that prints out to the console when this code is run? Or is it putting it in the DOM, but not showing? – justderb Apr 18 '13 at 16:54
It kept saying missing syntax. which i assumed was the +item. part. On my php side i added the slide as a variable and changed my html and it now works. Ill update my question and see if you think its a good idea. – Steven Kinnear Apr 18 '13 at 16:58
1

If it works, good! But, I would re-work your `items+=` line to let JQuery create elements for you. Also, don't be afraid to rename `col1`, `col2` to friendlier names! – justderb Apr 18 '13 at 17:02
thank you, yes i will look into the link you advised and i will change the names lol. – Steven Kinnear Apr 18 '13 at 17:04

How do you to add page slide to a dynamic created list using jquery mobile?

1 Answers1