0

Before I start the reason that I decided on this particular title for my Query is because 1. I am lazy and 2. Its concise.

I am currently doing customizations on an existing MFC project(This is a Windows Application). One of my tasks is the launch a series of forms which gets data from a locally stored (clients end) SQLite Database as displays data on the form.

Going through many of the queries asked, I was able to create a dialog using CHTMLDialog which renders a custom designed HTML.

Here is how my HTML+Javascript looks like:

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        var sqliteDB = null;

        function openSqliteDatabase()
        {
            alert("Database Opening");// This Doesnt Work
            sqliteDB = openDatabase("C:\\mySqlite.db", 1.0, "My Sql");
            alert("Database Opened");

        }

        function closeSqliteDatabase()
        {
            alert("Database Closing");
            sqliteDB.close();// This Doesnt Work
            alert("Database Closed");
        }

        function setPrimaryOptions()
        {

            openSqliteDatabase();
            closeSqliteDatabase();

        }
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var select = document.getElementById("prority");
            select.options.length = 0;
            select.options[select.options.length] = new Option('Text 1', 'Value1');
            select.options[select.options.length] = new Option('2', 'shamil');
            select.options[select.options.length] = new Option('3', 'shamil2');

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[2].cells[i].innerHTML;
                //alert(newcell.childNodes[0].type);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            newcell.childNodes[0].style.display="inline";
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }

        function valChanged(val, crntid) {

        }

    </SCRIPT>
</HEAD>
<BODY onload="setPrimaryOptions()">

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <thead>
                <tr>
                    <th>Select</th>
                    <th>Prority</th>
                    <th>Field1</th>
                    <th>Field2</th>
                </tr>
        </thead>
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD>
                <SELECT id="prority">
                    <OPTION value="ein">0</OPTION>
                    <OPTION value="zwe">1</OPTION>
                    <OPTION value="tri">2</OPTION> 
                </SELECT>
            </TD>
            <TD>
                <SELECT name="Field1" id="Field1" onchange="valChanged(this.value, this.id)">
                </SELECT>
            </TD>
            <TD>
                <SELECT name="Field2" id="Field2">
                </SELECT>
            </TD>       
        </TR>
    </TABLE>

</BODY>
</HTML>

Queries:

  • Is it possible to achieve what I am trying to do (i.e) Query SqliteDB (locally stored) using HTML5 and render the form in a CHTMLDialog?
  • If yes, how do I link my HTML5 with a locally stored SQLite DB?
  • If no, are there any other alternatives that I can look into?

Things Done so far:

  • Started looking into sql.js (Work in progress)

  • Looking at this tutorial

  • Going through this query in hopes that I will figure something out.

If I were able to crack these before you guys do will make sure to post the How DID I DO IT 0_0 here.

Cheers

Community
  • 1
  • 1
Swaminathan Iyer
  • 23
  • 1
  • 4
  • Instead of trying to access SQLite directly from your web context, could you use a separate process to query your data from over XHR? – tmslnz Oct 10 '16 at 13:13
  • @tmslnz: Thanks for the prompt reply. I am new to this and hence am not familiar with the concept of XHR. Do give me some time to snoop around, understand XHR and see if it applies to my scenario. I do hope that you have considered the fact that I want to render the final HTML form in an CHTMLDialog (or any other dialog) and not on a browser, while suggesting your option. – Swaminathan Iyer Oct 10 '16 at 13:24
  • I have managed to resolve the issue. The events (DHTML Events) are now triggered in C++ which in turn calls a JS functionality to update the forms. I am stuck in the last step though and I am hoping someone can help me with that. Is it possible to add a common 'onclick' event for all 'select' items using the anyone of the DHTML_EVENT tags? I plan to post the entire solution (including solution walkthrough for this problem) on someplace like CodeProject once I wrap this up – Swaminathan Iyer Oct 13 '16 at 09:09

0 Answers0