Viewing 17 reply threads
  • Author
    Posts
    • #1198
      cosmocanuck
      Member

      Hi folks! I’m loving Piklist – it’s making it a breeze to customize my client’s site.

      I am however getting really ambitious now, and wondering if I can create an “autosum” field consisting of the total of four other (numeric) fields. I’d like this to also be automatically entered in as its own meta field along with all the other user-input ones, when they save the post.

      I think this would be within my skill level with basic HTML, but since I don’t have access to the Piklist fields’ code, I don’t think I can do it without some help.

      Is it possible to add some “onFocus”, “onBlur” etc. functions to a Piklist field? I think that’s the only part I can’t do right now.

      Incidentally, I want to use the technique here:

      http://www.javascriptsource.com/forms/auto-sum-form-boxes.html

      Thanks for any help you can provide!

      Adam

    • #1206
      Steve
      Keymaster

      @cosmocanuck– You can add any attributes you want to a field, including onFocus or onBlur, just by including it in the Attributes array.

      For example, let’s say you want to clear a field onFocus. Using the text_class_small field from Piklist Demos:

        piklist('field', array(
          'type' => 'text'
          ,'field' => 'text_class_small'
          ,'label' => 'Small'
          ,'description' => 'class="small-text"'
          ,'value' => 'Lorem'
          ,'attributes' => array(
            'class' => 'small-text'
            ,'onfocus' => "if(this.value == 'Lorem') { this.value = ''; }"
          )
          ,'on_post_status' => array(
            'value' => 'lock'
          )
        ));

      Also, this might help you. Some field plugins that other users have created >

      I also updated our docs to help answer your question.

      Let us know how it turns out.

    • #1209
      cosmocanuck
      Member

      That’s super awesome, thank you! I’ll check out the plugins too.

    • #1210
      Marcus
      Member

      Haha, I didn’t even realize that either.

      Awesome.

    • #1488
      cosmocanuck
      Member

      Hi guys! I had this working beautifully – I invoked a function for a bunch of numerical Piklist fields, all coded similar to this:

      piklist('field', array(
        'type' => 'text',
        'field' => 'surface_lifts',
        'label' =>  __('Surface Lifts'),
        'position' => 'wrap',
        'attributes' => array(
          'class' => 'text',
          'columns' => 2,
          'onFocus' => 'startCalc();',
          'onBlur' => 'stopCalc();'
        ) 
      )); 

      …and for the autosum field, I did this:

      piklist('field', array(
        'type' => 'text',
        'field' => 'total_lifts',
        'label' =>  __('Total Lifts'),
        'position' => 'wrap',
        'attributes' => array(
          'class' => 'text',
          'columns' => 2,
          'readonly' => "readonly"
        ) 
      ));

      and it used this JavaScript:

      function calc(){
      
        lifts1 = document.post["post_meta[trams]"].value; 
        lifts2 = document.post["post_meta[gondolas]"].value; 
        lifts3 = document.post["post_meta[hs_sixpack]"].value;
        lifts4 = document.post["post_meta[hs_quad]"].value; 
        lifts5 = document.post["post_meta[hs_triple]"].value; 
        lifts6 = document.post["post_meta[quad_chairs]"].value; 
        lifts7 = document.post["post_meta[triple_chairs]"].value; 
        lifts8 = document.post["post_meta[double_chairs]"].value; 
        lifts9 = document.post["post_meta[surface_lifts]"].value; 
        document.post["post_meta[total_lifts]"].value = 
          (lifts1*1) 
        + (lifts2*1) 
        + (lifts3*1)
        + (lifts4*1)
        + (lifts5*1)
        + (lifts6*1)
        + (lifts7*1)
        + (lifts8*1)
        + (lifts9*1);
      }
      
      function startCalc(){
        interval = setInterval("calc()",1);
      }
      
      function stopCalc(){
        clearInterval(interval);
      }
      

      But after the move to the final server – plus a Piklist update – it doesn’t work. I get this error:

      TypeError: ‘undefined’ is not an object (evaluating ‘document.post[“post_meta[trams]”].value’)

      …implying it’s failing when trying to get the first value.

      I apologize that my Javascript is pretty rudimentary, but I wanted to check with you guys in case it might be something to do with Piklist, or perhaps how I’m supposed to reference the metafield variables has changed…

      Thanks!
      adam

    • #1497
      Steve
      Keymaster

      Which version of Piklist was it working on before the upgrade?

    • #1501
      cosmocanuck
      Member

      It was 0.9.1. Not 100% sure that this feature was indeed working with that version as it didn’t come up as an issue till recently, but it seems to be the case. Currently on 0.9.3 on the new (final) server.

    • #1515
      Marcus
      Member

      Just thought this script might be a little more beneficial as you have access to jquery in wordpress at any time:
      (Keep your onfocus events, only remove your onblurs)

      jQuery(document).ready(function($){
      	calcMe = function () {
      		var total=0;
      		$('#[^="_post_meta_calcme_"]').each(function (e) {
      			var cur = $(this);
      			total += ($.trim(cur.val())=='')?0:parseInt(cur.val());
      		});
      		$('#[^="_post_meta_finalcalc_"]').val(total);
      	}
      });
      

      Then to make this a universal autosum function, just name your fields that you want autosummed, calcme_fieldnamehere (as the each statement, only checks fields that start with calcme) And name your field for the total ‘finalcalc_fieldnamehere’
      This way, you can reuse this concept anywhere, and this should work out of the box.

      I haven’t tested this code, but from what I can see it should work. LOL

      Marcus

    • #1516
      cosmocanuck
      Member

      Thanks a million Marcus! I followed your instructions to the letter, AFAIK – and have confirmed that your script is loading – but I’m not seeing any auto-summing.

      Here’s what I’ve done for the autosum fields in the metabox file:

      piklist('field', array(
        'type' => 'text',
        'field' => 'calcme_trams',
        'label' =>  __('Trams'),
        'position' => 'wrap',
        'attributes' => array(
          'class' => 'text',
          'columns' => 2,
          'onFocus' => 'calcMe();'  ) 
      )); 
      

      …and here’s what i did for the grand-total field:

      piklist('field', array(
        'type' => 'text',
        'field' => 'finalcalc_total_lifts',
        'label' =>  __('Total Lifts'),
        'position' => 'wrap',
        'attributes' => array(
          'class' => 'text',
          'columns' => 2,
          'readonly' => "readonly"
        ) 
      )); 
      

      But nothing happens.

      Any idea what might be amiss?

      Thanks again,
      Adam

    • #1518
      Marcus
      Member

      Sorry about that, I was trying to be too generic trying to catch all id’s. You just want to catch the input ids.

      It should read:

      jQuery(document).ready(function($){
      	calcMe = function () {
      		var total=0;
      		$('input[id^="_post_meta_calcme_"]').each(function (e) {
      			var cur = $(this);
      			total += ($.trim(cur.val())=='')?0:parseInt(cur.val());
      		});
      		$('input[id^="_post_meta_finalcalc_"]').val(total);
      	}
      });
      

      Marcus

    • #1519
      Marcus
      Member

      I also forgot, jquery allows meta characters, so you could also use:

      jQuery(document).ready(function($){
      	calcMe = function () {
      		var total=0;
      		$('#_post_meta_calcme_*').each(function (e) {
      			var cur = $(this);
      			total += ($.trim(cur.val())=='')?0:parseInt(cur.val());
      		});
      		$('#_post_meta_finalcalc_*').val(total);
      	}
      });
      

      If you wanted to catch selects, and textareas too. (although why would you) 🙂

      Marcus

    • #1524
      cosmocanuck
      Member

      Marcus, you are truly a god of Javascript!

      Well, at least, you’re way more expert than me. 8^)

      I’m inspired to renew my Java self-education efforts! It’s hard when it’s only occasionally that this stuff comes up… so I never have the opportunity to really dig into it. (And long gone are my single/childfree days when I could stay up half the night absorbing some new coding knowledge just for the fun of it!)

      Anyway, bottom line, it works great and THANK YOU for the revised code!

      All the best!
      Adam

    • #1525
      Marcus
      Member

      You are far too kind and you get a massive reprieve for being a javascript god yourself, because your a dad. <grin>

      Hope you get to spend some time with jquery, you’ll love the api.

      Trust me, when I say, that Kevin is the guru of JS, I’m more like an old fart who likes to know a few things.

      Marcus

    • #1531
      bicho44
      Member

      Too much flowers 😀

      Nice code anyways, thanks

    • #1613
      cosmocanuck
      Member

      Hi again Marcus!

      Hey, I realized that there was an unintended consequence in my using that fine JS code of yours. Since I had to rename the relevant metafields for the calc to work, all the data my client already entered in for those – in 130+ posts – is no longer being used or displayed. Well, the front end was OK, but only because it was grabbing the old fields.

      Instead of making my client re-enter all those numbers, I’m wondering if the script could simply do a hard-coded calc of the needed fields, as they already are named, instead of the (admittedly efficient and nifty) approach of custom-naming the fields and using the “each” function.

      Not pretty I know, but this field configuration is not going to change, and if it does, I’m happy to hard-code a fix.

      Let me know… thanks!
      Adam

    • #1617
      cosmocanuck
      Member

      If you have time…

      I’m trying to reference the specific fieldnames, to avoid the .each method and allow the use of the existing data… but am unclear (being a JS fairly-newbie) on how I reference the Piklist fields. I see you’re using

      ‘input[id^=”_post_meta_calcme_”]’

      But the old code that once worked, used constructions like:

      lifts1 = document.post[“post_meta[trams]”].value;

      How would I refer to the fields correctly to simply total up the value of the specific fields I’d like to summarize?

      Thanks…

    • #1618
      Marcus
      Member

      Adam, you can still use the code I provided, but just change one small line:

      $('#_post_meta_calcme_*').each
      

      So the format for hardcoded fields, is similar. #_post_meta_ tells the each statement that you want, the ids ‘#’ that start with ‘_post_meta_’ (as this is what piklist prenames the ids) then just add in your field name. ‘calcme_*’ (which means fields that start with calcme_)

      So for your hardcoded ones, just separate the different fields, with a comma ‘,’ such as:

      $('#_post_meta_trams,#_post_meta_gondolas,#_post_meta_hs_sixpack').each
      

      Then the final total line from:

      $('#_post_meta_finalcalc_*').val(total);
      

      to

      $('#_post_meta_total_lifts').val(total);
      

      Marcus

    • #1619
      cosmocanuck
      Member

      Awesome. Thanks Marcus!

Viewing 17 reply threads
  • You must be logged in to reply to this topic.