Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Caspio Bridge
    • Caspio Apps for Ukraine
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

  1. Hello everyone, Does someone know how to dynamically change the font color of a text column in a tabular report? For instance, I have a field named Indicator and it is the second column in the report. If the text value is equal to "Final", the font color must be set to red. Thanks in advance. -dspolyglot
  2. Hi, I have an html page with 2 datapages in it. Both are in their own divs. I'm trying to get the second div called 'callback' to refresh every 6 seconds. I've got this javascript to do it function autoRefresh_div() { $("#callback").load("https://c1eru548.caspio.com/dp.asp?AppKey=f6344000919808bbf8fb4bb59cec&xip_Email=[@authfield:Email]&xip_Current_Password=[@authfield:Current_Password]"); } setInterval('autoRefresh_div()', 6000) The URL in the js is the deployment URL from Caspio for the datapage I want refreshing. Users login into the app and the first page they get is this html page. Both divs load fine at this stage. After 6 seconds the second div refreshes fine, but the system is putting up the User Name and Password fields again so they have to login again. As you can see I've tried to add these parameters to the URL so it autologs in. However, if I paste the URL it to the same brower window where the two Datapages are it works fine. So it works if I open it in a full pages after the initial login, but it won't work if it's refreshing a div in the same page. Any help much appriciate.
  3. I have a text field with id=TextField. When the user types 10 into this field I would like the font color of 10 to change immediately to red (and if possible change the background color of the text field). It seems the best way to do this is change the CSS style of TextField when 10 is entered into this field. I searched online but couldn't get any of the available code to work. Thanks.
  4. Hi, Just wanna share this script I made that changes the background color of each record in a Gallery Report DataPage when clicking the button. For the button: <button onclick="RandomColor()">Try it</button> For the function that's responsible for changing the colors (For this one, there is no fixed set of color because this makes use of randomizers for setting the color code, so all colors possible can show up): <script> function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = '#' + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2)) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a00071c83c69ac9947d1bfd9 Alternatively, if you only wish to have a predefined set of colors to choose from, you can use this (simply change the colors in the array to your liking): <script> var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"]; function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a000574d59f66468479b955a Hope this helps!
  5. Javascript help please I have a web page on which I wish to display a hyperlink depending on the status of a specific field from my authentication table. The authorisation field “[@authfield:Staff_List_Branch_Type]” has two options which are “FS” or “SIS”. Depending on the authorisation of the user I would like to display a link that will take the user to a specific web page depending on their Branch_Type status. So if your autfield branch type is “FS” a link will display that will take you to web page A, however if your branch is “SIS” a link will display that will take you to web page B. There must only be one link displayed Any help or ideas greatly appreciated Steve
  6. I am trying to run the following JS to make sure the value in one field has been entered in decimal form, but I can't get it to work. I have tried multiple iterations/adaptions of suggestions I have found on the forums. Any help would be appreciated. Thank you! <script type="text/javascript"> document.addEventListener('BeforeFormSubmit', function () { event.preventDefault(); var a = document.getElementsByName("InsertRecordSplit_To_Agent"); if (a[0].value <=0 || a[0].value >1) { alert('Split to Agent value is not in the correct range. Please enter split percentage in decimal form.'); } else { document.forms["caspioform"].submit(); } }); </script> Forum posts/pages I have tried to use for adaptions/reference https://howto.caspio.com/datapages/ajax-loading/
  7. Hello Caspio Family, Unfortunately, Caspio doesn't have a feature that would allow validating the date before the Submission Form. The only way I found using Caspio standard features is to show a warning message when the date doesn't fit the condition (e.g. when the date should not be prior to today). You can do that with the help of rules. I will show you an example with two dates 'Start Date' and 'End Date' with conditions: the Start Date shouldn't be prior to today and the End Date should not equal or be before the Start Date. 1) Add 2 HTML blocks beneath each Date field and add a section to each HTML block 2) Inside HTML blocks we need to add some warning message in case the condition is not met 3) Create 2 Rules as on screenshots That solution will show our warning messages, but won't prevent form submission if a user disregards the warning. But if it is necessary to let users submit only correct dates, you can use the second solution with JavaScript: 1. Insert Header&Footer, HTML block 1, HTML block 2, and place them below our Date fields. No need to add extra sections. 2. In the Header enable 'Source' and paste the code:<script>document.addEventListener("BeforeFormSubmit", function (event) {startDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;warn1 = document.querySelector("#warning1");warn2 = document.querySelector("#warning2");var today = new Date();var dd = String(today.getDate()).padStart(2, '0');var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!var yyyy = today.getFullYear();today = mm + '/' + dd + '/' + yyyy;if (startDate < today) {event.preventDefault();warn1.style.display = 'block'} else {warn1.style.display = 'none'}if (endDate <= startDate) {event.preventDefault();warn2.style.display = 'block'} else {warn2.style.display = 'none'}});</script> 3. In the HTML block 1 enable 'Source' and paste:<span id="warning1" style="color:#FF0000;display:none;">Start date cannot be in the past or empty</span> 4. In the HTML block 2 enable 'Source' and paste:<span id="warning2" style="color:#FF0000;display:none;">End date cannot be prior or same as Start date or empty</span> 5. Make sure your datafield 1 and datafield 2 are called 'DateStart' and 'DateEnd' respectively or in the JavaScript added to the Header you need to replace in the linesstartDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;to the name of the fields you have. You can test to see how it works on my DataPages: 1st solution with Rules 2nd solution with JS
  8. Hi, So I have an HTML DataPage wherein I embedded multiple Report DataPages as iFrames. Would it be possible for me to have a button in the HTML DataPage that activates all the Download Data link for each of the Report DataPages so that all of them are 'clicked' all at once then generates the documents all at once? This way I wouldnt have to download them individually.
  9. I noticed that multiple sections with different number of columns per section on Details DataPages can lead to unequal white space distribution. It happens because CSS grid-template columns are not equal: I am sharing the following JavaScript that addresses this matter: <script> if(typeof mainDataPageReadyHandler == 'undefined') { const GetNumberOfGridColumns = (columnTemplateString) => { return columnTemplateString.split(' ').length } const getSectionWidth = (HTMLSection) => { return parseFloat(window.getComputedStyle(HTMLSection).getPropertyValue('width').replace('px', '')) } const generateGridTemplateColumnsString = (totalGridColumnsWidth, numberOfGridColumns) => { let gridTemplateColumnsString = '' let columnWidth = totalGridColumnsWidth/numberOfGridColumns for (let i=0; i<numberOfGridColumns; i++ ) { gridTemplateColumnsString+= `${columnWidth}px ` } return gridTemplateColumnsString } const setGridTemplateLayout = (HTMLSection, columnTemplateStr) => { HTMLSection.style = `grid-template-columns: ${columnTemplateStr};` } const mainDataPageReadyHandler = () => { let section = document.querySelector('section[id*="cbTable"]') let gridComputedStyleArr = window.getComputedStyle(section).getPropertyValue('grid-template').split(' / ') let columnTemplateString = gridComputedStyleArr[1] setGridTemplateLayout(section, generateGridTemplateColumnsString(getSectionWidth(section), GetNumberOfGridColumns(columnTemplateString))) } window.addEventListener('resize', mainDataPageReadyHandler) document.addEventListener('DataPageReady', mainDataPageReadyHandler) } </script> Hope it helps somebody. If you notice any corner cases that were not considered, feel free to leave your suggestion
  10. Hi everyone, I am encountering an issue wherein a "Data Table" tooltip appears everytime I hover on a report data cell. I want to remove that one. Please help. -dspolyglot
  11. I have a submission form with a couple of checkboxes. Ideally, it would be mandatory for one of the two checkboxes to be selected. However, my primary concern is that both checkboxes cannot be selected so I want to toggle off one when the other is checked. I have been playing around with other javascript code I have found on the Caspio forum but have not had any success getting it modified and working. Following is my attempted code on two checkboxes, one named "pure" and the other "mix". Any help for a javascript newcomer would be appreciated... <script type="text/javascript"> /* Get value of the Yes/No fields */ var cb_pure = '[@field:pure]'; var cb_mix = '[@field:mix]'; if (cb_pure == 'Yes') { /* make sure cb_mix is deselected */ document.getElementById("InsertRecordmix").checked=false; } if (cb_mix == 'Yes') { /* make sure cb_pure is deselected */ document.getElementById("InsertRecordpure").checked=false; } </script>
  12. In an html block on a Details datapage, I'm trying to show buttons with hyperlinks to social media pages using font awesome icons. The issue, though, is I need to show/hide these font awesome icons based on whether the datafield used for the url is null/blank or not. Basically, if the user has not entered a url link in the 'Facebook' field then I need to hide the Facebook font-awesome/hyperlink (because there is no url for Facebook for that record). I just want to show the social media links that have actual urls and hide those that don't. Here's the code to a couple of those hyperlinks (Facebook and LinkedIn- there are actually 6 in total but I didn't want to clutter this question). <div style="font-size:20px"><a href="[@field:myFacebookfieldname]" target="_blank"><i aria-hidden="true" class="fa fa-facebook-official"></i></a>&nbsp;&nbsp;<a href="[@field:myLinkedInfieldname]" target="_blank"><i aria-hidden="true" class="fa fa-linkedin-square"></i></a></div> For example, if [@field:myFacebookfieldname]=null then I need to hide (display:none) that hyperlink so it- the font awesome icon- doesn't show. I'm not a js expert so I hope someone here could help get this to work. Many thanks in advance. I was trying something like the below, to put the 'section1' attribute into the hyperlink above but that's not correct... <script> var v_fbook = parseFloat(document.getElementById("EditRecordmyFacebookfieldname").value); if(!isNaN(v_fbook)) { document.getElementById('section1').style.display = "block"; } else { document.getElementById('section1').style.display = "none"; } </script>
  13. Hi, Just wanna share this code that I came up with where I have a Tabulare Report with Totals & Aggregations and a link at the footer of the DataPage wherein that link's destination URL will depend on the value of the Aggregate. In this example, if the Aggregate has a value of zero, the link will lead you to URL1, but if it has a value that is greater than zero, it will lead you to URL 2. The first thing you're gonna want to add is the link on the footer (it could also be in the header, does not matter): <a id="conditionalbutton">CONDITIONAL BUTTON</a> You can change this up to however you want but you have to make sure to keep in the id="conditionalbutton" part. This is important because this is what the JavaScript (provided in the next step) will be referring to when assigning the appropriate URL to the link depending on the Aggregate value. Below is the JavaScript code (which you'll paste on the footer): <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var agg = document.querySelector(".cbResultSetTotalsDataCellNumberDate").innerHTML var cb = document.querySelector("#conditionalbutton") if(Number(agg) > 0){ cb.href = "www.google.com" }else{ cb.href = "www.facebook.com" } }); </script> You can replace the URLs as you see fit. In the above example, replace "www.google.com" with the URL that you want for the link if the Aggregate has a value greater than zero. Replace "www.facebook.com" with the URL that you want for the link if the Aggregate;s value is zero.
  14. Hello everyone, Thank you in advance for reading this and potentially responding. Long story short: I have a simple Pivot data page with item names and months as well as submission status. This is used exclusively to spot records per item/month that have not been "submitted". My stakeholders want to see the status in color. Green for "Submitted", yellow for "Partly submitted", and red for "Not submitted". Whether it's text or background color doesn't really matter much but I prefer background. I think I am capable of adjusting the tones on my own, but I struggle with making the script work in the first place. The specific names of my fields are: Item Name, Month, Status. Here is what I already tried, unfortunately, none of it ever displayed. 1. Adding a Header and Footer or an HTML block on the results page and disabling HTML in the tab Advanced. 2. Taking various scripts from Caspio guides and forums and attempting to change them to fit my field names and Status values. For example, starting with this script from the guide: <span id="[@field:ID#]changeColor1" style="color:#008000"></span> <span id="[@field:ID#]changeColor2" style="color:#0000FF"></span> <span id="[@field:ID#]changeColor3" style="color:white; background:red"></span> <script> if([@field:GPA#]>=3.5 && [@field:GPA#]<=4.0 ) { document.getElementById('[@field:ID#]changeColor1').innerHTML='A'; } else if([@field:GPA#]>=3.0 && [@field:GPA#] <3.5) { document.getElementById("[@field:ID#]changeColor2").innerHTML='B'; } else if([@field:GPA#]>=2.5 && [@field:GPA#]<3.0 ) { document.getElementById("[@field:ID#]changeColor3").innerHTML='C'; } </script> Let's leave the colors as they are since I am confident with that part. Here is my attempt at replacing the values with my own (the only relevant field is Status and it has three values: "Submitted", "Partly submitted", "Not submitted"): <span id="[@field:Status]changeColor1" style="color:#008000"></span> <span id="[@field:Status]changeColor2" style="color:#0000FF"></span> <span id="[@field:Status]changeColor3" style="color:white; background:red"></span> <script> if([@field:Status] = 'Submitted') { document.getElementById('[@field:Status]changeColor1').innerHTML='Submitted'; } else if([@field:Status] = 'Partly submitted') { document.getElementById("[@field:Status]changeColor2").innerHTML='Partly submitted'; } else if([@field:Status]= 'Not submitted') { document.getElementById("[@field:Status]changeColor3").innerHTML='Not submitted'; } </script> And here is how I set it up (please mind that while I tested HTML blocks instead in other data pages and it still didn't work, you can't add them in the pivot table, so I'm limited to the Header and Footer): Nothing changes. I even made a draft table and a data page to test some of the scripts with their original field names but somehow it still didn't work for me. I will be grateful for any help! Thank you, Dominika
  15. Hi, Just want to share this bit of JavaScript and CSS that creates a fixed "scroll to top" button on the corner of your DataPage and shows up only when the user starts to scroll the page. (I implemented this on my Tabular Report DataPage that has many records per page) Header (CSS): <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } </style> Footer (the actual button and the JavaScript): <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <script> document.addEventListener('DataPageReady', function (event) { mybutton = document.getElementById("myBtn"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (window.scrollY==0) { mybutton.style.display = "none"; } else { mybutton.style.display = "block"; } } }) function topFunction() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script>
  16. I am using iframes for a navigation bar from the HowTo article posted Here. The pages inside this tabbed navigation share the same authentication. I have login re directions with their own authentications as well. When I am redirected to the page with the iframes, I still need to log in to the other datapages on the tabs. From there, I can either log in again or refresh the entire page myself (or, really, I can just refresh the iframe I am in and that works too). I know iFrames are tricky and I really don't want to mess with them. I would rather have my employees have to endure another 1 1/2 seconds to have it working right. Could someone help me with a script that reloads the page ONCE when the page is fully loaded? I have been able to get it to refresh, but it keeps refreshing. I am working with onclick query string values so I am not too sure if appending the URL once loaded would work either.
  17. Hello All! I am trying to figure out how to refresh an iframe from a popup window. I can do it when the popup is called from the main page (ADDing records), but I can't figure it out for a popup that is called from within the iframe (EDITing records). In addition to residing within an iframe the button to call the EDIT popup is a Caspio Data Page and is built from javascript during page load. Please consider the following scenario. (I removed classes, titles, and other irrelevant items for simplicity) Main Page: <div id="vehicles"> <div class="frmHeader"> <h2>Vehicles</h2> <a onclick="popupWindow('addVehicle.html')"></a><!-- ADD vehicle --> <a onclick="ifrRefresh('ifrVehicle')"></a> </div> <iframe src="lic/vehicle.html" name="ifrVehicle" id="ifrVehicle"></iframe> </div> Iframe Content html file: <div id="ifrContentVehicle" class="ifrContent killHeader"> <script src="/scripts/e1.js"></script> <script>try{f_cbload("***","http:");}catch(v_e){;}</script> </div> Iframe Content after load: <div id="ifrContentVehicle" class="ifrContent killHeader"> <form id="caspioform"> <div> <table name="cbTable"> <tbody> <tr> <td> <a onclick="popupWindow('editVehicle.html?VehicleID=*')"></a><!--EDITv--> ... Add Vehicle: <script> window.onunload = refreshParent; function refreshParent() { window.opener.ifrVehicle.location.reload(); } </script> This works to refresh my iframe named ifrVehicle. However, I cannot get it to work with the Edit popup. Any help will be greatly appreciated! CHAD
  18. This thread has parts and answers in other threads, but none of them solve doing this in a Submission form so I thought a new thread that unified this info would be helpful to anyone who needs this kind of solution. @Meekeee has posted a really cool solution for pushing calendar events via download from Caspio to Google, Apple, MS calendars, which is extremely beneficial: https://jekuer.github.io/add-to-calendar-button/ and https://github.com/jekuer/add-to-calendar-button. There's a few issues in using this solution with Caspio, though, that I haven't been able to figure out--mostly when it's deployed in a submission form. The issue is you need to get the user's input from the submission form to populate the values for the exported event's name, description, BeginDateTime, EndDateTime, and Location. On a Details page it's fairly straightforward, using [@field:BeginDate], etc. But the [@field:..] method isn't available on a Submission form, only Authentication fields can be used that way. I've tried using variables to get the field values (and testing with a 'dead' button and alert box confirmed that the values were captured correctly). The problem is I don't know how to use those variables in the event export code that goes into the datapage (there are other files, css, js, etc. that are referenced from elsewhere). This is the code that gets the values and coverts the date/time field to ISO formatting for the export: function getevent(){ var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value; var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value; var v_location = document.getElementsByName('InsertRecordTasksTimeline_Location')[0].value; Stamp = new Date(document.getElementById('InsertRecordTasksTimeline_CalDate').value); Hours = Stamp.getHours() Mins = Stamp.getMinutes(); v_BeginDate=('' + Stamp.getFullYear() +"-"+ (Stamp.getMonth()+1) + "-" + Stamp.getDate() +"T"+ Hours + ":" + Mins); Stamp2 = new Date(document.getElementById('InsertRecordTasksTimeline_CalEnd').value); Hours = Stamp2.getHours() Mins = Stamp2.getMinutes(); v_EndDate=('' + Stamp2.getFullYear() +"-"+ (Stamp2.getMonth()+1) + "-" + Stamp2.getDate() +"T"+ Hours + ":" + Mins); } This is @Meekeee's code (there's variations, I'm using one that uses a normal button to call it) that creates the button with the event download options: <button id="default-button" name="submitevent">Save/Close</button> <script type="application/javascript"> const config = { "name": "tile of event", "description": "notes for the event", "startDate" : "2022-05-21T10:15", "endDate": "2022-05-21T12:30", "location":"location of event", options: ["Google", "Apple","Microsoft365"], timeZone: "currentBrowser", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', ()=> atcb_action(config, button) ) </script> The issue is getting the variable values into the " " part of the code. For example, "name": "tile of event", will work with "name": "[@authfield:Company]", but I can't figure out how to use the variables. It would be something like this (but it doesn't work, though): <button id="default-button" name="submitevent">Save/Close</button> <script type="application/javascript"> const config = { var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value; var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value; var v_location = document.getElementsByName('InsertRecordTasksTimeline_Location')[0].value; Stamp = new Date(document.getElementById('InsertRecordTasksTimeline_CalDate').value); Hours = Stamp.getHours() Mins = Stamp.getMinutes(); v_BeginDate=('' + Stamp.getFullYear() +"-"+ (Stamp.getMonth()+1) + "-" + Stamp.getDate() +"T"+ Hours + ":" + Mins); Stamp2 = new Date(document.getElementById('InsertRecordTasksTimeline_CalEnd').value); Hours = Stamp2.getHours() Mins = Stamp2.getMinutes(); v_EndDate=('' + Stamp2.getFullYear() +"-"+ (Stamp2.getMonth()+1) + "-" + Stamp2.getDate() +"T"+ Hours + ":" + Mins); "name": "v_name", "description": "n_note", "startDate" : "v_BeginDate", "endDate": "v_EndDate", "location":"v_location", options: ["Google", "Apple","Microsoft365"], timeZone: "currentBrowser", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', ()=> atcb_action(config, button) ) </script> Does anyone know how to integrate the variables with the event export code? This would be a really great solution if it can be worked out.
  19. Hi! There is a Tabular report with a comment field (Text64000). I want to add a "Copy Text" button, that on click will copy text from the comment field to the Clipboard, so a customer can copy the text without highlighting and copying. Just one click action to copy. I have found some solution, but it does not look like working in the reports: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp Has anybody done it before or maybe you have some working solution? Thanks in advance.
  20. Hello, I'm trying to autosubmit and redirect, but everything I've tried fails to go to the next page. It either doesn't submit at all or repeatedly submits without redirecting. Background I've reviewed several threads on automatic submission. The most comprehensive seemed to be this one, but it is over 10 years old, and uses functionality no longer supported (window.onload). A few facts: Single Record Update page Embedded (we're using Webflow, though I expect that is not important) Upon submission I need to re-direct to another page (location specified in an app parameter) The code I'm currently using is from this 2014 post and is below. <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { const error = document.querySelector('div[data-cb-name="HeaderErrorMsg"]'); if(!error){ if(document.getElementById("caspioform")) { document.getElementById("caspioform").style.display = 'none'; setTimeout('document.forms["caspioform"].submit()',1000); } } }); </script> In addition to playing with the Javascript, I've tried each version of the JS with 2 destination approaches: Navigate to a new page (with the page specified) Display a message, with the script below to do the redirection <script> setTimeout(function () { window.location.href = "[@app:xxxxx]"; }, 2000); Check your email inbox </script> Would be very appreciative of any suggestions!
  21. Need help in disabling the Enter Key from a text area in a Submission Form and an Update Form. Since I later on use that parameter to pass it on to another form and if the user used the Enter key, this passing of parameters results in an error. This is what I have on the header of the submission form but still is not working: <script language="javascript" type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && (node.type=="text")) { return false; } } document.onkeypress = stopRKey; </script> The field I want to prevent is named as: "[@Status_trial]" I will greatly appreciate the Help!
  22. I am trying to get the freeze headers in tablular report script to work and am unable to get it working. I have followed the instructions at the link below but it is still not working. Has anyone had success in getting this script to work? It is for a tabular report in an iframe inside an Caspio HTML datapage. http://forums.caspio.com/index.php/topic/4678-j-freeze-header-in-a-tabular-report/
  23. If you want to filter your DataPage Report from Authentication follow these steps: 1. In Authentication, add a Virtual Field. 2. The form Element of the Virtual Field should be Text Field 3. In the Advance tab you can pass the parameter on exit: 4. For Text Only parameters this should be sufficient to pass the value to the next form. 5. If you need to pass a Date, then you need to add this JavaScript Code to Header: <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> document.addEventListener('DataPageReady', function(event) { $(function() { $("#cbParamVirtual1").datepicker({ dateFormat: "mm/dd/yy" }); }); }); </script> 6. Change the Virtual1 to the corresponding Field based on your needs, you could as well change the Date Format according to your needs. 7. The Login Page will look like this: 8. In the Report DataPage, use the Authentication you just created/modified 9. Filter the result on Pre-Defined Criteria 10. Select a Date Field for your Search Fields 11. On Search and Report Wizard - Configure Filtering Fields in Advance Tab chose Recieve External Parameter 12. In similar way you could pass other parameters.
  24. Hi, I took some code from one of Caspio's demo apps (an appointment scheduler) to create a Time Picker on a Submission form. This works great, allowing far more detailed calendar scheduling than just using the date without a time. The issue is when the user needs to edit the date/time from the Calendar, in Details view. The code doesn't work in this case. I've changed the 'InsertRecord' part to 'EditRecord' but that doesn't seem to make a difference. Is there some difference to calling the code from the Update button vs a Submission button? Any help would be greatly appreciated. Below is the process and code in the Submission form's footer. I need to modify it to work in a Calendar's Detail view: a) the user selects a Date from the calendar popup for field Virtual6 (set to Text). b) the user then clicks this link in an html block to open the Time Picker: <input type="time" name="time" class="timeClass" id="timepicker"/> c) on Submission the code below runs to combine the date from Virtual6 and the time from the Time Picker into the actual Date/Time field TasksTimeine_CalDate. ****I need this code to work on a Calendar's Detail View Update. <script type="text/javascript"> var datefield=document.createElement("input"); datefield.setAttribute("type", "time"); if (datefield.type!="time") { //if browser doesn't support input type="time" document.addEventListener("DataPageReady", function () { $('#timepicker').timepicker({ timeFormat: 'HH:mm', interval: 1, minTime: '00:00', maxTime: '23:59', defaultTime: '6', startTime: '00:00', dynamic: false, dropdown: true, scrollbar: true, timepicker: true, datepicker: false, stepHour: 1, stepMinute: 1, timeInput: true, showHour: true, showMinute: true, pickerTimeFormat: 'hh:mm tt' }); }); } document.getElementsByName('Submit')[0].onmouseover = function(){ var date = document.getElementById('cbParamVirtual6').value; if(date == "") { date = "1/1/2011"; } var ampm = document.getElementById('timepicker').value; document.getElementById('InsertRecordTasksTimeline_CalDate').value = date + " " + ampm; }; </script>
  25. I am using Laravel as backend and bootstrap as frontend I am using transaction ID from orders in table. Now if user clicks on that transaction ID, then I want to display the order on Bootstrap Modal... Here is code of Frontend : <table id="example" class="table table-striped table-bordered " cellspacing="0" width="100%"> <thead> <tr class="bg-info"> <th><center>Transaction ID </center></th> <th><center>Shop Name </center></th> <th><center>Sales Man </center></th> <th><center>Processed ? </center></th> </tr> </thead> <tbody align="center"> @foreach ($ordersList as $order) <tr id = "tr_{{$order->id}}"> <a> <td id="{{ $order->transaction_Id }}" data-toggle="modal" data-target="#modal{{$order->transaction_Id}}" style="cursor:pointer;color:blue" onclick="getCollapseData(id)"><u> {{ $order->transaction_Id }} </u></td> <td>{{ $order->Shop }}</td> <td>{{ $order->Sales }}</td> <td> <input id="chk_{{ $order->id }}" type="checkbox" name="is_Processed" onclick="orderProceesed(id)"><br> </td> </a> </tr> <!-- Modal --> <div class="modal fade" id="modal{{$order->transaction_Id}}" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> </div> </div> </div> @endforeach </tbody> </table> here is code of JavaScript Function : function getCollapseData(data) { //alert(data); $.ajax({ method : "GET", url: "orders.getCollapseData", data: {id: data}, success : function(response) { //alert(response); //$("#collapse"+data).empty(); //debugger; document.getElementById("modal"+data).innerHTML = ""; var receivedData = response; var html = ''; //alert("modal"+data); html += '<div class="modal fade" id="modal'+ data +'" role="dialog">'; html += '<div class="modal-dialog">'; //<!-- Modal content--> html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal">&times;</button>'; html += '<h4 class="modal-title">'+ data +'</h4></div>'; html += '<div class="modal-body">'; html += '<table class="table table-striped table-bordered " cellspacing="0" width="100%">'; html += '<thead>'; html += '<tr class="bg-info">'; html += '<th><center> Product Name </center></th>'; html += '<th><center> Quantity </center></th>'; html += '</tr></thead>'; html += '<tbody align="center"><tr>'; for(i=0;i<response.length;i++) { html += '<td>' + receivedData.Product + '</td>'; html += '<td>' + receivedData.qty + '</td>'; } html += '</tr></tbody></table></div>'; html += '</div></div></div>'; document.getElementById("modal"+data).innerHTML = html; } }); } I am missing something and modal is not getting displayed
×
×
  • Create New...