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
    • 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. I'm using a barcode reader to scan an order in a form, passing parameters to another form that scans the product sku, and the 2nd form opens itself up after each sku for however many skus are related to the order. It works well. The sum of the skus scanned by product are in another report datapage that updates on the same page the 2nd form is on. The report queries both the table used to scan skus for a sum by product, and a table containing data from shipping software that contains what should be shipped within it's table.... The only issue with this setup is that I'd prefer to get rid of the 2nd form, and just scan the order# , then pass parameters to the report page and use inline edit to scan skus.... the barcode reader hits enter itself with each scan and I have the button hidden... I can't get this done BECAUSE I can't get the cursor to focus on the inline edit field for skus when the first page opens the report. I think there should be an option for this like there is for forms....but since there isn't, I've been trying a bunch of scripts....here's my latest.... Footer: <script> { document.getElementsByName('EditRecordInlineAddlineItemsku').focus(); document.getElementsByName('EditRecordInlineAddlineItemsku').select(); } </script> Any ideas how I might fix this???
  2. Hi, I have a tabular report that list my users. One of the fields identify who is active and who is blocked. I want to show an padlock icon on the row of every blocked user. I mean: when the field [@field:Usuarios_Ativo^] value is "no". This is a "yes/no" field type I think that should be easy, but I am really struggling to make this work with my limited java skills. Many thanks Caspio minds!
  3. 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
  4. Hello Caspio Family, I wish to share a JS code snippet with you, in case if you wish your users to confirm form submission if a certain condition is met. For example, if some field is empty. Let's say we have a text field for email which is not required. When that field is empty, we wish to ask our visitors if they are sure they want to submit the for without the email. document.addEventListener("BeforeFormSubmit", function (event) { if (document.getElementById("InsertRecordEmail").value == "") { event.preventDefault(); if (confirm("Are you sure you want to submit the form without your email?")) { document.forms["caspioform"].submit(); } } }); Let me know who thinks it is useful.
  5. Hello; I would like to dynamically choose a lookup table for a dropdown list. Similar to a cascading dropdown, but where the actual lookup table changes. Consider the scenario... Parent Dropdown options: Opt1 & Opt2 When Opt1 is chosen viewOpt1 populates the child dropdown When Opt2 is chosen viewOpt2 populates the child dropdown I have a workaround envisioned that entails adding many fields to the lookup table, and i would prefer to not un-optimize my app by doing that. Does anybody know of a js that can help me with this? Thanks!!
  6. Hi, I have a dashboard that contains one parent datapage (a stacked area chart) and several child datapages (pie charts) embedded as iframes in the footer of the parent datapage. The search terms for the parent datapage are configured to pass as external parameters to the child datapages. This works for all search terms where just one option is selected, but not for multi-select listboxes. Based on previous posts I've tried the following JavaScript to pass the multi-select listbox parameters, but with no success. Any suggestions? Thank you all! <script type="text/javascript"> var fieldName = "Value4_1"; var x1=document.getElementsByName(fieldName); x1[0].multiple=true; document.addEventListener('FormSubmitted', function(event) { var result = ""; for (var i = 0; i < x1[0].length; i++) { if (x1[0].options[i].selected) { result += "\"" + x1[0].options[i].value + "\"" + " OR " ; } } document.getElementById("Value4_1").value = result; }); </script>
  7. I have the Javascript in our submission form to format the phone numbers to this format: (123) 456-7890, but sometime I need to add an extension to that. Is there a way to edit the Javascript so that I have the option to have it look like this: (123) 456-7890 x123. I don't want to have a separate column in the table to add an extension because they aren't always there and it will show up funny in the results tables. Any thoughts?
  8. Hi, the below code is used to create comma-delimited text values (in a text255 field) so the user can select multiple values in a list box and save them (separated by commas) in a text field. It's necessary to use this method instead of the Caspio-native 'List' data type because the lookup values need to be dynamic (I wish Caspio would enable this, been waiting FOREVER). This method works great for Details and Update datapages but I need it to also work in a Bulk Edit page. I've tried changing 'EditRecord' to 'BulkEditRecord' but it doesn't work. Does anyone know how to modify this code to work in a Bulk Edit page? This is so the user can select multiple records and update them with multiple selections in a listbox. <script type="text/javascript"> var v_state = "[@field:state]" ; var o_state = document.getElementById("EditRecordstate") ; o_state.multiple = true ; function f_listbox() { if ( v_state.indexOf(",") > 0 ) { for (var i=0 ; i < o_state.options.length; i++ ) { if(o_state[i].value == v_state) { o_state.remove(i); break ; } } var o_st = v_state.split(", ") ; for (var j=0 ; j < o_st.length; j++) { for (var i=0 ; i < o_state.options.length; i++ ) { if(o_st[j]== o_state.options[i].value){ o_state.options[i].selected = true ; break ; } } } } } document.addEventListener('DataPageReady', f_listbox); //You can also use the line below instead of the eventlistener // setTimeout(f_listbox, 20); </script>
  9. Are there any independent contractors out there that are familiar with Caspio and interested in doing some work utilizing Java script? Some minor enhancements needed with our Caspio form that requires JS code injected. Thanks!
  10. I would like to ask for help in my JS code. I'm trying to change the value of a checkbox in a search form when a specific option in a dropdown is selected. I want the checkbox to be set to true if "Math" is selected in the dropdown. Below is my code that's not currently working: <script> function checkdropdown(){ var drpselected = document.getElementsByName("Value1_1").value; if (drpselected == "Math") { document.getElementsByName("Value2_1").checked = true; } else { document.getElementsByName("Value2_1").checked = false; } } document.getElementsByName("Value1_1").onchange = function() {checkdropdown()}; </script> Also, here is a screenshot in the "Configure Search Fields" step of the DataPage: I'm hoping someone can help me with this. Thank you.
  11. Is it possible to count records in a table using javascript instead of a calculated field so the comparison is done right before submission? Or, is there a way to force fields with calculated values to refresh prior to submission? Possibly a custom button that refreshes the fields then submits the form? I've run into a snag using calculated values. Virtual15 is a calculated value and counts how many of a courseID are scheduled for the selected Lesson Date SELECT Count(Lessons_courseID) FROM _v_active_lessons WHERE Lessons_courseID=target.[@field:Lessons_courseID] AND Lesson_Date=target.[@field:Lesson_Date] Virtual8 is also a calculated value that uses CASE WHEN to determine if it's ok to schedule. We can only teach one of each courseID per day. The case statement is checking for other restrictions as well, but they are not dependent on a record count from the active_lessons table. CASE WHEN [@cbParamVirtual15] <> 0 THEN 'This lesson is scheduled for another teacher today. Please select a different day.' ELSE 'ok to schedule' END Then, I use this javascript in the footer to prevent form submission <script type="text/javascript"> document.addEventListener('BeforeFormSubmit', function(event) { // prevent form submit if not ok to schedule // if user forget to choose required fields date or time, proceed with submission to generate required field error // alertok variable prevents blank alert box var Input1 = document.querySelector("span[id^='cbParamVirtual8']").innerText; var alertok = 1; if (Input1 == 'ok to schedule' || Input1 == ' ') {} else {event.preventDefault(); if (alertok) { alert(Input1)} alertok = 0; } }); </script> The issue: If the lesson is not already scheduled for a selected date, two users can simultaneously select the same lesson for the same date and both will get the 'ok to schedule'. This allows both users to submit the form and I end up with double signups.
  12. I'd like to make the format of my list report look nicer, how can I do this? Specifically, I'd like to be able to highlight every other row of data (not data cell) and align the labels and the data so that they are directly underneath each other. Edit: Additionally, it would be nice if I could have conditional formatting on the data so that if it is below the goal, the text turns red and if it's at or above the goal the text turns green. The data cells are using calculated fields. Is there a way I can do this conditional formatting in an HTML block that references the calculated field?
  13. I have 12 fields in total - IG1 - IG6, which are dropdown fields and IG1_Qty - IG6_Qty - number input fields, they coincide with each other. The IG fields have 3 possible values - 1, 2, or 3. The Qty field is a number field to state how many of those IGs they want. In Example, the user would select '2' for IG1 and put in 4 for IG1_Qty, showing that they want 4 of the type 2 IGs. Now, the sum field for type 2 IGs would show 4. If we went on to give IG2's value to 2 as well, with a quantity of 1, then the sum field for type 2 IGs would show 5 (4 + 1). Essentially, I want to sum up the selections for the 3 possible IG dropdown values with the quantities selected for each. I was able to create an array with the 6 IG dropdown fields and count how many of each possible values were selected. However, adding in the Quantities for each IG into that number is where I ran into the problem, so I had to change the script entirely. This is my latest try: var ig1v = document.querySelector('select[id^="InsertRecordIG_Sheet_Table_IG1_"]'); //IG1 field - possible values are 1, 2, or 3 var vf1 = document.getElementById("cbParamVirtual22"); //This is where the sum value for IG Type 1 will go var vf2 = document.getElementById("cbParamVirtual23"); //Type 2 var vf3 = document.getElementById("cbParamVirtual21"); //Type 3 var ig1q = document.getElementById("InsertRecordIG_Sheet_Table_IG1_Qty"); //How many of the selected IG type var addNew1 = true; vf1.value = 0; //Setting the value to 0 so that the other calculated fields in the form don't load with an error. //This first eventListener/function is to automatically give 'Qty' a value if the IG dropdown isn't null anymore. This is just to automatically set Qty to 1 instead of blank when the user selects an IG value for the first time - UX document.querySelector('select[id^="InsertRecordIG_Sheet_Table_IG1_"]').addEventListener("change", function () { if (addNew1){ ig1q.value = 1; addNew1 = false; } ig1q.dispatchEvent(new Event('change')); }); //This function is what I am using to count the number of each IG value. If IG = 1, then add the IG1_Qty to the type 1 sum field (vf1), etc. document.getElementById('InsertRecordIG_Sheet_Table_IG1_Qty').addEventListener("change", function calcGroups1(){ if (ig1v.value == 1){ vf1.value = +vf1.value + +ig1q.value; } else if (ig1v.value == 2){ vf2.value = +vf2.value + +ig1q.value; } else if (ig1v.value == 3){ vf3.value = +vf3.value + +ig1q.value; } }); I have 6 of both of those functions for each IG field. Please forgive the ugly JS, I am sure there is a much better way to write this, but I have no clue how. The problems I am now having is that the Sum fields (vf1-vf3) are adding every change. See how the first function in the script sets Qty to 1 when the corresponding IG field is given a value - this is correctly being added to the vf1 totals field. But, if I change the quantity from 1 to another number, it adds it instead of just changing the value. So, when the Qty field is automatically set to 1, and then you change it to 4, the vf1 totals field would show 5 instead of 4. If you changed the 5 to a 4, it would show 9. Also, if the IG type is changed, the totals values are not updated for the previously selected value. Say I have IG1 = 1, Qty = 4. Now VF1 (sums of 1) will show 4. But, if I change IG1 = 2 with the same Qty, now VF2 will show 4, but VF1 will also still show 4. I'm not sure how to go about deleting the value from the previous sum field when the IG type is changed, or when the quantity is changed. I apologize for this being so confusing, but it is making my head turn into mush and I could use any of the help I can get.
  14. I'd like to have a colored table that can highlight past due items. This is the code I have in an HTML block that highlights the row of past due dates and turns the font color red. <div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div> <script> var isi = document.getElementById("visi[@field:lines_Line_Number]"); if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){ isi.parentNode.parentNode.style.backgroundColor = 'yellow'; //background color isi.style.color="red"; //font color } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script> Meanwhile, this is part of the color I have in my header that turns the column headers and background different colors. style type="text/css">[class*=cbResultSetHeaderCell]:nth-child(1) { background: #3377FF !important; } td[class*="cbResultSetData"]:nth-of-type(1){ background-color: #4D88FF !important; } [class*=cbResultSetHeaderCell]:nth-child(2) { background: #1966FF !important; } td[class*="cbResultSetData"]:nth-of-type(2){ background-color: #3377FF !important; } [class*=cbResultSetHeaderCell]:nth-child(3) { background: #0055FF !important; } td[class*="cbResultSetData"]:nth-of-type(3){ background-color: #1966FF !important; } [class*=cbResultSetHeaderCell]:nth-child(4) { background: #cc0000 !important; } td[class*="cbResultSetData"]:nth-of-type(4){ background-color: #E60000 !important; } [class*=cbResultSetHeaderCell]:nth-child(5) { background: #cc0000 !important; } Here is the result of this code: Clearly, the highlight works as it applies to uncolored columns. How do I alter the code so that the highlight is prioritized and will override any existing color?
  15. I'd like to have different colors for some of my column headers so that I can group them together. How can I do this?
  16. I want to change the color of an entire column. No conditionals necessary.
  17. Hi, Part of my app is a chat/messaging module that enables users in the same account (it's a SaaS app where each customer might have multiple authenticated users in the same account) to 'chat' or message each other. Everything is good on it except I need to figure out how to show a popup notification to the user who a message is directed to, instantaneously, so they know they have one. I don't mean using the email or text message triggers (already have that enabled) but showing a small 'you have a new message' message in the lower right of the web page the app is hosted on. I've used sliding panels, fancybox, and straight popups in other areas so I imagine I can configure one of those methods to show the notification and new message content. The problem I'm having is, how do you trigger a function to open a notification popup/panel in another user's account, on a different computer entirely? So when User1 submits a new message directed to User2, User2 will get an instant notification in their own browser? I imagine it's some sort of listener setup but don't really know how it would work. If anyone has any suggestions that'd be great!
  18. Hi, I'm trying to use the code below in the footer of a tabular report results section for the 'Inline Add New Record' can use it. The js is code to get the user's computer date/time (not the localization or CB system) and put it in a date/time field. I use this code in submission forms with no issues but don't know how to reference it correctly for a tabular inline add new record. If someone knows how to mod this I'd really appreciate it. <SCRIPT LANGUAGE="JavaScript"> /* Declaration and initialization */ Stamp = new Date(); var v_TimeStamp; Hours = Stamp.getHours() Mins = Stamp.getMinutes(); Secs = Stamp.getSeconds(); /* Attach a prefix with digit '0' if the minutes is less than 10. */ if (Mins < 10) { Mins = "0" + Mins; } /* Construct the value of the v_TimeStamp variable in the format m/d/yyyy hh:mm */ v_TimeStamp=('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getFullYear() + ' ' + Hours + ":" + Mins + ":" + Secs); document.getElementById("InsertRecordComments_Actual_Submission_Date").value=v_TimeStamp; </SCRIPT> EDIT: just found the solution right after posting this. In case anyone needs it, tabular inline add uses 'InlineAdd' instead of 'InsertRecord'. Wish everything was so easy!
  19. Hi, I have been trying to figure out how to make my search results work. I have a product database that I want people to be able to search. The submission form has: one search field that allows people to type in brand names, materials, adjectives. Results show: Products that contain some or all of the words that were typed in. This is tied to a keyword field that includes lots of product descriptors. How do I change the logic and rules to make this work? Do I need to use Javascript to take the full string and separate each word into separate fields? The regular Caspio "or" logic doesn't work. Here's an example that might make more sense: People type in search results "gold shiny purple flowers" I want to be able to show products that contain gold or shiny or purple or flowers. Ideally the top of the search results include the most relevant products which might have all four words included. But, I want my gold shiny necklace to show up even if I don't have gold shiny flowers. Thanks! I don't know Javascript but I have been able to implement scripts when people give them to me. thanks for your help.
  20. Hi there, I posted this over in the general forum last week, but have had no response so thought it would be better off here! I'm really stumped I'm trying to add a graphic star rating system to my site. I've found the following: http://callmenick.com/post/five-star-rating-component-with-javascript-css which gets me about halfway there, but I just need some slight modifications! This is what I have in my datapage so far: <div id="el" class="c-rating"></div> <script src="http://www.cambridgedata.org/Testboard/manager/five-star-rating-master/js/dist/rating.min.js"></script> <script> // target element var el = document.querySelector('#el'); // current rating, or initial rating var currentRating = [@field:QA_Tester_Rating#]; // max rating, i.e. number of stars you want var maxRating= 5; // callback to run after setting the rating var callback = function(rating) { alert(rating); }; // rating instance var myRating = rating(el, currentRating, maxRating, callback); </script> Where the field QA_Tester_Rating is the field in my table I want to read from and update using this system. At present, it reads from the field fine when there is something already in there, but if the field is blank, the stars don't show at all, so this is my first problem - I'd like the 5 stars to appear, empty, on the page when there is no rating yet. The second issue is that it's not updating my table. I tried adding something along these lines: document.getElementById("EditRecordQA_Tester_Rating").value=myRating; But my javascript is terrible and it obviously didn't work. Last issue, I would like to remove the popup alert when you change the rating. I thought it would be as simple as removing the bit that says: { alert(rating); } But that didn't work either! Any help you can give would be much appreciated! Nikki
  21. Hi there, I'm trying to add a graphic star rating system to my site. I've found the following: http://callmenick.com/post/five-star-rating-component-with-javascript-css which gets me about halfway there, but I just need some slight modifications! This is what I have in my datapage so far: <div id="el" class="c-rating"></div> <script src="http://www.cambridgedata.org/Testboard/manager/five-star-rating-master/js/dist/rating.min.js"></script> <script> // target element var el = document.querySelector('#el'); // current rating, or initial rating var currentRating = [@field:QA_Tester_Rating#]; // max rating, i.e. number of stars you want var maxRating= 5; // callback to run after setting the rating var callback = function(rating) { alert(rating); }; // rating instance var myRating = rating(el, currentRating, maxRating, callback); </script> Where the field QA_Tester_Rating is the field in my table I want to read from and update using this system. At present, it reads from the field fine when there is something already in there, but if the field is blank, the stars don't show at all, so this is my first problem - I'd like the 5 stars to appear, empty, on the page when there is no rating yet. The second issue is that it's not updating my table. I tried adding something along these lines: document.getElementById("EditRecordQA_Tester_Rating").value=myRating; But my javascript is terrible and it obviously didn't work. Last issue, I would like to remove the popup alert when you change the rating. I thought it would be as simple as removing the bit that says: { alert(rating); } But that didn't work either! Any help you can give would be much appreciated! Nikki
  22. I am creating an application where I log daily events so I can view them in a DataPage report. I would like to be able to copy a record if I repeat an event, instead of re-entering the data in a web form. I was told I would have to create a hidden DataPage that auto submits the data, that will require some use of JavaScript. How do I create a hidden DataPage that auto submits data with JavaScript?
  23. I have a specific form that creates a new entry in a table, and I need it to NOT create an entry if one already exists, instead just go to a diferent page altogether. I can prevent the duplicate entry by making a field unique, the form submit will fail and no new entry will be made. Problem I have is that the initial page that makes the table entry auto-submits when you open it (which is by design). If it successfully completes the table entry, it then auto-loads the next datapage, however if it fails the submit it actually reloads the entire page which in turn tries to re-submit the document and gets caught in a loop of submitting failures forever. What can I do to detect the failure and then re-direct to a different data page? I tried the below code to attempt to trap it, but it does not work... <script> var v_elements = document.getElementsByTagName("p"); for (var i = 0; i < v_elements.length; i++) { if (v_elements.className == "cbFormError") { location. href = "https://c1acyXXX.caspio.com/dp/48c0900099f0e199ea0043c3XXXX"; } } </script>
  24. I have been pounding my head against a wall on this one. I need to do data validation for two fields in a tabular report data page in two different scenarios. I have been successfully using the following code to validate one field: <script> var nameOfField = "InlineAddWhole_Value_Perc_Split_to_Agent"; document.addEventListener('DOMSubtreeModified', function(){ if(document.getElementsByName(nameOfField)[0]) { document.getElementsByName(nameOfField)[0].addEventListener('change', function(){ var cash= document.getElementsByName(nameOfField)[0].value; if(isNaN(cash)) { alert("You have entered an invalid number in the Split to Agent field. Value must be numeric whole value decimal. Do not include letters or symbols."); document.getElementsByName(nameOfField)[0].value=""; document.getElementsByName(nameOfField)[0].focus(); } else if((cash) < 0) { alert("You have entered an invalid number in the Split to Agent field. Value cannot be a negative amount."); document.getElementsByName(nameOfField)[0].value="0"; document.getElementsByName(nameOfField)[0].focus(); } else if((cash) > 100) { alert("You have entered an invalid number in the Split to Agent field. Percentage value must be entered as a whole value percentage. i.e. 100% = 100 and 50% = 50"); document.getElementsByName(nameOfField)[0].value="100"; document.getElementsByName(nameOfField)[0].focus(); } }); } }); </script> 1st scenario - How do I validate two different fields independently? Basically field "split to Agent" must be between 0 & 100 and field "Agent ID" must be non-zero. 2nd scenario - How do I validate two different fields dependently? IF field "split to Agent" is less than 100 THEN field "Agent ID" must be non-zero. The main issue that I am running into is that I cannot figure out how to do an event listener for more than 1 field at a time. No matter how I have tried to implement it, I can't. I would appreciate any help that I can get here. Is that possible to implement? Is there any way to implement this? Thank you in advanced! Tyler
  25. Hi there, How can I create a chart using just values from table fields but not the count/sum functions? My result set is 1 row and I want to show values on a chart. If value is blank - I don't want to show it on the chart. Any help will be appreciated. Regards, vitalikssssss
×
×
  • Create New...