I have a div with property information in india, if a user clicks on a button,
the page should be redirect on another page and my whole div should be copy
and open on another page
<div class="box2">
<div style="">
<img src="2.jpg" style="border: 2px solid #EEEEEE; height: 180px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" />
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 select">
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:16px; font-weight:bold">{{i.A}}</span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:12px; font-weight:lighter">Available For <b>{{i.B}}</b> </span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Area <b>{{i.C}}</b> Security <b> Rs. {{i.F}}</b></span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Rental Unit In<b style="cursor:pointer"> {{i.D}}</b></span>
</div>
<br />
<div class="borderdiv">
<span ng-repeat="i in data" style="font-size:14px; font-weight:normal">
Features
<br />
<span class="glyphicon glyphicon-eject" style="margin-left:20px;"></span>
<span class="glyphicon glyphicon-chevron-left" style="margin-left:20px;"></span>
<span class="glyphicon glyphicon-chevron-right" style="margin-left:20px;"></span>
</span>
</div>
<br />
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.E}}</span>
</div>
</div>
</div>
this is my div
<button ng-click="click()">click to view data</button>
this is my button
what i need to do if i want to see the same data on other pages???
You need to create a server-side structural template which will generate the div. Example in PHP
function getViewData() {
?>
<button ng-click="click()">click to view data</button>
>?php
}
And you can add anywhere in your structure if you are using a PHP file like this:
<?php getViewData(); ?>
I will suggest you to go with a angular factory which contains the data that you are looking for and use the html template in the respective page.
Button code remains the same as
<button ng-click="click()">click to view data</button>
Create a new Angular Factory as below
angular.module('myApp').factory('appVariables',function(){
var data2=[];
return{
data2,data2
}
});
Your controller should contain the following click() method
angular.module('myApp').controller('appController',function($scope,appVariables){
$scope.click=function(){
appVariables.data2=$scope.data2;
}
})
Go to the another page inject appVariables as a dependecy to the controller and you can get the same data2 across your app.
This code is genric as the information provided by you is very less.
I have put together a sample for you. I can't create multiple html pages. So you have to put them in different files.
var app = angular.module('sample', []);]
//JS1
app.controller('page1Controller', ['$scope','$http','$rootScope', function($scope, $http){
$scope.page1 = {};
$scope.page1.title = "Page1";
$scope.click = function(page){
$rootScope.page = page;
}
}]);
//JS2
app.controller('page2Controller', ['$scope','$http','$rootScope', function($scope, $http){
$scope.init = function(){
alert("alrt")
$scope.page2 = $rootScope.page;
}
}]);
<div ng-app="sample">
<!--Page1-->
<div ng-controller="page1Controller">
<div>{{page1.title}}</div>
<button ng-click="click(page1)">click to view data</button>
</div>
<!--Page2-->
<div ng-app="sample">
<div ng-controller="page2Controller" ng-init="init()">
<div>{{page2.title}}</div>
</div>
Related
I am quite new with AngularJS so excuse me if I'm asking a stupid thing. I'm trying to create a task manager for events with AngularJS + Mysql + PHP.
The layout is separated in two columns. In the left column there's an overview of staff, loaded by function getUsers() in app.js. By clicking the + button after each staffname the user_id is being posted in a mysql database table. The results of this table is shown in the right column, function getEventUsers() in app.js. I'm trying to find out how to reload or update the right table after clicking the + button. The functions itself are working correctly (they get json_encoded results from the .php pages), but the right column is not updating itself only after pressing F5 after each click it is showing the correct result. So the right column, so function getEventUsers() in app.js, has to refresh/reload after clicking on the + button.
Template
ng-app="myApp" is in the html tag
ng-controller="usersController" is in the body tag
<div class="row">
<div class="container">
<blockquote><h1>Task Manager</h1></blockquote>
<div class="col-md-6">
<div class="widget-box" id="recent-box" ng-controller="usersController">
<div class="widget-header header-color-blue">
<div class="row">
<div class="col-sm-6">
<h4 class="bigger lighter">
<i class="glyphicon glyphicon-align-justify"></i>USERS
</h4>
</div>
<div class="col-sm-6">
<input type="text" ng-model="filterTask" class="form-control search header-elements-margin" placeholder="Filter Tasks">
</div>
</div></div>
<div class="widget-body ">
<div class="task">
<label class="checkbox" ng-repeat="user in users | filter : filterTask">
<input
type="checkbox"
value="{{user.active}}"
ng-checked="user.active==1"
ng-click="toggleStatus(user.id,user.active)"/>
<span ng-class="{strike:user.active==0}">{{user.firstname}} {{user.lastname}} [{{user.id}}]</span>
<a ng-click="addEventUser(user.id)" class="pull-right"><i class="glyphicon glyphicon-plus"></i></a>
</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="widget-box" id="recent-box" ng-controller="usersController">
<div class="widget-header header-color-blue">
<div class="row">
<div class="col-sm-6">
<h4 class="bigger lighter">
<i class="glyphicon glyphicon-align-justify"></i>EVENT MANAGER
</h4>
</div>
<div class="col-sm-6">
<input type="text" ng-model="filterTask" class="form-control search header-elements-margin" placeholder="Filter Tasks">
</div>
</div></div>
<div class="widget-body ">
<div class="task">
<label class="checkbox" ng-repeat="eventuser in eventusers | filter : filterTask">
<span ng-class="{strike:task.STATUS==2}">{{eventuser.firstname}} [{{eventuser.lastname}}]</span>
<a ng-click="deleteTask(eventuser.id)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
App.js
//Define an angular module for our app
var app = angular.module('myApp', []);
app.controller('usersController', function($scope, $http) {
getUsers(); // Load all available users
function getUsers(){
$http.post("ajax/getUsers.php").success(function(data){
$scope.users = data;
//alert(data);
});
};
getEventUsers(); // Load all available users for event
function getEventUsers(){
$http.post("ajax/getEventUsers.php").success(function(data){
$scope.eventusers = data;
//alert(data);
});
};
$scope.addEventUser = function (user_id) {
$http.post("ajax/addEventUser.php?userid="+user_id).success(function(data){
alert(getEventUsers());
});
};
$scope.toggleStatus = function(item, status) {
if(status=='1'){
active='0';
}else{
active='1';
}
$http.post("ajax/updateUsers.php?id="+item+"&active="+active).success(function(data){
getUsers();
});
};
});
I am building a web App using Angular 2 and want to loop the button with the list items but outside of list items, how can I get the functionality using *ngFor, please help.
My HTML code:
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right" >
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6"> <-----I WANT TO LOOP THIS BUTTON
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
Try this code snippet. I have created a div tag above linking both content and then added the loop inside that, so it will refer to both elements (item and button).
<div *ngFor="let buying of buy">
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right">
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6">
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
</div>
I have a drop down that is populated witht eh following code:
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" selectpicker ng-model="department" ng-controller="CaseListCtrl" ng-change="getCalendar();">
<option ng-repeat="department in departments track by $index">{{department.CourtRoom}}</option>
</select>
I then have this in my controller:
JBenchApp.controller('CaseListCtrl', ['$scope', '$http',
function ($scope, $http) {
// Case list stuff here
$scope.getCalendar = function () {
var e = document.getElementById("deptSelect");
var department = e.options[e.selectedIndex].text;
console.log(department);
$http.get('http://10.34.34.46/BenchViewServices/api/Calendar/LA/' + department + '/08-27-2015').success(function (response) {
$scope.cases = response;
});
}
$http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/LA').success(function (response) {
$scope.departments = response;
});
}]);
The $scope.cases updates with new data, but the partial doesn't change to match that. What can I do to make the partial view refresh?
EDIT TO ADD PARTIAL VIEW CODE:
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
>>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker ng-model="department" ng-controller="CaseListCtrl" ng-change="getCalendar();">
<option ng-repeat="department in departments track by $index">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div ng-controller="CaseListCtrl">
<div class="col-sm-8 col-sm-offset-2 caselist" ng-repeat-start="case in cases track by $index">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case_Number}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
{{case.Case_Title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.Sched_Time}} {{case.AmPm}}</div>
<div class="hearing-title">{{case.Event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
Try tracking the cases by their id or remove track by from the ng-repeat.
ng-repeat not update model with track by
UPDATE:
I think the issue is that your are using ng-controller twice within your html causing a second scope to be created. Wrap your html in a container div and apply the ng-controller attribute to that only.
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/
I have the following HTML/JSP structure:
<div class="col-md-12 task task-box">
<c:if test="${not empty task.titulo}">
<div class="row">
<div class="col-md-12">
<h3 class="task-title">${task.titulo}</h3></div>
</div>
</c:if>
<div class="row">
<div class="col-md-12">
<pre class="task-descricao"><c:out value="${task.descricao}"/></pre>
</div>
</div>
<div class="row">
<div class="col-md-3">
<small class="task-data-criacao">
<i class="fa fa-calendar-o"></i> ${task.dataCriacao}</small>
</div>
<c:if test="${not empty task.dataExecucao}">
<div class="col-md-3">
<small class="task-execucao"><i
class="fa fa-calendar"></i> ${task.dataExecucao}</small>
</div>
</c:if>
<c:if test="${not empty task.arquivo}">
<div class="col-md-3">
<a href="${task.arquivo}" class="btn btn-link btn-sm">
<i class="fa fa-download"></i>
</a>
</div>
</c:if>
<div class="col-md-3"><i class="fa fa-dropbox"></i></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<small class="task-tag"><i class="fa fa-tags"></i> ${task.tags}</small>
</div>
</div>
</div>
</div>
</div>
I will have multiple structures like this one since I'm using <c:forEach>. The wrapper class task.
How can I get the information such as, h3.task-title, pre.task-descricao and others when I click on a div.task with JQuery/JavaScript?
PS: I'm using <c:forEach> to multiply this structure with different inner values.
You can use the this keyword inside your event handler to access the element which triggered the event. Once you have this element, you can use the find function to find the relevant elements inside the target element.
$('div.task').click(function () {
var $title = $(this).find('h3.task-title');
var $descricao = $(this).find('pre.task-descricao');
//...
alert($title.text() + '\n' + $descricao.text());
});
Here is a live example.
using JQuery:
$( "#taskdiv" ).click(function() {
var title = $(".task-title").html();
var descricao = $(".task-descricao").html();
});
Info about jquery click:
http://api.jquery.com/click/
Infor about jquery selectors:
http://www.w3schools.com/Jquery/jquery_ref_selectors.asp