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. 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!
  2. 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.
  3. 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.
  4. 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?
  5. 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.
  6. 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?
  7. 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?
  8. I want to change the color of an entire column. No conditionals necessary.
  9. 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!
  10. 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!
  11. 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.
  12. 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
  13. 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
  14. 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?
  15. 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>
  16. 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
  17. 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
  18. RE: I've got a question. I used the code and have a bit of an issue. What if there's more than 1 page? It will not calculate the balance since it's a new page and the last balance is not recorded on anyway so the it will not run. Does anyone have any ideas how it can be done? Thank you!
  19. I've got a dropdown menu that I need the links to run a function in order to open a new window (in '_self') and then change that new window's iframe source (same domain as parent). I'm calling the function from a linked js file that runs the code correctly but ONLY if the new window is opened in a new tab. I've seen a lot of posts about how to transfer the js function to the new window but none of them if it's opened '_self'. Here's what I have so far (It's on a test server right now, hence the 127 address for the js file): function newWindow() { var win = window.open('projects/project-dashboard','_self'); win.document.head.innerHTML = '<title></title></head>'; win.document.body.innerHTML = '<body></body>'; var script = document.createElement('script'); script.type = "text/javascript"; script.src = 'http://127.0.0.1:9090/js/projnav.js'; win.document.head.appendChild(script); } The file js/projnav.js has a function that needs to run in the new window, and it does but only when opened in '_blank'. Does anyone know how to modify this to run the projnav.js function if the new window is opened in the same tab? Any help with this would be really appreciated!
  20. I know that there are jquery tools used to completely customize standard form elements such as checkboxes, radio buttons, and dropdown menus. Are there any scripts and ways of styling them in Caspio? If so, what's the easiest way to go about doing it?
  21. Hello, Does anybody know how to disable autocomplete on text input fields? THANKS
  22. Hi, I have a Details (or single record update, haven't decided yet) form that, when updated, I need to open a fancybox that brings up another web page. The Details/Single-Rec-Update form would ideally be set to 'Same Form' for destination but I think I need to use Message in order to put code in. The below code is taken from what I'd been using with a button to open the fancybox but with the data-href put in (whereas the button would put that in before). Does anyone know what mods need to be done to this code for it to work (open a fancy box with a new web page after submission/update)? <script> var width = 450; var v_data-href="../shortcuts/universal-item-search"; var v_href= $(el).attr('href'); if (v_href=="#") { v_href=$(el).attr('v_data-href'); } if($(el).attr('data-width')){ width = $(el).attr('data-width'); } $(el).fancybox({ closeBtn:false, openEffect : 'none', closeEffect : 'none', modal:true, type:'iframe', autoSize:true, width:width, //href:$(el).attr('href') href:v_href }); </script>
  23. Unfortunately, this cannot be done with a table trigger because this table is updated by other datapages as well. I have a report that searches training dates, lists providers, and sets an indicator based on the fact that the provider took a training. The indicator can be set to yes for each provider with a bulk edit. An indicator date needs to be added when the indicator is set to yes. If this date is not added, I want it to default to the training date. It seems like it would be easy but I can't get the indicator date to save the training date value in the bulk edit if it is blank. There should be a way to take the training date from the results page, set the indicator date equal to that, and then if the user doesn't change that when setting the indicator in the bulk edit to yes/checked, it would save that training date in that indicator date field. I looked into doing this with a trigger, loading the training date into the indicator date field on load, using a placeholder, and JavaScript, but I can't get the value to save. If anyone has advice on how to do this, I would appreciate knowing about it. Thanks.
  24. Hello guys, How can I use the timestamp as a default or initial value of my DateTime field in a Details page? I set the Form Type to Text Field, but I can't see the On Load option in the Advanced Tab. If I set the field as Hidden, I get that On Load option, but at the expense of not being able to edit it. Please help. -dspolyglot
  25. Hello, I've got a Single Record Update datapage that has a number of cascading dropdowns. I need to check 2 values (one a table's field and the other a virtual field) and if they're not equal then make the cascading drop down values null or blank. I can get this to work for a regular text field but not cascading dropdowns. The code so far is: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var x = document.querySelector('[name*=cbParamVirtual1]').value; var y = document.getElementById("EditRecordProjectID").value; var xclear = ""; if (x !== y){ document.getElementById("EditRecordKeyword").value = xclear; document.getElementsByName("EditRecordArea")[0].value = xclear; } }); </script> The cascading dropdown field is 'Area' and its parent is Virtual1 (Virtual1 gets an external integer parameter). It holds a text value and has a lookup table and a custom option of 'none selected' (blank value). The text field 'Keyword' will update to blank if Virtual1 and ProjectID are not equal, but the 'Area' cascading dropdown won't. Does anyone know how to update the cascading dropdown value to blank/null if ProjectID and Virtual1 are not equal?
×
×
  • Create New...