Kaevon Zanjani asked 2 years ago
I have a program on a website that creates a graphic visual of 2 circles based on user input from a formidable forms calculator. I am using the field value on the actual webpage to create the size of the circle. Currently, the moment the user inputs the Pipe Outer Diameter and Wall thickness, the graphic instantly displays an inner and outer circle and works fine. However, after hitting the submit/calculate button for the formidable forms calculator, the circles no longer update dynamically and I have to refresh the page to get them to work again. This is due to an Ajax issue as the jQuery code is not re-initialized. I was told that a delegated event handler would fix this issue but I am unsure on how to implement this.
Live page: https://schallertenterprises.com/cutter-travel-calculator/
Formidable support told me this: "We're not allowed to help with custom code in support. This includes writing and debugging custom code. As a quick guess, a possible reason for this is that you're using AJAX submission. The event handler is connected to the field in the original form. When the form is submitted, that field is gone, but the page hasn't been reloaded so that the event handler is added to the new field. If you're not using Ajax submission, the page is reloaded, and the event handers should be added to the form. The original design may disappear, though. So you may want to adjust the code accordingly."
Can someone help me implement a solution? I am a bit of a newbie.
Start your code here<script>jQuery(document).ready(function( $ ){
$(function() {
$('.circle').hide();
$('#field_wg4s2').on('change', function() {
var $field_wg4s2 = parseFloat($("#field_wg4s2").val()).toFixed(3);
var $converted = ($field_wg4s2 * 3).toFixed(3);
if ($field_wg4s2 > 85) {
$("#error").text($field_wg4s2 + " is too big").show();
return false;
}
if ($field_wg4s2 < 0) {
$('#error').text('Please input positive integers').show();
return false;
}
console.log($field_wg4s2 , $converted);
$('.circle').css({
height: (2 * $converted),
width: (2 * $converted),
top: "calc(50% - " + ($converted) + "px)",
left: "calc(50% - " + ($converted) + "px)"
});
$('.circle').fadeIn(300);
$('#error').hide();
})
$('.circle2').hide();
$('#field_d6hwp').on('change', function() {
var $field_wg4s2 = parseFloat($("#field_wg4s2").val()).toFixed(3);
var $field_d6hwp = parseFloat($("#field_d6hwp").val()).toFixed(3);
var $converted_2 = (($field_wg4s2 * 3) - (2*($field_d6hwp * 3))).toFixed(3);
if ($field_wg4s2 > 85) {
$("#error")
return false;
}
if ($field_d6hwp < 0) {
$('#error').text('Please input positive integers').show();
return false;
}
if ($field_d6hwp >= 0.33 * $field_wg4s2) {
$('#error').text('Wall Thickness invalid').show();
return false;
}
console.log($field_d6hwp, $converted_2);
$('.circle2').css({
height: (2 * $converted_2),
width: (2 * $converted_2),
top: "calc(50% - " + ($converted_2) + "px)",
left: "calc(50% - " + ($converted_2) + "px)"
});
$('.circle2').fadeIn(300);
$('#error').hide();
})
});
});</script>
Bobby Clapp answered 2 years ago
Kaevon Zanjani
replied 2 years ago The top 2 are same post but slightly different. I am willing to look for paid help but this seems like a very simple solution as I was told a delegated event handler would solve this issue.
Kaevon Zanjani
replied 2 years ago Are you familiar with delegated event handlers? Do you know how to implement this.
Bobby Clapp
replied 2 years ago Can you share the live page so that the 3rd-part dev crew can troubleshoot and get an understanding of what the problem actually is?
Kaevon Zanjani
replied 2 years ago https://schallertenterprises.com/cutter-travel-calculator/
Here is the live page
Bobby Clapp
replied 2 years ago No. When I hit compute it looks fine to me.
https://i.postimg.cc/J4dq9gy1/screenshot-163.png
Kaevon Zanjani
replied 2 years ago After hitting compute, the circle graphic no longer updates size based on input.
Bobby Clapp
replied 2 years ago Try changing "document ready" to:
jQuery(document).bind('ready ajaxComplete', function(){
Kaevon Zanjani
replied 2 years ago @Bobby Clapp, that seems to mess up the code completely and nothing works
Kaevon Zanjani
replied 2 years ago How do I check for errors? When I change the code to the above, it invalidates the rest of my jquery code, the circles are no longer hidden to begin and are just visible with a static height/width with and the input entries no longer change the size. I tried both versions of your suggested code:
jQuery(document).bind('ready ajaxComplete', function(){
and
jQuery(document).bind('ready ajaxComplete', function( $ ){
It makes sense that it should work but i'm not sure what i'm doing wrong
Bobby Clapp
replied 2 years ago You'd want to check the developer console in whatever browser you are using and see if any js errors are listed.
Kaevon Zanjani
replied 2 years ago https://jsfiddle.net/Kaevonz/wry3n0m7/74/ I implemented your line of code into the jsFiddle version and this is the same error that I get on the actual web page.
Bobby Clapp
replied 2 years ago I'm unable to get the fiddle to function event if I replace the first line with your original code.
Victor Font answered 2 years ago
Kaevon Zanjani
replied 2 years ago I am drawing the circles with CSS and using jquery to change the sizing of it. I need to re-initialize the jQuery code after the page is refreshed using Ajax
Victor Font
replied 2 years ago See if this helps: https://www.encodedna.com/jquery/reload-or-refresh-web-page-after-ajax-success-using-jquery.htm
Kaevon Zanjani
replied 2 years ago I tried this method and it does not help me achieve what I want :/ I am trying to reinitialize the jQuery code after an Ajax refresh. The code above just refreshes the page like normal
Victor Font
replied 2 years ago You said in your original post, "This is due to an Ajax issue as the jQuery code is not re-initialized". I pointed you to the results of a Google search that does a refresh after Ajax. I am not aware of any way to refresh jQuery or CSS after it is loaded other than a full page refresh. You can refresh new elements added to the DOM so jQuery and CSS will recognize and work on the new objects. You may be able to use on('DOMSubtreeModified' , function() {, but as a volunteer I am not going to write the amount of code required to test the hypothesis it to make sure it works.
Since we don't know how you designed your form other than the fact that you use CSS to draw your objects, there's nothing else I can suggest except to draw your circles using a HTML5 canvas object. It will give you much greater control of the drawing and refresh process because it's all driven by jQuery and it is an object you can refresh without a full page refresh.
If you want to learn more about refreshing newly added DOM objects, this tutorial explaining how to do this with repeater fields may help set you in the right direction. https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/
Please login or Register to submit your answer
