• Resolved abonawaff53

    (@snipermilan)


    Hi,

    I am trying to get width and height of an image into CCF and then do some calculation based on that.

    The width and height are stored in attributes of another DIV on the same page CCF is on.

    <div class="mydiv" mywidth"dynamic"></div>

    I tried adding the following to a calculated field:

    (function(){
    var width = jQuery('.mydiv').attr('mywidth');
    return width;
    })();

    This gets the value on page load. But if the attribute value changes, the calculated field doesn’t revaluate automatically (understandably).

    I don’t want to use a button to revaluate field. I tried adding an on change event

    (function() {
                    jQuery("#file").change(function() {
                      var width = jQuery('.mydiv').attr('mywidth');
                      return(width);
                    });
                  })();

    but it didn’t work. I guess I am missing something? how to make the field reevaluate every time the attribute changes ?

    • This topic was modified 3 years, 4 months ago by abonawaff53.
    • This topic was modified 3 years, 4 months ago by abonawaff53.
    • This topic was modified 3 years, 4 months ago by abonawaff53.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @snipermilan

    Include, as part of the equation, the name of the field that provokes the DIV tag to change its attributes.

    Your current equation is:

    (function(){
    var width = jQuery('.mydiv').attr('mywidth');
    return width;
    })();

    Now, assuming you have a field that provokes the div tag change its size, for example, fieldname123. The previous equation could be implemented as follows:

    (function(){
    var tmp=fieldnmae123, width = jQuery('.mydiv').attr('mywidth');
    return width;
    })();

    The tmp variable does not participate in the equation, but the only presence of the fieldname123 in the equation force its evaluation every time fieldname123 throws an onchange event.

    Best regards.

    Thread Starter abonawaff53

    (@snipermilan)

    Thank you for your reply. Actually, what provokes the DIV to change its attribute is not a field within CFF but rather this function:

    var _URL = window.URL || window.webkitURL;
         $("#file").change(function(e) {
             var file, img;
             if ((file = this.files[0])) {
                 img = new Image();
                 img.onload = function() {
                     //alert(this.width + " " + this.height);
          
                     $(".mydiv").attr({
                       mywidth: this.width,
                       myheight: this.height
                     });
    
                 img.onerror = function() {
                     alert( "not a valid file: " + file.type);
                 };
                 img.src = _URL.createObjectURL(file);
             }
         });

    It is basically a function that will get image dimensions before upload. I don’t need to upload the image, just get its dimensions in pixels. I then want to use the dimensions as inputs of CCF to allow users to do some calculations with them.

    the div with ID #FILE is not a part CFF. I want to keep that way.

    in the main function above, I can add
    $('#fieldname1_1').attr('value', this.width);

    This will change the value of the field, but dependent calculated fields will not reevaluate and I will have to click on the field and then press Enter for the onchange event to trigger.

    Any idea how to proceed ?

    • This reply was modified 3 years, 4 months ago by abonawaff53.
    • This reply was modified 3 years, 4 months ago by abonawaff53.
    Thread Starter abonawaff53

    (@snipermilan)

    I managed to trigger the onchange event using the following $("#fieldname1_1").trigger("change");

    Somehow managed to skip my mind.

    Plugin Author codepeople

    (@codepeople)

    Excellent !!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Get value from attribute’ is closed to new replies.