I created different tabs in a view with the following code:
<!doctype html>
<html>
<head>
<meta name="layout" content="main-redesign" />
<title>Account Settings</title>
</head>
<body>
<%-- global header --%>
<%-- tab navigation your network --%>
<g:render template="accountSettingNavigation"/>
<%-- main content area --%>
<div class="container account-setting">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<h3 class="page-title">ACCOUNT SETTINGS</h3>
<%-- your network tab containers --%>
<div class="tab-content mb-100">
<div class="tab-pane active" id="personalInformation">
<g:render template="personalInfo"
model="[user:user,editable:editable]" />
</div>
<div class="tab-pane" id="changePassword">
<g:render template="changePassword"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the changePassword template I have a form which includes 3 fields:
Current password
New password confirmation
After the user clicks on the "update password" the form is submitted to a controller to save the new password.
In have to render the view and to ensure that the changePassword template will be selected- How?
Provide in your model, what tab is active and by that means decide, where to put the active css class.
first add hidden fields into the templates, which mark the tab
(let say name="tabName" value"personalInformation")
in the controller you can access this field in
params (params.tabName)
at the end of the controller put this
field into the model
use this field in the gsp to decide what tab
is active
Related
I have a Livewire component with a button, and I want to append a form (i.e another livewire component) by clicking that button. Like we do that by using ajax, requesting to the backend to load HTML and append with jQuery. So question is, can we do the same with Livewire?
<div>
<button wire:click="loadFormComponent">Add a Link</button>
<div>
here I want to append the result of `loadFormComponent`
</div>
</div>
bellow is Form Component
<div>
<form wire:submit.prevent="addLink">
<div>
<input type="URL" wire:model="URL" placeholder="https://example.com">
<button type="submit">Save Link</button>
</div>
</form>
</div>
Yes, you can display parts of your blade -including other Livewire components- under conditions. You don't need AJAX for this. You make the section of your Blade file conditional:
<div>
<button wire:click="$set('showFormComponent', true)">Add a Link</button>
#if ($showFormComponent)
<div>
here I want to append the result of `loadFormComponent`
</div>
#endif
</div>
and in your livewire component you need to add:
public $showFormComponent;
On click, the variable $showFormComponent will be set to true and view will be re-rendered including the component.
I have a django application. when a user clicks the submit button two modals should be shown one after another each has to do different functions in views.py in my django app. I am trying to write the code but the problem is not easy and I have looked everywhere and couldn't get the answer.
I have to write the code in the following way:
views.py
def submit(request):
#first modal should pop up which has two options.
#second modal should pop up which also has a two options.
and when the user clicks any of the buttons each should also call the different function in views.py.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn btn-danger custom" style="position:absolute; left:800px; top:180px;" type="submit">Update the data</button>
# user clicks a button in form and modal should pop up
# then 2 modals should pop up
# the first modal has two buttons
# when user clicks the update button the function in the views should be called and also 2nd modal
should pop up
<!--modal 1-->
<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="UpdateModal" role="dialog"
tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Changes</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
#when user clicks update button another modal should pop up as well as
another function in the views should be called.
</body>
</html>
You could do that by using the modal system from the bootstrap documentation, you can check the live demo
In your template use a condition with Jinja2 if first condition show modal 1, else show modal 2, just make sure you have 2 different ID for the modal so they open distinctly
In prestashop 1.7, the checkout template file themes/classic/templates/checkout/checkout.tpl uses its own html structure instead of extending page.tpl, like every other checkout pages (cart, order confirmation, etc).
Why is that? Is there any security flaw we should be aware of?
I've overriden checkout.tpl in my own theme {extends file='page.tpl'} and I want to make sure that everything's alright:
{extends file='page.tpl'}
{block name='content'}
<section id="content">
<div class="row">
<div class="col-md-8">
{block name='cart_summary'}
{render file='checkout/checkout-process.tpl' ui=$checkout_process}
{/block}
</div>
<div class="col-md-4">
{block name='cart_summary'}
{include file='checkout/_partials/cart-summary.tpl' cart = $cart}
{/block}
{hook h='displayReassurance'}
</div>
</div>
</section>
{/block}
Thanks!
Florian
I am working with Velocity templates, where I need to have multiple pages that needs to follow the same template style, say "about_me", "contact_us" and "home", all these pages will have same header, left menu and only thing different is content.
For example, HTML for all of them would be exactly the same except for one in < div id="page-content" >.
<html>
<head>
.. some common css and js
</head>
<body>
<div id="main-content">
<div id="header">
Main Menu Bar on top
</div>
<div id="left-menu">
Menus on the left
</div>
<div id="page-content">
I could be contact us, or home or about us.
</div>
</div>
</body>
</html>
One of the ways I have done is by having separate .vm file for header and side menu and importing them over on each of aboutus.vm, contactus.vm and home.vm, but with this i have lot of duplicate code. Is there a way to define everything as a template and just have "page-content", defined in my .vm files?
You could parse a velocity file in the middle of your page and define the template name as a variable. That way you could point to a different page-content.vm file for each
In the below example $contentTemplate could equal any of the following:
home/page-content.vm
about/page-content.vm
contact/page-content.vm
See below
<html>
<head>
.. some common css and js
</head>
<body>
<div id="main-content">
<div id="header">
Main Menu Bar on top
</div>
<div id="left-menu">
Menus on the left
</div>
<div id="page-content">
#parse($contentTemplate)
</div>
</div>
</body>
</html>
The below html was provided inside a <cfdocumentitem type="header"> block.
But the output is empty.
<div class="grid">
<div class="span5">
<div class="span5">
Label1
</div>
<div class="span5">
Data1
</div>
</div>
<div class="span5">
<div class="span5">
Label2
</div>
<div class="span5">
Data2
</div>
</div>
<div style="clear:both"></div>
</div>
But when I remove the nested 'class="span5"' divs and put some content there, it is working fine. Is there any problem with nested float in cfdocument???
Unfortunately, CSS support in CFDOCUMENT is kind of hit or miss.
2 rules to follow that might help:
Make sure your HTML validates as XHTML 1.0 Transitional
Import your style sheets using
<style type="text/css" media="screen">#import "style.css";</style>
This same information can be found here: http://rip747.wordpress.com/2007/09/10/cfdocument-it-works-if-you-know-how/