view and edit on same page

[Alex Glaros]

not sure how to describe this question, but is there a way to avoid writing a separate edit page for a data item by using the same page that displays it, but having a button submitted that says "edit", which enables a conditional statement to edit the data on the same page?

Normally I have a "edit" button on a view page (view_profile_data), which takes user to a separate view page (edit_profile_data).

To avoid creating the edit_profile_data page, is it possible to have a conditional in the view_profile_data page like this:

{{if edit_button is clicked:}}

    {{=form}}

{{pass}}

Does anyone do it like that or does everyone send user to separate edit page?  I guess I'm wondering if there are short-cuts.

thanks,

Alex Glaros

[villas]

Hi Alex

I suggest you do it in Javascript.  Have view and edit sections in separate divs.  Show and first and hide the other.  Then when you click the button,  toggle the show and hide.

Hope that works for you.  D

[JorgeH]

I do it adding a button like you did, but

view:

div class="subtitulo"><h3>  {{=datos_formula.nombre}} 

</h3></div>

<div>

        <button class="btn" id="formula" title="clic para editar nombre" type="button" onclick="web2py_component('{{=URL('default','formula_general.load')}}', 'panel')"> <i class="icon-pencil"></i></button>

</div>   

<br/>

<div  id ="panel"   width="100%"></div>

controller:

def formula_general():

    fields = ['nombre']

    record = session.formula

    form = SQLFORM(db.formulas, record, fields=fields)

    request.post_vars.id = session.formula

    if form.process().accepted:

        response.flash = 'actualizado'

        redirect(request.env.http_web2py_component_location, client_side=True)

    elif form.errors:

        response.flash = 'favor revisar'

   

    return dict(form=form)

in the new view (formula _general)

<form action="#" enctype="multipart/form-data" method="post" data-w2p_target="panel">

<input type="hidden" name="_formname" value="{{=form.formname}}" /> 

<input type="hidden" name="_formkey" value="{{=form.formkey}}" />

 {{=form.custom.widget.nombre}}  {{=form.custom.submit}}  <button class="btn"  id="cancelar"  onclick="web2py_component('{{=URL('default','nada.load')}}', 'panel')"> Cancelar</button>

# turns screen or div blank (for when user clics  on 'cancel'

def nada():

    return ''

[Alex Glaros]

Hi Jorge,

are there two views?  view and new-view (formula _general)?

thanks,

Alex

[Dave S]

On Wednesday, July 29, 2015 at 4:34:30 PM UTC-7, Alex Glaros wrote:

Hi Jorge,

are there two views?  view and new-view (formula _general)?

I would expect a view for the page (page.html) and the view for the component (formula_general.load, as listed in the onclick(), and a view for the cancellation component (nada.load).  On clicking a button, one or the other of the .load files will replace the DIV (in the page.html view)  with the id == 'panel'.

/dps

[JorgeH]

yes.

The first view, lets call it formula. 

for this example, just a tiny button with a pencil on it

 <button class="btn" id="formula" title="clic para editar nombre" type="button" onclick="web2py_component('{{=URL('default','formula_general.load')}}', 'panel')"> <i class="icon-pencil"></i></button>

<div  id ="panel"   width="100%"></div>

It calls the controler called 'formula_general'

def formula_general():

   fields = ['nombre']

   record = session.formula

   form = SQLFORM(db.formulas, record, fields=fields)

   request.post_vars.id = session.formula

    if form.process().accepted:

       response.flash = 'actualizado'

       redirect(request.env.http_web2py_component_location, client_side=True)# Need it to reload the main page after editing fields, so the change are reflected instantly.

   elif form.errors:

       response.flash = 'favor revisar'

 

    return dict(form=form)

in the new view (formula _general.load) just showing the form and nothing else (don't extend layout.html) :

<form action="#" enctype="multipart/form-data" method="post" data-w2p_target="panel">

<input type="hidden" name="_formname" value="{{=form.formname}}" /> 

<input type="hidden" name="_formkey" value="{{=form.formkey}}" />

 {{=form.custom.widget.nombre}}  {{=form.custom.submit}}  <button class="btn"  id="cancelar"  onclick="web2py_component('{{=URL('default','nada.load')}}', 'panel')"> Cancelar</button> 

Here you show the form (in this example Its a one field form, plus a Cancel button if the user decides not to edit. Change is showed instantly.

In the event that the users clic on 'cancel', then I created a controller just for that, called 'nada'   (spanish for 'nothing')

That controller just returns nothing, thus hiding the form (it could be done via jquery though. I just find it easier to use a controller:

 

# turns screen or div blank (for when user clics  on 'cancel'

def nada():

    return ''

[JorgeH]

Exactly, 

Just as Dave S says. 

;)

[Alex Glaros]

Thanks for for taking the time to write detailed examples Jorge. Might have minor questions later but works great so far!

Alex

[Alex Glaros]

is there a way to make the edit button (<i class="icon-pencil"></i>) and other non-editing info temporarily disappear when editing in the form?

how would view "know" if in edit mode?

thanks

Alex

[Dave S]

On Monday, August 3, 2015 at 2:51:35 PM UTC-7, Alex Glaros wrote:

is there a way to make the edit button (<i class="icon-pencil"></i>) and other non-editing info temporarily disappear when editing in the form?

how would view "know" if in edit mode?

You could have the onclick()  routine toggle visibility as well as doing a load.

Something like

 document.getElementById("formula").style.visibility="hidden" ;

/dps

[Alex Glaros]

thanks Dave but it makes it so that the whole edit form also never appears. Even if it's not in the DIV that gets hidden. Form appeared correctly before. See anything wrong here? 

DIV labeled "hide_if_editing" get correctly hidden.

How to get the form to appear?  Is it because it's called from "onclick" statement which contains the visibility parm?

<button class="btn" id="formula" title="Click to edit this checklist type" type="button" onclick= document.getElementById("hide_if_editing").style.visibility="hidden" ;"web2py_component('{{=URL('default','formula_general', vars=dict(specificOrganizationID=specificOrganizationID, specificCheckListTypeID=specificCheckListTypeID))}}', 'panel')"> <i class="icon-pencil"></i> Edit this check list type</button>

<div id="hide_if_editing"> <!-------- HIDE IF EDITING ------------------------------------------------------------------------>

   {{=grid}}

</DIV> <!--------------------------------- END OF: HIDE IF EDITING ----------------------------------------------------------->

thanks,

Alex

[Alex Glaros]

okay, changed the order of the statement and now works perfectly, thanks!

 <button class="btn" id="formula" title="Click to edit this checklist type" type="button" onclick= "web2py_component('{{=URL('default','formula_general', vars=dict(specificOrganizationID=specificOrganizationID, specificCheckListTypeID=specificCheckListTypeID)) }}', 'panel')"; document.getElementById("hide_if_editing").style.visibility="hidden"> <i class="icon-pencil"></i> Edit this check list type</button>

[Dave S]

On Monday, August 3, 2015 at 4:51:08 PM UTC-7, Alex Glaros wrote:

okay, changed the order of the statement and now works perfectly, thanks!

Glad to hear it!

/dps