Angular Meteor (blaze #if and ui-view) - angular-meteor

{{#if currentUser}}
<div ng-app="appy">
Home
Page
<div ui-view></div>
</div>
{{else}}
Here will be logIn page
{{/if}}
Goal is to render menu and content only to logged users, if not logged render login page. problem is {{#if currentUser}} makes my ui-view element to not render templates it shuld.
How to repair it ?


Try this:
<div ng-app="appy">
<div ng-show="$root.currentUser">
Home
Page
<div ui-view></div>
</div>
<div ng-hide="$root.currentUser">
Here will be logIn page
</div>
</div>

Related

How can I display vue.js data in blade

I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>

I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.

you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component

How to add components inside panel header and footer in react-bootstrap?

In classic bootstrap, this construction is easy:
<div class="panel panel-danger">
<div class="panel-heading">
Some HTML including a drop-down.
</div>
<div class="panel-body">
Panel body, lots of HTML here
</div>
<div class="panel-footer">
<button class="btn btn-default">Click me</button>
</div>
</div>
In the react-bootstrap implementation, there seems to be no way of including further html in the panel header or footer?

Try this
<Panel
header="Some HTML including a drop-down."
footer={<Button> Click me</Button>}
bsStyle="danger"
>
Panel body, lots of HTML here
</Panel>
You can use other props from bootstrap-react document

As per the react-bootstrap panel documentation:
<Panel>
<Panel.Heading>Panel heading</Panel.Heading>
<Panel.Body>Panel content</Panel.Body>
<Panel.Footer>Panel footer</Panel.Footer>
</Panel>

How can i jump one cshtml page to another cshtml?

I have two .cshmtl pages used for registration. When user completes first registration page I want the controller to jump to another cshtml page without going to controller. How can I complete this task?
<div class="control-group form-actions pull-right">
<a href="~/Views/Registration/RegStep2" class="btn btn-primary">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
When user click above continue button he will jump on another controller without controller...

Please see the below method using Partial views.
<div class="control-group form-actions pull-right">
<div id="first-div">
#Html.Partial("PartialView1")
</div>
<div id="second-div" style="display:none;">
#Html.Partial("PartialView2")
</div>
<a href="#" class="btn btn-primary" onclick="onclickContinue">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
<script type="text/javascript">
function onclickContinue(e) {
$("#first-div").hide();
$("#second-div").show();
}
</script>

Img src= of a DIV in a fixed block loads on the homepage but do not loads on another pages

I have a fixed header.TPL file that is loaded on every page.
There's a DIV in this .TPL file with IMG SRC=xxx.png replacing the TEXT. (a twitter and facebook icon linking to the twitter page)
Ok, on the homepage it works well. The DIV is showing on the header with the image linking to the twitter page.
But when I go to another page, the DIV with the image disappear. All other DIVs are in the same way as before, only the DIV with the image has gone.
And if I change the image for a TEXT, it works fine. If I put an image again, the DIV only load on the homepage.
What's happening?
<div class="fullWidthBlock headerMenuBlock">
<div class="fixedWidthBlock">
<div class="headerMenuWrapper">
{module name="menu" function="top_menu"}
</div>
{extension_point name='modules\main\apps\FrontEnd\IWidgetDisplayer' HTTP_REFERER=$GLOBALS.site_url|cat:$GLOBALS.current_page_uri}
<div class="socialMenuWrapper">
<ul class="socialMenu">
<li><a class="twitterMenu" href="http://www.twitter.com/"><img src="modules/theme_iauto_grey/main/_files/icons/twitterblue.png" /></a>
<li><a class="facebookMenu" href="http://www.facebook.com/"><img src="modules/theme_iauto_grey/main/_files/icons/facebookblue.png" /></a>
</ul>
</div>
<div class="loginMenuWrapper">
{if !$GLOBALS.current_user.logged_in}
<ul class="loginMenu">
<li><a class="loginDialogControl" href='#'>[[Login]]</a></li>
<li><span>|</span></li>
<li><a href='{$GLOBALS.site_url}/user/registration/'>[[Register]]</a></li>
<li><span>|</span></li>
</ul>
<div class="loginDialogWrapper" style="display: none;">
{module name="users" function="login" HTTP_REFERER=$GLOBALS.site_url|cat:$GLOBALS.current_page_uri}
</div>
{else}
<div class="userGreeting">
<span class="welcomeMessage">
[[Welcome]], {$GLOBALS.current_user.user_name}
</span>
<span class="myAccount">
[[My Menu]]
</span>
<div class="myAccountDialogWrapper" style="display: none;">
{module name="menu" function="user_menu"}
</div>
</div>
{/if}
</div>
</div>
</div>

Solved.
When the image is inserted by CSS the DIV display the image not only in the homepage, but in every page.

How to create a dialog within page with jquery mobile?

Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>

You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.

Resources