Problems, need help? Have a tip or advice? Post it here.
14 posts Page 1 of 2
Hi,

i have to following not working code:

Code: Select all
<cms:pages masterpage='sales_transactions.php' limit='50' paginate='1' custom_field="invoice_no=<cms:show sa_no/>" order='asc'>
 
    <table width="100%">
       
        <td id="getId">

         <!-- <cms:set page_to_edit ="<cms:show k_page_id/>" 'global' /> FIXME: @k_page_id [getting only the last one in the list] need page id for edit form -->
           
         <a href="#" onClick="GetPageID(<cms:show k_page_id/>);"  class="label"><i class="foundicon-edit"></i></a>
               
        </td>


    </table>

</cms:pages>

          <script type="text/javascript">
              $(document).ready(function() {
                function GetPageID(pageid) {
               var page_to_edit = (pageid) ;
               }
              });
          </script>


I try to change the variable page_to_edit when the link is clicked, but somehow I can't find a way to do this.

Any help would be great ..!
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
Hi,

Do a view-source of the generated page and the 'onClick' code should show different IDs e.g.
onClick="GetPageID(23);"
onClick="GetPageID(24);"

Is this not what is happening?
Hi KK,

No, it will give me the page id like onClick="GetPageID(23);"

Somehow the java script won't change the original value (lets say "100" ) of the variable page_to_edit to "23" when clicked.
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
So Couch is providing the page's id as expected.
The issue you have then is a front-end JavaScript issue -
Perhaps @cheesypoof can chip in if he is able to spot the problem?
Hi Tom, could you give us some more detail about what you want to accomplish? Are you trying to use this page id in a form?
Hi Cheesypoof,

I have a list of pages and want the user be able to edit them by using a form in a modal window.

So the form method edit needs the page id using a variable (page_to_edit) . Using <cms:set page_to_edit ="<cms:show k_page_id/>" 'global' /> in the cms pages loop will give me only the last page id in the loop to pass to the form. I was thinking to solve this by (re)setting the variable onclick could be done.. somehow my script doesn't change my variable (page_to_edit).
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
I think you are perhaps misunderstanding how and when JavaScript is executed. Couch and PHP are already out of the picture when JavaScript runs client-side in your browser. You can't alter a Couch variable in such a manner with JavaScript.

Additionally, that GetPageID function doesn't actually change anything. All it does is create a variable with the value of pageid which immediately becomes inaccessible as soon as the function returns.
Code: Select all
function GetPageID(pageid) {
    var page_to_edit = pageid;
}

I'm sure we can figure something out, but could you please post the rest of the code, where you actually use the page_to_edit variable?
Hi Cheesypoof,

I think understand the difference of client- & server-side behavior. I only used the couch/php variable as a start to hold the first value on page load. I probably don't understand how to manipulate the DOM and call that value back to the form as the new variable value with javascript.

Until now I'm able to set a variable with <cms:set page_to_edit ="<cms:show k_page_id/>" 'global' /> or like this <script>var page_to_edit=null;</script> and set the new value with <a href="#" onclick='page_to_edit="<cms:show k_page_id />"' >


Anyhow I'm having a hard time with this... here the page code:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<!DOCTYPE html>


<cms:member_check_login />
<cms:template title='Sales' clonable='1' commentable='1' dynamic_folders='1'>

<cms:editable name='system' label='System' type='group' order='1'/>
<cms:editable name='sa' label='Prefix' type='text' required='1' group='system'>SA-</cms:editable>
<cms:editable name='sa_no' label='Sales Number' type='text' validator='non_negative_integer' search_type='integer' required='1' group='system'></cms:editable>
<cms:editable name='owner' label='Owner' type='text' required='1' group='system' search_type='integer' ></cms:editable>


<cms:editable type='relation' name='company' masterpage='companies.php' has='one' />

<cms:editable name='info' label='Order info' type='group' order='3'/>
<cms:editable name='order_note' label='Extra info' type='richtext' group='info'></cms:editable>



<cms:editable name='terms' label='Terms' type='group' order='3'/>

<cms:editable name="payment" label="Payment Terms" desc="Select one from these"
    opt_values='prepay=0 | 7 days=7 | 30 days=30'
    opt_selected = '7 days'
    type='dropdown'
    search_type='integer'
    required='1'
    group='terms'
  />

<cms:editable name='note' label='Note' type='textarea' group='terms'></cms:editable>


<cms:editable name='due_date' label='Date due' type='text'></cms:editable>
<cms:editable name='invoice_date' label='Invoice date' type='text'></cms:editable>
<cms:editable name='invoice_number' label='Invoice Number' type='text' search_type='integer'></cms:editable>


</cms:template>

<head>

  <cms:embed 'head.html'/>

</head>
<cms:embed 'top_bar.html' />

<body>
<div class="row"> <!-- main row -->
    <div class="large-12 columns">


   <cms:if (k_member_logged_in) && (my_user_team=='Sales') || (my_user_team=='Management') > <!-- membercheck -->

     <!-- <cms:set frm-redirect="<cms:show k_page_link/>" 'global'/>  redirect link for forms on page -->

      <cms:set cur_status = "<cms:show sa/>" 'global' />
      <!-- cur_status is used to for checking status invoice or quote -->
      <!-- if folder list view NOTE: @home-view [should be embed for better reading] -->
   <cms:if k_is_home >
     <br/>

     <div class="row">
       <fieldset>
         <legend>Your resent Quotes :</legend>
         <br/>

         <cms:pages folder='Quote' include_subfolders='1' masterpage='sales.php' limit='10' custom_field="<cms:if my_user_team=='Sales'>owner=<cms:show k_member_id/></cms:if>">


           <div class="small-12 medium-2 large-2 columns">
           <a href="<cms:show k_page_link/>"><cms:show sa/><cms:show sa_no/></a>
           </div>

           <div class="small-12 medium-2 large-2 columns">
           <cms:date k_page_date format='d-m-Y'/>
           </div>

           <div class="small-12 medium-4 large-4 columns">
            <cms:related_pages 'company' masterpage='companies.php' >
            <!-- All variables of 'companies.php' are available here -->
            <a href="<cms:show k_page_link/>"><cms:show k_page_title /></a>
            </cms:related_pages>
           </div>

             <hr/>
          </cms:pages>
       </fieldset>
      </div>

<br/>

<div class="row">
<fieldset>
   <legend>Your resent Invoices :</legend>
   <br/>

     <cms:pages folder='Invoiced' include_subfolders='1' masterpage='sales.php' limit='10'  custom_field="<cms:if my_user_team=='Sales'>owner=<cms:show k_member_id/></cms:if>" >

         <div class="small-12 medium-2 large-2 columns">
           <a href="<cms:show k_page_link/>"><cms:show sa/><cms:show sa_no/></a>
         </div>
         <div class="small-12 medium-2 large-2 columns">
           <cms:date k_page_date format='d-m-Y'/>
         </div>


          <div class="small-12 medium-4 large-4 columns">

            <cms:related_pages 'company' masterpage='companies.php' >
               <!-- All variables of 'company.php' are available here -->
               <a href="<cms:show k_page_link/>"><cms:show k_page_title /></a>
            </cms:related_pages>

          </div>

          <hr/>
     </cms:pages>
</fieldset>
</div>



</cms:if>
<!-- end if folder list view -->


<cms:if k_is_page >
   
     <div class="row">
         <div class="large-12 columns">
           <br/>

           <div class="row">

              <div class="small-12 medium-12 large-4 columns">
               <cms:set cur_date="<cms:date format='d-m-Y' />" 'global'/>
                  <cms:if (due_date lt cur_date) && (cur_status=='In')>
                   <p class='panel-red'>Invoice overdue since: <cms:date due_date format='d-m-Y'/><p>
                  </cms:if>
              </div>


              <div class="small-12 medium-12 large-4 columns">
                <p><small>Date Posted: <cms:date k_page_date format='d-m-Y'/></small></p>
              </div>
 
           </div>


           <fieldset>

               <legend><cms:if k_page_foldername='quote'>Quote: <cms:show sa/><cms:show sa_no/><cms:else/>Invoice: <cms:show sa/><cms:show invoice_number/></cms:if></legend>
               <br/>
              <cms:related_pages 'company' masterpage='companies.php' > <!-- All variables of 'companies.php' are available here -->
     
                 <div class="small-12 medium-4 large-4 columns">
     
                   <h2 class="l-title"><a href="<cms:show k_page_link/>"><cms:show k_page_title /></a></h2>
                   <p><cms:show company_street />  <cms:show company_streetno /><br/><cms:show company_town /> <cms:show company_postcode /><br/><cms:show company_country /> </p>
                 </div>

             </cms:related_pages>

 
             <div class="small-12 medium-4 large-4 columns">
               <cms:if (k_page_foldername='quote') && (my_user_team=='Management')>
                  <a href="#" class='button tiny success' data-reveal-id="createinvoice" data-reveal>Invoice this quote.</a>
               </cms:if>

             </div>
   
   
              <hr/>

              <table width="100%">
               <tr>
                 <th>Description</th>
                 <th style="text-align:right">Amount</th>
                 <th style="text-align:right">Price</th>
                 <th style="text-align:right">Total</th>
                 <th>VAT</th>
                   <cms:if k_page_foldername='quote'> 
                      <th></th>
                      <th></th>
                   </cms:if> 
               </tr>

               <cms:set total_price_count='0' scope='global' />
               <cms:set total_vat_count='0' scope='global' />


               <!-- HELP: [Inline edit for members] @Forms should be used here ? inline edit won't work!! need to solve this with forms-->
               <cms:pages masterpage='sales_transactions.php' limit='50' paginate='1' custom_field="invoice_no=<cms:show sa_no/>" order='asc'>

               <tr>
                   <td <cms:if cur_status=='Qu'> class='invoice' </cms:if> >
                     
                     <cms:if cur_status=='Qu'>
                     <a href="#" data-reveal-id="editorderlineItem" data-reveal><cms:show item /></a>
                     <cms:else />
                     <cms:show item />
                     </cms:if>

                   </td>

                 <td style="text-align:right" <cms:if cur_status=='Qu'> class='invoice' </cms:if> >
                   <cms:if cur_status=='Qu'>
                   <a href="#" data-reveal-id="editorderlineAmount" data-reveal><cms:show amount /> </a>
                   <cms:else />
                   <cms:show amount />
                   </cms:if>
                 </td>
                 <td style="text-align:right" <cms:if cur_status=='Qu'> class='invoice' </cms:if> >
                   <cms:if cur_status=='Qu'>
                   <a href="#"  data-reveal-id="" data-reveal><cms:number_format price decimal_precision='2' decimal_character=',' thousands_separator='.'/> </a>
                   <cms:else />
                   <cms:show amount />
                   </cms:if>
                 </td>


               <td style="text-align:right">
               <!-- calculate total -->
               <cms:set line_price = "<cms:show price/>"/>
               <cms:set line_amount = "<cms:show amount/>"/>
               <cms:set total_price = "<cms:mul line_price line_amount/>" 'global'/>

               <cms:set vat_pct = "<cms:add vat '100'/>"/>
               <cms:set vat_pct = "<cms:div vat_pct '100'/>"/>
               <cms:set total_vat_price = "<cms:mul total_price vat_pct/>"/>

               <cms:number_format total_price decimal_precision='2' decimal_character=',' thousands_separator='.'/> €
               <!-- end calculate total -->
               </td>

                <!-- calculate invoice total -->
               <cms:set invoice_line-price = "<cms:show total_price/>"/><cms:set total_price_count="<cms:add total_price_count invoice_line-price />" scope='global' />
               <cms:set invoice_line-vat = "<cms:show total_vat_price/>"/><cms:set total_vat_count="<cms:add total_vat_count invoice_line-vat />" scope='global' />


               <!-- calculate invoice total -->

               <td><cms:show vat />%</td>
               <td>

               <!-- <cms:set page_to_edit ="<cms:show k_page_id/>" 'global' /> FIXME: @page id [getting only the last one in the list] page id for edit form -->
                <cms:if cur_status=='Qu'>
                  <a href="#" class="label" data-reveal-id="editorderline" data-reveal ><i class="foundicon-edit"></i></a>
                </cms:if>
               </td>

               <td >

               <cms:set page_to_delete = "<cms:show k_page_id/>" 'global' /><!-- page id for delete form -->

               <!-- delete button -->
                <cms:if cur_status=='Qu'>
                  <a href="#" class="label alert" data-reveal-id="delorderline" data-reveal><i class="foundicon-remove"></i></a>
                </cms:if>
               <!-- delete button -->

               </td>

               </tr>
               </cms:pages>

              </table>

             <!-- here total ordercalc -->
             <div align="right">
               <table>

                 <td>Total ex VAT: <cms:number_format total_price_count decimal_precision='2' decimal_character=',' thousands_separator='.'/></td>
                 <td>VAT

                 <cms:set total_ex_vat = "<cms:show total_price_count/>" />
                 <cms:set total_incl_vat = "<cms:show total_vat_count/>" />
                 <cms:set vat_calc="<cms:sub total_incl_vat total_ex_vat />" scope='global' /><cms:number_format vat_calc decimal_precision='2' decimal_character=',' thousands_separator='.'/>

                 </td>
                 <td><b>Total <cms:number_format total_vat_count decimal_precision='2' decimal_character=',' thousands_separator='.'/> €<b/></td>

               </table>

               <p align="right"><small>Payment Terms: <cms:show payment/> Days</small></p>
               <cms:set payday="<cms:show payment/>" 'global' search_type='integer'/><!-- for invoice date settings -->

            </div>
            <!-- end here total ordercalc -->

            <!-- HELP: [doesn't show new line] after @redirect can't find what's wrong -->
            <cms:if k_page_foldername='quote'>
              <a href="#" class='label success' data-reveal-id="neworderline" data-reveal><i class="foundicon-plus"></i></a>
            </cms:if>

           </fieldset>

          </div>
        </div><!-- end quote lines -->
        <br/>

        <div class="row"> <!-- terms and info -->
          <div class="large-12 columns" >
           <fieldset>
            <legend>Conditions <a href="#" data-reveal-id="editterms" data-reveal><i class="foundicon-edit"></i></a></legend>
            <br/>

           <cms:do_shortcodes><cms:show note/></cms:do_shortcodes>

          </fieldset>
         </div>
        </div><!-- end terms and info -->

        <hr/>
   
       <div class="row"> <!-- extra info -->
        <div class="large-12 columns">
   
         <fieldset>
           <legend>Extra order info: <a href="#" data-reveal-id="editinfo" data-reveal ><i class="foundicon-edit"></i></a></legend>
           <br/>

           <cms:do_shortcodes><div><cms:show order_note/></div></cms:do_shortcodes>

         </fieldset>

        </div>
      </div><!-- Extra info -->
   
   

     <cms:embed 'nworderline.html' />
     <cms:embed 'delorderline.html' />
     <cms:embed 'editorderline.html' />
     
     <cms:embed 'edit_quote_conditions.html' />

     <cms:embed 'edit_quote_info.html' />
     <cms:embed 'create_invoice.html' />


   </cms:if> <!-- end page -->

   <cms:else />
     <cms:embed 'end_member_check.html' />
   </cms:if><!-- end membercheck -->

   

  </div>
</div> <!-- end main row -->

<cms:embed 'footer.html' />

 
</body>
</html>
<?php COUCH::invoke(); ?>


I left my java stuff out otherwise it would be to messy...

Below one of the forms of the page that get loaded on a modal window:
Code: Select all
<div id="editorderline" class="reveal-modal" data-reveal>


   <!-- start form -->
<cms:form
    masterpage='sales_transactions.php'
    mode='edit'
    page_id="<cms:show page_to_edit />"
    enctype='multipart/form-data'
    method='post'
    anchor='0'
    >

<cms:set my_action="edit_page_<cms:show page_to_edit />" />

<cms:if k_success >
       
        <cms:validate_nonce my_action />
       
        <cms:db_persist_form
            _invalidate_cache='0'
            k_page_title="<cms:show sa/><cms:show sa_no/>-<cms:show frm_item/>"
        />
       
       

        <cms:redirect "<cms:link k_page_link />" />
       
  </cms:if>
 

<div class="row collapse">

   <div class="small-3 large-2 columns">
      <span class="prefix">Description</span>
   </div>

   <div class="small-9 large-10 columns">
     <cms:input type="bound" name="item"/>
   </div>

</div>

<div class="row collapse">

   <div class="small-3 large-2 columns">
      <span class="prefix">Amount</span>
   </div>

   <div class="small-9 large-10 columns">
     <cms:input type="bound" name="amount"/>
   </div>

</div>

<div class="row collapse">

   <div class="small-3 large-2 columns">
      <span class="prefix">Price</span>
   </div>

   <div class="small-9 large-10 columns">
     <cms:input type="bound" name="price"/>
   </div>

</div>

<cms:if (my_user_team=='Accounting') || (my_user_team=='Management') >

   <div class="row collapse">

     <div class="small-3 large-2 columns">
      <span class="prefix">VAT</span>
     </div>

     <div class="small-9 large-10 columns">
      <cms:input type="bound" name="vat"/>
     </div>

     </div>

    <br/>

</cms:if>


<cms:input name='nonce' type='hidden' value="<cms:create_nonce my_action />" />

<input type="submit" name="submit" class="button small" value="Submit"/>

</cms:form>

<a class="close-reveal-modal">&#215;</a>
</div>


To give a full idea of the page....
Image
and the form...
Image

In the form page_id= should receive the new value after the link is clicked.

I'm really stuck here so any pointers could help me.
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
Alright Tom, I believe I understand what you are trying to do now :)

I think it would be best to alter your approach and load all of the modal content with AJAX requests. This should be more efficient and maintainable than using the data-reveal-id method.

For example, where previously to edit an order line item you used the following:
Code: Select all
<a data-reveal-id="editorderlineItem" href="#"><cms:show item/></a>
We would now point to a new template which contains all of the different modal forms:
Code: Select all
<a data-reveal-ajax="<cms:add_querystring link="<cms:link 'ajax.php'/>" querystring="act=edit&what=order_line_item&id=<cms:show k_page_id/>"/>" href="#"><cms:show item/></a>

An example URL could look like: http://yoursite.com/ajax/?act=edit&what=order_line_item&id=25

I decided to name this template ajax.php and to use the act, what, and id query string parameter names. You can of course use whatever names you prefer...

The following is an example template which you should be able to customize to your needs:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>

<cms:template hidden='1' title='AJAX Functions'/>

<cms:member_check_login/>

<cms:if my_user_team != 'Accounting' && my_user_team != 'Management'>
    <!-- WHY ARE YOU HERE? -->
    <cms:redirect k_site_link/>
</cms:if>

<cms:set ajax_act = "<cms:gpc method='get' var='act'/>"/>
<cms:set ajax_what = "<cms:gpc method='get' var='what'/>"/>
<cms:set ajax_id = "<cms:gpc method='get' var='id'/>"/>

<cms:if ajax_act == 'edit'>

    <!-- START EDIT -->
    <cms:if ajax_what == 'order_line_item'>
        <cms:embed 'editorderline.html'/>
    <cms:else/>
        <cms:if ajax_what == 'quote_conditions'>
            <cms:embed 'edit_quote_conditions.html'/>
        <cms:else/>
            <cms:if ajax_what == 'quote_info'>
                <cms:embed 'edit_quote_info.html'/>
            <cms:else/>
                <!-- WHY ARE YOU HERE? -->
                <cms:redirect k_site_link/>
            </cms:if>
        </cms:if>
    </cms:if>
    <!-- END EDIT -->

<cms:else/>
    <cms:if ajax_act == 'create'>

        <!-- START CREATE -->
        <cms:if ajax_what == 'invoice'>
            <cms:embed 'create_invoice.html'/>
         <cms:else/>
            <cms:if ajax_what == 'order_line_item'>
                <cms:embed 'neworderline.html'/>
            <cms:else/>
                <!-- WHY ARE YOU HERE? -->
                <cms:redirect k_site_link/>
            </cms:if>
        </cms:if>
        <!-- END CREATE -->

    <cms:else/>
        <cms:if ajax_act == 'delete'>

            <!-- START DELETE -->
            <cms:if ajax_what == 'order_line_item'>
                <cms:embed 'delorderline.html'/>
            <cms:else/>
                <!-- WHY ARE YOU HERE? -->
                <cms:redirect k_site_link/>
            </cms:if>
            <!-- END DELETE -->

        <cms:else/>
            <!-- WHY ARE YOU HERE? -->
            <cms:redirect k_site_link/>
        </cms:if>
    </cms:if>
</cms:if>

<?php COUCH::invoke(); ?>
In your modal form snippets use the ajax_id variable instead of page_to_edit.

For now let's just focus on getting the correct form to display in the modal window before we deal with the submission of said forms. Do let me know if you have any questions.
Hi Cheesypoof,

Great tutorial ... I was already on my way to learn angularjs to get this done.

I start direct with your approach and will post my result later.
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
14 posts Page 1 of 2
cron