Jump to content

jhanajc

Members
  • Posts

    24
  • Joined

  • Last visited

Everything posted by jhanajc

  1. Thanks, I will check it out.. I'll aim to go through the settings one by one and match them with the w3.css stylesheet.
  2. Hi, I like to use w3.css stylesheets on my web pages. https://www.w3schools.com/w3css/default.asp https://www.w3schools.com/w3css/w3css_downloads.asp Sometimes the styles clash when embedding Caspio content. This led me to thinking it would be a good idea to take the standard w3.css stylesheet and write a like-for-like version for the Caspio class attributes. Has anyone been down this road already? Thanks! Jon
  3. The following code in bold has the desired effect. It triggers a change event on the field after it has been updated by script: var changeEvent = document.createEvent("HTMLEvents"); function concatenate() { mydate = document.getElementsByName("InsertRecordDate")[0].value; document.getElementsByName("InsertRecordDate_With_ID")[0].value = list_id+mydate; changeEvent.initEvent("change", true, true); document.getElementsByName("InsertRecordDate_With_ID")[0].dispatchEvent(changeEvent); }
  4. Hi, Using the code below I am populating a text field on a submission form which is then used as a Parent Field on a Cascading AutoComplete Virtual field triggered when the Date field changes. This technically works but I find that the AutoComplete field does not update immediately unless I physically visit the parent field and make a keystroke (say a type space at the end of the value). How can I force the Cascading AutoComplete field to update immediately? Thanks! <script type="text/javaScript"> function concatenate() { mydate = document.getElementsByName("InsertRecordDate")[0].value; document.getElementsByName("InsertRecordDate_With_ID")[0].value = list_id+mydate; } var list_id = document.getElementsByName("InsertRecordListing_ID")[0].value; var mydate = document.getElementsByName("InsertRecordDate")[0].value; document.getElementsByName("InsertRecordDate_With_ID")[0].value = list_id+mydate; document.getElementsByName("InsertRecordDate")[0].onchange = concatenate; </script> Further information: I suspect it might be that the onchange event is not triggering on the receiving field (Date_With_ID) because the value is being script updated and not manually typed. Trying to find a way of forcing the change event to occur. Any advice appreciated thanks!
  5. Really pleased with the new pricing plans, thank you Caspio!!!!
  6. This could invalidate my business model. Because I've already spent so much time in Caspio, I will see what happens to data stats through optimization: 1. Disabling Ajax on all pages. 2. Streamlining page data as much as possible. 3. Any images optimized to the max. However, a major part of my design is document uploading.. and I haven't even started testing this yet! so I might need to consider an external file repository. Another problem is report printing, going to look at setting up an external PDF generator using PHP/API calls. Caspio are certainly not making it easy for the small guys on a wing and a prayer with little budget. (this is the reality) and if people such as us are squeezed out through startup costs, they will be missing out on a few of these small ventures becoming much larger ventures.
  7. Shocked to find my Data Transfer usage has somehow exceeded 1GB in just 2 weeks! How this is possible in view of the data transfer policy? http://blog.caspio.com/caspio-news/update-on-caspios-data-transfer-policy/ when there are no live users on the system, only me developing it! I will query this with support on Monday but it is potentially a show stopper for me because I can't charge back these levels of over-usage fees to customers.. Seriously, if it's not a mistake and can't be resolved I'll have to pull the plug immediately and use another platform... lol
  8. Yes I was able to hide the entire submission form using the same method.
  9. Could this technique be used to hide the submission form if a virtual field is set?
  10. Hi all, Is it easy to calculate the total number of records in a table to display on a data page? I was thinking of creating a landing page with summary data on it including some record totals. Thanks! JC
  11. Hi, It would be really great to successfully publish datapages in modal blocks (dialog box / popup windows). While experiencing some success at displaying datapages in modals, I can see there are some problems: 1. The entire page refreshes on loading the modal for the first time. Not really a show stopper but something to be mindful of because you see a blank white moment during reload. 2. In a web form datapage, if field validation on submission fails, the page does not return to the modal even when configured to do so via a modal url link. (the popup disappears). 3. Javascript in a page within a modal doesn't run as expected or doesn't seem to trigger at all. Any ideas? JC
  12. The the resulting date from the above script displays perfectly in Chrome. However in Explorer we get NaN/NaN/NaN despite all attempts to force the date to a text string, ( NaN = Not A Number) Is it possible to make the date to display correctly in Explorer? Thanks
  13. Hi Xiang, I've developed it further since, flipped labels and fields horizontally because it looks visually better and dressed it up with styles but the basic idea is the same. Thanks!
  14. Here's a workaround to flip the mm/dd/yyyy format (displayed) to dd/mm/yyyy pasted into the footer: <script> function ukDateFormat (DateTxt) { DateVar = DateTxt; var DateVar = new Date(DateVar); var dd = DateVar.getDate(); var mm = DateVar.getMonth()+1; var yyyy = DateVar.getFullYear(); if(dd<10){ dd='0'+dd } if(mm<10){ mm='0'+mm } var DateVar = dd+'/'+mm+'/'+yyyy; document.getElementById("MY_INPUT_DATE_FIELD_ID").value = DateVar; } ukDateFormat ('[@field:MY_CASPIO_DATE_FIELD]') </script> I will have another look to see if it fixes the date picker issue.
  15. Hi Aurora, Thanks, I checked the localization, it looks alright but it still not behaving correctly. I removed the date picker and turned the form field into a standard text field so I could see what's happening, it seems there is an additional issue. For example: On the web page I'm forced to enter the date as 29/05/2015 When I read the date back to the page it is 05/29/2015 When you look in the table it is 05/29/2015 Caspio localization is set to English UK with default settings. Thanks
  16. Is it possible to call the Caspio data picker from an HTML block? I notice the HTML5 date picker throws an error as it wants yyyy-mm-dd format and the Casio localisation is dd/mm/yyyy format. Thanks Jon
  17. Successful test.. <SCRIPT LANGUAGE="JavaScript"> function saveChange (form) { TestVar =form.inputbox.value; document.getElementById('EditRecordFIELD_X').value = TestVar; document.getElementById("caspioform").submit(); </SCRIPT> <FORM NAME="myform" ACTION="" METHOD="GET"> <INPUT TYPE="text" NAME="inputbox" VALUE=[@field:FIELD_X]><P> <INPUT TYPE="button" NAME="button1" Value="Save" onClick="saveChange(this.form)"> </FORM>
  18. Alternatively, I can construct a form and copy the entered value to the hidden field using javascript. That should work.
  19. Hi Walter appreciated, My goal is to embed an editable Text Field in an HTML Block. We are attempting this instead of using the conventional method so that we can achieve the desired appearance for the datapage. It almost works if I try this: I add the FIELD_X to the datapage, make it Hidden. Then place this code in an HTML Block: <input name="EditRecordFIELD_X" class="cbFormTextField" id="EditRecordFIELD_X" type="text" size="25" maxlength="255" value=[@field:FIELD_X]> If I type "A" in the field and click the standard Update button, I get "A," saved in the table and "A," displayed on the form. If I then type "B" in the field and click the standard Update button, I get "B, A," saved in the table and just "B," displayed on the form. How can we make it behave like a normal editable text field?
  20. Thanks Walter, That would surely work but I was hoping there is away to just place an input text field within the HTML Block on the same datapage. My attempts have failed. Is it not possible? Also found this: http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-convert-existing-html-forms-to-work-with-caspio/ Which describes how to post data from your own external web form to a caspio datapage. Jon
  21. I know this should be easy but.. How can insert a custom INPUT field and a form SUBMIT button within an HTML block on a details report? Thanks! Jon (newb)
  22. Further digging reveals that the problem is related to the code resulting in a <table> within a <table>. Within the datapage, if I set the Section columns to 3 and add three HTML Blocks each formatted with the following code (table formats constructed from <DIV>s), it works much better although it might not be the best way to go.. Please let me know if you have any other techniques to share! Thanks. Jon. TABLE CONSTRUCTED FROM DIV TAGS: <div style="max-width: 583px; min-width: 583px; height: 202px; margin: 5px 5px; display:table; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);"> <div style="display: table-caption;"> <p>This is a Table</p> </div> <div style="display: table-row;"> <div style="display: table-cell;"> <p>Heading 1</p> </div> <div style="display: table-cell;"> <p>Heading 2</p> </div> <div style="display: table-cell;"> <p>Heading 3</p> </div> </div> <div style="display: table-row;"> <div style="display: table-cell;"> <p>Row 1 Column 1</p> </div> <div style="display: table-cell;"> <p>Row 1 Column 2</p> </div> <div style="display: table-cell;"> <p>Row 1 Column 3</p> </div> </div> <div style="display: table-row;"> <div style="display: table-cell;"> <p>Row 2 Column 1</p> </div> <div style="display: table-cell;"> <p>Row 2 Column 2</p> </div> <div style="display: table-cell;"> <p>Row 2 Column 3</p> </div> </div> </div>
  23. Hi all, I have a requirement to arrange fields within a Details datapage into 3 horizontal responsive blocks with captions. I have used the responsive code from the Caspio tech tip and added my own markup in the datapage header. The result when deployed is ok - 3 responsive blocks with shadow borders. However if I insert the same code in HTML Blocks (1 table per block) in a 3 column section, the spacing is different and I lose the nice responsiveness. How can make it work in HTML Blocks? html below. Thanks! Jon (novice at all things web codey) <h3>Vehicle Details</h3> <table style="max-width: 583px; height: 202px; margin: 10px 10px; float: left; table-layout:fixed; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);"> <caption>Summary</caption> <tr> <td style="border: 0px solid black; padding-left:8px"> <h4 style="background-color:#fbbc01;width:120px;padding:3px;border:1px solid black;text-align:center;">[@field:Vehicle_Assets_Reg_Mark]</h4></td> <td rowspan="5" style="padding:8px; border: 0px solid black;"> <img src=[@field:Vehicle_Thumbs_Lookup_Image/] alt="logo" border=3 width=100% /></td> </tr> <tr> <th style="border: 0px solid black; padding-left:8px; color:#666666;">Type</th> </tr> <tr> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Thumbs_Lookup_Type]</td> </tr> <tr> <th style="border: 0px solid black;padding-left:8px;color:#666666;">Variant</th> </tr> <tr> <td style="border: 0px solid black;padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Thumbs_Lookup_Variation]</td> </tr> </table> <table style="max-width: 583px; height: 202px; margin: 10px 10px; float: left; table-layout:fixed; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);"> <caption>Manufacturer / Axle Configuration</caption> <tr> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Make</th> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Wheel Plan</th> </tr> <tr> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Make]</td> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Thumbs_Lookup_Wheel_Plan]</td> </tr> <tr> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Model</th> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Axle Config</th> </tr> <tr> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Model]</td> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Axle_Configuration]</td> </tr> <tr> <th style="border: 0px solid black;padding-left:8px; padding-top:8px; color:#666666;">Maintenance Provider</th> <th style="border: 0px solid black;padding-left:8px; padding-top:8px; color:#666666;">Lift Axle</th> </tr> <tr> <td style="border: 0px solid black;padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Maintenance_Provider]</td> <td style="border: 0px solid black;padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Lift_Axle_Configuration]</td> </tr> </table> <table style="max-width: 583px; height: 202px; margin: 10px 10px; float: left; table-layout:fixed; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);"> <caption>Fleet Information</caption> <tr> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Short Name</th> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Operating Center</th> </tr> <tr> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Short_Name]</td> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Operating_Center]</td> </tr> <tr> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">Fleet No.</th> <th style="border: 0px solid black; padding-left:8px; padding-top:8px; color:#666666;">blank</th> </tr> <tr> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Fleet_No]</td> <td style="border: 0px solid black; padding-left:8px; padding-bottom:8px;">blank</td> </tr> <tr> <th style="border: 0px solid black;padding-left:8px; padding-top:8px;">Status</th> <th style="border: 0px solid black;padding-left:8px; padding-top:8px;">blank</th> </tr> <tr> <td style="border: 0px solid black;padding-left:8px; padding-bottom:8px;">[@field:Vehicle_Assets_Status]</td> <td style="border: 0px solid black;padding-left:8px; padding-bottom:8px;">blank</td> </tr> </table>
×
×
  • Create New...