SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JSON File open with JavaScript and load a content with Jquery

    Hi,

    I'm not a programmer and have many limitations in JavaScript.

    I'm creating in HTML a registation of data in a form all in Jquery Mobile (i'm a Tradicional Chinese Medicine Doctor and this is for collect data to investigation)

    I have a form in a JS file that have all database creation and registation but i want to have a Dinamic Form that i can change dinamicaly and use a external file for that. my first problem is :

    Insted of having this in my app.js to create a form:

    Code:
    var diagnoseForm = [//Astenia		
    		 { input_type: 'config', id: 'Astenia', lable: 'Astenia' }
    		//,{ input_type: 'input', input_id: 'AsteniaOutro', input_lable: 'Outro' }
    		,{ input_type: 'checkbox', input_id: 'AsteniaType', input_lable: 'Tipo de Astenia', input_list: [{refname:'AsteniaMental', input_lable:'Astenia Mental'},{refname:'AsteniaFisica', input_lable:'Astenia Fisica'},{refname:'Asteniaquepioracomoesforço', input_lable:'Astenia que piora com o esforço'},{refname:'Asteniaaoacordar', input_lable:'Astenia ao acordar'},{refname:'Lentidão', input_lable:'Lentidão'},{refname:'Esgotamentopeloesforço', input_lable:'Esgotamento pelo esforço'},{refname:'AusênciadeAsteniaMental', input_lable:'Ausência de Astenia Mental'},{refname:'AusênciadeAsteniaFísica', input_lable:'AusênciadeAsteniaFísica'}] } 
    ]
    Can i have only this?That load a external JSON file?...

    Code:
    var diagnoseForm = [{'url':'js/TCMForm2014.json'}]


    I'm asking this because i have a data container for html file that i can't load (i'm using XAMPP to simulate)

    My index.html file have this lines:

    Code:
    </head>
         <body>
            <div data-role="page" id="home" data-theme="b">
    		<div data-role="header" data-position="fixed">
    				<h3>TCM Diagnosis</h3>
                    <div data-role="navbar" data-iconpos="top">
                        <ul id="subNavPage">
                            <li><a class="btn-footer" href="parts/home.html" >Home</a></li>
                            <li><a class="btn-footer" href="parts/client.html" >Client</a></li>
                            <li><a class="btn-footer" href="parts/diagnose.html" >Diagnose</a></li>
                            <li><a class="btn-footer" href="parts/config.html" >Config</a></li>
                            <li><a class="btn-footer" href="parts/helper.html" >Helper</a></li>
                </div>
                </div>
    				<div data-role="content" id="MainContainer">
                </div>
    		 </div>
        </body>
    	</html>
    <script src="js/app.js"></script>
    <script>		
    	// Home script
    </script>
    and it should in the main container open other pages like the form...but it returns a blank page without any error...

    What i am doing wrong?

    Here is the Diagnose.HTML:

    Code:
    <div id="contentTitle"></div>
    <div id="contentList"></div>
    <script>		
    	$(document).ready(function() { 		
    		setContentTable();
    		
    		$("#submitform").die("click");
    		$("#submitform").live("click", function(e) { 
    			Diagnose.onSave( $("#appform").serialize() ); 
    			e.preventDefault();
    		});
    	});
    	
    	function setContentTable() {		
    		var html_form  = Diagnose.modelForm();			
    		$('#contentList').html(html_form).trigger("create");
    	}
    </script>
    And here is the JS file that create the HTML:


    Code:
    /* App Functions */
    function PageClick(onEvent) {
    	var idClick = onEvent.attr('href').replace('#','');
    	if ( idClick.match(/(.*).html/) ) {
    		ajaxReq({'url':'parts/'+idClick, 'datatype':'html'}, 'successAddPart');
    	}
    }
    function configClick(onEvent) {
    	var action = onEvent.attr('href').replace('#','');
    	createInitialDB(action);
    }
    
    
    function successAddPart(msg) {
    	$('#MainContainer').html(msg);
    }
    function successAddPartOnErrorAjaxReq(msg) {}
    
    
    
    function successClientDetail(msg) {
    	$('#MainContainer').html(msg);
    }
    function successAddPartOnErrorAjaxReq(msg) {}
    
    var Diagnose = {
    	db: {}, 
    	datarow: '', 
    	
    	onClick: function(onEvent) {
    		var action = onEvent.attr('href').replace('#','');		
    	}, 
    	onAdd: function(msg) {
    		
    	}, 
    	onEdit: function(msg) {
    		
    	}, 	
    	onDelete: function(msg) {
    		
    	},
    	modelForm: function(idType) {
    		html  = '<form id="appform">';
    		html += myForm.field_select('id_client', 'Cliente', Client.getselect(), '', Client.id_client);
    		html += myForm.formBuilder(App.config['diagnose_form']);
    		html += '<a id="submitform" data-role="button" data-direction="reverse" data-rel="back" data-theme="a" href="#" data-icon="gear" data-iconpos="right">Save</a>';
    		html += '</form>';
    		return html;
    	},
    	onSave: function(msg) {
    		// Make insert on DB / Model
    		var json_msg = toJsonString($.unserialize(msg));
    		
    		var jdata = $.parseJSON(json_msg);
    		if (jdata.id_client!=undefined && jdata.id_client!='') {
    			Client.id_client = jdata.id_client;
    		}
    		
    		this.datarow = '['+json_msg.toString()+']';
    		
    		db.transaction(this.onDiagnoseSave2DB, db_error, this.onDiagnoseSave2DBSuccess);
    
    		// $('#contentList').html().trigger("create");
    		$('#contentList').html('<div><h3>New diagnose saved!</h3></div>').trigger("create");
    	},
    	
    	onDiagnoseSave2DB: function(tx) {
    		tx.executeSql('INSERT INTO DIAGNOSTIC (id_diagnose, id_client, diagnostic_date, json_data) VALUES (null, "'+Client.id_client+'", datetime(), "'+escape(Diagnose.datarow)+'")');
    	}, 		
    	onDiagnoseSave2DBSuccess: function(tx, results) {
    		createInitialDB('select');
    		setTimeout("ajaxReq({'url':'parts/clientdetail.html', 'datatype':'html'}, 'Client.requestModelDetail')",1500);
    	}, 		
    	
    	isActive: true	
    }
    Can Anyone Help me?...why can i load this content in the HTML....Why it returns Empty whithout Error??
    Last edited by Pullo; Jun 28, 2014 at 04:17. Reason: Code tags

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,269
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Hi bordanenko, welcome to the forums.

    Well for one thing your mark-up is off
    HTML Code:
        </body>
    	</html>
    <script src="js/app.js"></script>
    <script>		
    	// Home script
    </script>
    Try moving those script tags to before the closing body tag.
    *Running the HTML that is output through http://validator.w3.org/ is a good habit to get into

  3. #3
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've try to do that,

    i've change this lines

    <script src="../js/app.js"></script>
    <script>
    Home script
    </script>


    And it gives a error because the "Home script" is just a note, after that i've try the path of the JS.


    I have another issue that is if i change a line on the device ready the HTML stays always in the index page with the seleted button ON.

    /* On App Ready */
    document.addEventListener("deviceready", onDeviceReady, false);
    $(document).ready(function() {
    // onDeviceReady(); onDeviceReadySampleTest();
    });


    function onDeviceReady() {
    $('#MainContainer').html('App is Ready');

    createInitialDB('select');

    $(".btn-footer").die("click");
    $('.btn-footer').live('click', function(e) {
    Client.Reset();
    PageClick($(this));
    e.preventDefault();
    });
    }


    What i do is remove the tags on the line :

    // onDeviceReady(); onDeviceReadySampleTest();
    to
    onDeviceReady(); onDeviceReadySampleTest();

    that makes me don't change page in HTML.

    so anyway i still don't see other content working correctelly..any ideas?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •