Need to restart app..Using Phonegap with lawnchair

Question

I need to restart my app everytime I insert,delete or update my data. Data is inserting and deleting properly...but dont know why i need to restart my app everytime to get the effect.

I want to use the file structure for this app.

<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lawnchair.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dom.js"></script>
<script>
    $(function(e) {

        var details = Lawnchair({name:'details',adapter:'dom'},function(e){
            //this.nuke();
        });

        details.all(function(data){
            for(var i = 0; i<data.length;i++)
            {
                //alert(data.length);
                var id = i + 1;
                //alert(id);
                document.getElementById("id").value = id;
                var listdiv = document.createElement('li');
                listdiv.setAttribute('id','listdiv' + i);
                listdiv.innerHTML = "ID : " + data[i].value.id + " | " + "Name : " + data[i].value.name + " | " + "Desc : " + data[i].value.desc;
                $('#show_list').append(listdiv);
            }
        });

        $('#save').click(function(e){
            //alert($.now());
            var obj1 = {id:$('#id').val(),name:$('#name').val(),desc:$('#desc').val()};
            //alert("listdiv" + obj1.id);
            details.save({key:"listdiv" + obj1.id,value:obj1});
            alert("Data Saved Successfully");
            //location.reload();
        });

        $('#del').click(function(e){
        if(document.getElementById("name").value != "")
        {
            var id = document.getElementById("id").value;
            details.remove("listdiv" + id,function(obj1){
                $("input:text").val("");
                document.getElementById("show_list").innerHTML = "";
                alert("Data Removed Successfully");
            });
        }
        else
        {
            alert("Please Select Data");
            return false;
        }
        });

        $('li').live('click',function(e){
            //alert(this.id);
            details.get(this.id,function(obj){
                document.getElementById("id").value = obj.value.id;
                document.getElementById("name").value = obj.value.name;
                document.getElementById("desc").value = obj.value.desc;
            });
        });
    });
    </script>

  </head>
  <body>

  </body>
</html>

whatever i have inserted or deleted/updated is being achieved.. — Aakash Jain, Feb 12 '13 at 09:31
This was not my question, my question is what do you want to achieve? — Gajotres, Feb 12 '13 at 09:34
I want to reflect the data in my li tags as soon as i modify or insert a new data...i dont want to restart my app to get the reflection.. — Aakash Jain, Feb 12 '13 at 09:40
So you want to jQuery Mobile to restyle your dynamically added content? If this is a case it can be easily achieved. — Gajotres, Feb 12 '13 at 09:43
yes.. due to that i dont have to restart my app again n again. — Aakash Jain, Feb 12 '13 at 09:45

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

Because new content has been appended code should look like this:

    details.all(function(data){
        for(var i = 0; i<data.length;i++)
        {
            //alert(data.length);
            var id = i + 1;
            //alert(id);
            document.getElementById("id").value = id;
            var listdiv = document.createElement('li');
            listdiv.setAttribute('id','listdiv' + i);
            listdiv.innerHTML = "ID : " + data[i].value.id + " | " + "Name : " + data[i].value.name + " | " + "Desc : " + data[i].value.desc;
            $('#show_list').append(listdiv);+
        }
        $('#show_list').listview().listview('refresh');
    });

This line has been added (#show_list should be listviews id) :

$('#show_list').listview().listview('refresh');

If you want to find more about this (how to enhance dynamically added content in jquery Mobile) take a look at my other ARTICLE. Or it can be found HERE in my other answer. Read it carefully because there are numerous ways how his can be achieved.

EDIT :

And here's a fix for your problem: http://jsfiddle.net/Gajotres/3cuPP/

When you click save button you also need to append new data. In your case I have used all function to get all data, that same data is then appended to listview and refreshed.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 12 '13 at 09:50

Gajotres

57,309
16
102
130

getting a error. Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' – Aakash Jain Feb 12 '13 at 09:59
then try this: $('#show_list').listview().listview('refresh'); – Gajotres Feb 12 '13 at 10:04
Also carefully read my other article, this error was described there. – Gajotres Feb 12 '13 at 10:07
Can you put this new line after for loop? – Gajotres Feb 12 '13 at 10:08
Ok lets do it in a different fashion. Problem with jQuery Mobile is that it hates usage of this syntax $(function(e) { or document ready to initialize a code. All jQuery mobile page handling should be done inside proper page event. Can you tell me id of a page you are using to hold a listview? Worst case scenario do you have a live example or can you send me your code and I will make it work. – Gajotres Feb 12 '13 at 10:15
page id is "page"..can i get your mail id to send you the whole code?? or should i put it on jsfiddle and give you the link??? – Aakash Jain Feb 12 '13 at 10:20
Whole code, Sorry in hurry paste all in javascript. http://jsfiddle.net/Aakash_Jain/LbFUr/ – Aakash Jain Feb 12 '13 at 10:24
You will find it in my profile, but I can also write it here: dragan.gaic@gmail.com – Gajotres Feb 12 '13 at 10:24
its ok...forwarded you the jsfiddle link above you can check whole code there. – Aakash Jain Feb 12 '13 at 10:26
I have found another problem, listview refresh was not enough. When you save new data you must also trigger details.all function. If you take a look it is only triggered at a begging but not when save is pressed. – Gajotres Feb 12 '13 at 11:12
i already tried calling it after saving data...but problem persists.. let me check it once again doing this... – Aakash Jain Feb 12 '13 at 11:29
it is showing data after saving it but just for 1 seconds. again page automatically gets refresh and data get disappears.. again have to restart app to see data...showing but for a second only.. – Aakash Jain Feb 12 '13 at 11:41
Are you talking about your or my example? In my example everything works fine. When you add data it is saved and displayed in listview, nothing disappears after that. – Gajotres Feb 12 '13 at 11:48
1

thanks Gajotres...very thankfull to you...i m new to stackoverflow and u helped me in my very first post...cnt thank you enough brother... – Aakash Jain Feb 12 '13 at 11:51

Need to restart app..Using Phonegap with lawnchair

1 Answers1