I'm using framework ionic 2 and I need send parameters from my tabs to other page , that page is not on my tab...
I know the method " this.navCtrl.push(view,{parameters}) " but I only need send the parameters , don't want open other page , Only parameters. please help me.
In my code I need send parameter "rut".
tabs.html:
<ion-menu [content]="content" >
<ion-header>
<ion-toolbar>
<img class="avatar" src="assets/img/i2.png">
<div class="name-user">{{nombre}} {{apellido}}</div>
<div class="rut-user">{{rut}}</div>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list>
<div class="items-menu">
<div class="item-menu" (click)="scan()">
<ion-icon name="md-qr-scanner"></ion-icon>
<div class="title">Escanear Producto</div>
</div>
<div class="item-menu" (click)="modificarPerfil()">
<ion-icon name="md-person"></ion-icon>
<div class="title">Perfil</div>
</div>
<div class="item-menu">
<ion-icon name="md-settings"></ion-icon>
<div class="title">Opciones</div>
</div>
<div class="item-menu">
<ion-icon name="md-information-circle"></ion-icon>
<div class="title">Acerca De</div>
</div>
<div class="item-menu" (click)="cerrarsesion()" >
<ion-icon name="md-log-out"></ion-icon>
<div class="title">Cerrar Sesion</div>
</div>
</div>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="true" ></ion-nav>
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Carro" tabBadge="{{num}}" tabIcon="cart" tabBadgeStyle="danger" ></ion-tab>
<ion-tab tabTitle="Perfil" tabIcon="md-person" (ionSelect)="modificarPerfil()"></ion-tab>
</ion-tabs>
I am assuming you have 3 pages: tabsAll, tab1Root, tab2Root where tabsAll is the overall and whose code is shown.
You need to send parameters from the tabs to other page. I am assuming the other page is the other tabs? You can make use of rootParams to pass parameters from tabs to other tabs.
tabsAll html
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" [rootParams]="{rutValue: rut}"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="{rutValue: rut}" ></ion-tab>
</ion-tabs>
tab1Root js
constructor(..., private navParams : NavParams){
var rut = navParams.get("rutValue");
}
More documentation about rootParams here: https://ionicframework.com/docs/api/components/tabs/Tab/
Let me know if this is what you wanted.
If you do not wish to go to the page you send your data to a shared service by creating a provider and get the data wherever you want
Create a provider using the cli command,
ionic g provider providerName
Store your value in your provider.ts like this,
import { Injectable } from '#angular/core';
#Injectable()
export class Provider {
public addedItems:any;
constructor() {
}
addedItems(data) {
return this.addedItems=data;
}
}
and import this provider in your component.ts to retrieve the added value. This way you can send data to other pages without opening any pages. Hope that helps
Related
I created a list of users in clickable cards, and when we click on the card, a modal popup appear.
I want now to display the detail of the user in theses popup but I don't really know how I have to do for displaying on the popup, the data of the user on which I click.
there is my List code :
<div class="container employees">
<div class="row">
<f:for each="{users}" as="user">
<div class="card card-annuaire">
<div class="card-body">
<h5 class="card-title">{user.firstname} {user.lastname}</h5>
<div class="links">
<ul>
<li class="loc">{user.address}</li>
<li class="tel">{user.telephone}</li>
<li class="service">{user.title}</li>
<li class="loc">{user.address}</li>
</ul>
</div>
</div>
</div>
</f:for>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<ul>
<li class="mail"></li>
<li class="tel"></li>
<li class="service"></li>
<li class="loc"></li>
<li class="comp"></li>
</ul>
</div>
</div>
controller :
public function listAction()
{
$users = $this->frontendUser->findAll();
$this->view->assign('users', $users);
}
Is my request possible with my current code?
My modal works perfectly, I just need to add my data
Someone have an Idea to how can I do it ?
Update : solved with some Jquery code to copy my data already existing :
<script>
const modal = $('#exampleModal');
$('.card-annuaire').click(function () {
const divAnnuaire = $(this);
$('.modal-title', modal).text($('.card-title', divAnnuaire).text());
$('li.tel', modal).text($('.tel', divAnnuaire).text());
$('li.service', modal).text($('.service', divAnnuaire).text());
$('li.loc', modal).text($('.loc', divAnnuaire).text());
})
</script>
The handling of the modal is a question of javascript.
If you have all data in each block of the user list you can add some javascript to each block which copies this data from the current block (this) into your modal and then unhide the modal.
On hiding the modal you don't need to do anything to the included data, as the next click (which also can occur if the modal already is visible) will fill in the data from the clicked data block.
If in your modal more data should be visible than you stored in your list you need to do something more:
you need the ID of the data to get the whole user-record by ajax call.
but otherwise the handling is the same: on each list block you have an eventhandler, which is triggered by a click and which uses data from the block (all fields, or just the uid for an ajax-call to get all data) and insert this data into the modal.
I have a two projects using laravel framework. I have a form for project 1 that I want to embed on my project 2.
Here is my FormController in project 1
public function show(Form $form)
{
return view('formbuilder.render', compact('form'))->render();
}
View on project 2 where I want to embed the form on project 1
#extends('layouts.app')
#section('content')
div class="card rounded-0">
<div class="card-body">
<script type="text/javascript" src="https://route/for/first-project-form"></script>
</div>
</div>
#endsection
I want to imitate how jot form works. https://www.jotform.com/help/34-Embedding-a-Form-to-a-Web-Page.
How do I achieve this?
Using an iframe it's just this simple:
#extends('layouts.app')
#section('content')
div class="card rounded-0">
<div class="card-body">
<iframe src="https://route/for/first-project-form"></iframe>
</div>
</div>
#endsection
If you really want to use a javascript file to load the iframe (can't see any reason why, but let's do it):
Create a javascript file:
const container = document.getElementById('form-container')
const iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://route/for/first-project-form");
iframe.style.width = "640px";
iframe.style.height = "480px";
container.appendChild(iframe);
In project 2:
#section('content')
<div class="card rounded-0">
<div class="card-body">
<div id="form-container"></div>
</div>
</div>
<script src="http//link/to/javascript/file"></script>
#endsection
I am newer to Angular and seem to be having difficulty finding out why I'm getting blank fields. I'm using the 1.7.7 version of angular-min and angular-route.
The data is being pulled from a table called "news" and I am only needing the ID and ARTICLE columns. The ARTICLE column is stored from a CKEditor textarea.
My route looks like:
var app = angular.module("HabbfinityApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl : "home.php"
}).when("/home", {
redirectTo : "/"
}).when("/news", {
templateUrl : "news.php"
}).when("/newsinfo/:id", {
templateUrl : "newsinfo.php",
controller: "newsList"
}).otherwise({
redirectTo : "/"
});
}]);
app.controller("newsList", function($scope, $http, $routeParams){
var id = $routeParams.id;
$http.get("newsitem.php?id=" + id)
.then(function(resp){
$scope.item = resp;
});
});
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
My newsitem.php looks like:
<?php
require('config2.php');
$id = $_GET["id"];
$newsQuery = $dbh->prepare("SELECT id, article FROM news WHERE id=:id LIMIT 1");
$newsQuery->execute(array(":id"=>$id));
$newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
echo json_encode($newsQueryData);
?>
My newsinfo.php looks like:
<div class="row">
<div class="col-md-12">
<div class="panel-default panel-custom">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-lg fa-newspaper-o" aria-hidden="true"></i> News</h3>
</div>
<div class="panel-body">
<div ng-controller="newsList">
<div ng-repeat="x in item">
<img src="assets/images/news.png" alt="News" class="img-center img-responsive">
<br>
Tweet
<br>
<br>
<p ng-bind-html="x.article | unsafe"></p>
</div>
</div>
</div>
</div>
</div>
</div>
ISSUE
After the first image, twitter button and actual article, everything gets repeated another five times, so I end up with six images and six tweet buttons where the ID of the repeated five is blank.
Here's a var_dump using htmlentities so you can see exactly what those columns are pulling in.
string(899) "{"id":"610","article":"<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">All of us at habbfinity would like wish our<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">Builder<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"color:#2980b9\"><span style=\"font-size:48px\">Sarah<\/span><\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><img alt=\"Image result for happy birthday gif\" src=\"http:\/\/bestanimations.com\/Holidays\/Birthday\/flowers\/happy-birthday-vintage-roses-gold-gif.gif\" \/><\/p>\r\n"}"
I've tried doing:
<div ng-repeat="x in item | limitTo: 1">
That doesn't work.
TEMP FIX
After reading through some of the posts on here, I managed a temporary fix.
I added the following to the newsList controller:
$scope.id = $routeParams.id;
I then changed newsinfo.php by moving the image and twitter button outside of ng-repeat and changed {{x.id}} in the twitter link to {{id}}.
QUESTION
How can I fix this to allow everything to be within the ng-repeat without having to use the temporary fix?
Or is what was done for the temporary fix the better way of doing it anyway?
EDITED ANSWER / QUESTION
Thanks to the suggestion below, I was able to get this resolved.
However, I have one more question.
Is there a way to do this on one page? For example, news.php is just a list of news posts and newsinfo.php is the single news post. Am I able to do something to get it all on news.php and keep the route to only /news, which would show the list if the route isn't news/# or show the specific item if the route is news/#?
I am a beginner of Laravel. I reading the discussions on implementing global variables. But in my case, I want to set the value of the global variable from the view that can be used in the controller.
My sample code in button from adminHome.blade.php
<!--CAMPUS BUTTON-->
#foreach($campuses as $campus)
<div class="col-md-4">
<div class="card card-user box">
<div class="image" style="background-color:#00D27F;"></div>
<div class="content bg">
<div class="author">
<br><br><br><br><br><br>
<img class="" src="{{ asset('images/icon-school.png') }}" alt="..."/><br><br><br>
<h4 class="title"><b>{{$campus->campus_name}} Campus</b></h4>
{{--SOMEWHERE HERE I'LL SET THE VALUE OF THE GLOBAL VARIABLE. THE VALUE I SHOULD SET IS {{$campus->id}}--}}
<h5>{{$campus->name}} Campus</h5>
<hr>
<h5 class="title text-center">
</h5>
<a href="{{ route('dashboard') }}">
<p>VIEW</p>
</a>
</div>
</div>
</div>
</div>
#endforeach
As my code shown above, when I click that button, it would also set the value of the global variable so that in order to proceed on the next page, all the data related on that campus will only be shown. How can I do this? Thanks
May I got your Point#
there have no way to access variable from view to controller.
you can put variable in session. so that you can use from anywhere.
session(['your_key' => 'your_value']);
I think what you're looking for is when the user presses VIEW it opens the campus details yes?
In that case you can do:
{{ route('dashboard',['campus_id' => $campus->id]) }}
You are using a named route dashboard and you can pass in vars to that route with the above code.
Source: Laravel Named Routes Docs
You could either create and submit a form that will store the value in the back-end, in a database for example and later send the variable to the next view return view( 'next_page', ['variable' => $campus_id] );.
Or, you could just get the value from the form with some JS or jQuery magic and use GET variables to send it to the next page. http://example.com/next-page?variable=campus_id and echo it with {{ $_GET['variable'] }}
I am using codeigniter to make a web application, When the user registers with invalid credentials I am trying to reload my registration tab which is located on my authentication view, when the authentication view reloads my log in tab is displayed first because by default this is set to the active tab.
authentication view
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="authentication_tab">
<li class="tabs-title is-active">Login</li>
<li class="tabs-title">Sign Up</li>
</ul>
<div class="tabs-content" data-tabs-content="authentication_tab">
<div class="tabs-panel is-active" id="panel1">
<?php $this->load->view('authentication/login');?>
</div>
<div class="tabs-panel" id="panel2">
<?php $this->load->view('authentication/reg');?>
</div>
</div>
</div>
</div>
<?php $this->load->view('templates/footer');?>
loading my authentication view after validation has taken place
public function reg()
{
$data['title'] = 'Home Page';
$this->load->view('templates/header',$data);
$this->load->view('authentication/authentication#panel2');
}
In whatever controller you are using just decide (depending on the actions taken) which tab you want opened. Let us say the tab you want is 'thisOne', then pass a variable to your view, something like $open_tab='thisOne'.
In your view, before each tab, simply check the variable to see if it equals the current tab, and then set a class.
Use this:
<?php echo ('name_of_tab' == $open_tab) ? 'is_active' : ''; ?>
In your tab LI
<li class="tabs-title <?php echo ('name_of_tab' == $open_tab) ? 'is_active' : ''; ?>">Blah Blah</li>
In your controller you can set the default tab first, then overide that depending on users posts or actions etc.
Hope that helps,
Paul.