We Keep Coding

How to include different view in the same html page with framework7?

I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files.
for example in php we can do it with a
include("");
but in framework7 I can include only one with
<div class="view view-main view-init" data-url="/page/" data-name="page"></div>
I'd like to include more one view like this
<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>
i put an image here to explain me better.
what i'd like to do
Thank you for your help.
pages.html
<div data-name="pages" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="pages1">
<div class="row justify-content-center">
<div class="block-title">
<h1> Pages</h1>
</div> <!--block-title-->
</div><!--row-->
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card 1</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
Here I'd like to include the code inside pages1.html
Here I'd like to include the code inside pages2.html
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" href="#">Salva</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
pages1.html
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card2</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->

To include Multiple Views Layout you need to do this:
You need to create wrapper with class views like this: <div class="views tabs">
You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
You need to make sure thats only one views class wrapper.
In Js: You can control multiple views by this:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
For more details: F7 View
For Embedded Multi view not like tab:
Example
Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally

EDIT: After a long investigation, I found from the documentation that you can do it like this:
<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
...
</div>
And in your routers, will need to define your route as well:
var app = new Framework7({
root: '#app',
// Create routes for all pages
routes: [
{
path: '/',
url: 'index.html',
},{
// Add your contents page route
path: '/your-page/',
url: 'pages/your-page.html',
},
.....
});
Hope this help.

Semantic UI Dropdown Search - selecting with the enter key

I've been working with Semantic UI for a project. I'm using the Search Selection version of the dropdown (classes are 'ui fluid search selection dropdown'). Under each item, I have setup a custom data-dogs attribute, with either 0 or 1. If the selected item has a data-dogs value of 1, I need an item on my form to show, or hide if it's a 0.
It's working fine on the mouse click, but I'm rather rusty with JS, so I'm not sure if there is an easy way to get the same functionality with the enter key and up/down arrows).
The JS code I've made is below.
If anyone could give me some pointers, I'd very much appreciate it.
Many thanks in advance!
$('.item').on('click', function(){
if($(this).data('dogs')==1){
$('#dogCheckbox').removeClass('hidden');
console.log('Working?');
} else {
$('#dogCheckbox').addClass('hidden');
}
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="location" id="location_search">
<i class="dropdown icon"></i>
<div class="default text"></div>
<div class="menu">
<div class="item" data-value="1" data-dogs="0">A1</div>
<div class="item" data-value="2" data-dogs="0">A2</div>
<div class="item" data-value="3" data-dogs="0">A3</div>
<div class="item" data-value="4" data-dogs="0">A4</div>
<div class="item" data-value="5" data-dogs="0">A5</div>
<div class="item" data-value="6" data-dogs="0">A6</div>
<div class="item" data-value="7" data-dogs="0">A7</div>
<div class="item" data-value="8" data-dogs="0">A8</div>
<div class="item" data-value="9" data-dogs="1">A9</div>
<div class="item" data-value="10" data-dogs="1">A10</div>
<div class="item" data-value="11" data-dogs="1">A11</div>
<div class="item" data-value="12" data-dogs="0">A12</div>
<div class="item" data-value="13" data-dogs="1">A14</div>
<div class="item" data-value="14" data-dogs="1">A15</div>
<div class="item" data-value="15" data-dogs="1">A16</div>
</div>
</div>
<div class="ui checkbox hidden" id="dogCheckbox">
<input type="checkbox" tabindex="0" class="hidden" name="
form_dog">
<label>Dog friendly unit! Is a dog present?</label>
</div>

You can try this:
$(".item").keyup(function(event){
if(event.keyCode == 13){
$('.item').click();
}
});
13 is the Enter key code, so- when keyup event occurs, and the pressed key is Enter- do the click function.
Hope it helps

Open Modal in semantic-ui

I just cant figure out how to open this modal. I usually use Bootstrap, but wanted to try a new layout.
Here is the button that I use to open the Modal:
<div class="ui pointing menu">
<a class="item" id="#register">Register</a>
#include('auth.modals')
</div>
Here is my Modal:
<div id="register-modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="">
</div>
<div class="description">
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
And Here is my JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$(document).ready(function(){
$('#register').click(function(){
$('#register-modal').modal('show');
});
});
</script>

The whole problem is that the element to which you try to attach the click event does not exist. You have specified id="#register", instead of id="register"
correcting the attribute will do the job:
<div class="ui pointing menu">
<a class="item" id="register">Register</a>
#include('auth.modals')
</div>
The id of the modal itself seems to be correct, though :)
Such things are very easy to debug, simply type $('#register') in the console, and you'll see that jquery cannot find any matching element.

Figured it out!
I guess the button that you open the modal with has to be a class?
<a class="item register">Register</a>
Then pass in JavaScript like this:
<script>
$(document).ready(function(){
$('.register').click(function(){
$('#register-modal').modal('show');
});
});
</script>

Dropdown control in semantic ui

I need some help using the dropdown control in semantic.
Te multiple selection is not working as expected.
Here is the code:
<div class="ui fluid multiple search selection dropdown">
<input name="tag" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
<div class="menu">
<div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
</div>
</div>
and the script code
$('.tag .ui.dropdown').dropdown({allowAdditions: true});
A single select is the one thats works.
Thanks in advance :)

You should be using semantic-ui 2. Which version are you using?
See new UI elements here:
https://github.com/Semantic-Org/Semantic-UI/blob/master/RELEASE-NOTES.md#version-200---june-30-2015
Here you have your exact code running on plunker with version 2.0.8:
http://plnkr.co/edit/TPaqyX8f46H2K4eu59yp?p=preview
//Same code as in the question
<div class="ui fluid multiple search selection dropdown">
<input name="tags" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
<div class="menu">
<div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
</div>
</div>

How to create foundation popover nested with html content (template)

I wanted to load a html template inside foundation popover, but i could not found any good documentation or similar solution on internet. I just wanted to know weather this is possible to have a html template along with its controller inside popover or not.
i saw we just load content in popover using properties like below:
<button popover="{{dynamicPopover}}"
popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>
or
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>
i can somehow inject the html using scope but difficult to have controller for that.
I want to load a popover for my website (which is getting build using angularJS) when user mouse over on video thumbnail i want to load the preview image of the video and on mouse over on popover i want to have some buttons which perform some action when click on them.

Try This http://codepen.io/Blu-Jay/pen/wMRBLx
$(document).foundation();
.callout{
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
<div class="large-8 large-centered columns">
<div class="callout">
<h3>Password Verification</h3>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Username</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Password</label>
</div>
<div class="small-9 columns">
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
<strong>Password Must meet to following criteria:</strong>
<ul class="no-bullet">
<li style="color:red;">Must be between 4 and 8 characters</li>
<li style="color:red;">Must contain capital letters</li>
</ul>
</div>