Ok, this seems to be a easy question but I'm not able to get it.
I have index.php and find.php in my project.
In index.php, I'm showing results of list-group items as follows
<div id="showDetails">
</div>
<div id="showList">
//All my list-group items are listed here
</div>
My Ajax returning the list-group as follows
function funcReadRecord() {
var readrecord1 = "readrecord1";
var sometext = $('#SNOW_INC').val();
$.ajax({
url : "find.php",
type : 'post' ,
data : { readrecord1 : readrecord1,
sometext : sometext } ,
success : function(data, status){
$('#showList').html(data);
}
});
}
Now, I'm returning the values as a HTML link so it looks like this
<div id="showList">
data 1
data 2
data 3
</div>
What I want is when I click data 1 link, I want to show showDetails div with data 1 populated. Then when I click data 2 link, it changes to data 2 in showDetails.
How do I do that?
Probably the information I've provided is not enough but feel free to ask and I'll provide more.
The simplest solution would be to add a click handler to each item that calls a function, passing in the id of the item you want to display.
Within that function, fetch the data for the given item and show it.
function showData(which) {
console.log(`fetch data ${which} here and show it in the data div.`);
document.getElementById('showData').innerHTML = `show data ${which}`
return false; // prevents navigation on the clicked link
}
<div id="showList">
<a onclick="showData(1)" href="#">data 1</a>
<a onclick="showData(2)" href="#">data 2</a>
<a onclick="showData(3)" href="#">data 3</a>
</div>
<div id="showData"></div>
Related
Click on button I got two folderid, now I want to send only first folderid in service how it is possible ?
See below screenshot click on folder-1(folderid is 1230) it opens and shows four folders inside folder-1 using folderid. Now I click on folder-1-1(folderid is 1231), but it takes two folderids 1231 and 1230 both see in console any possibility to get only one folderid or else any other possibility to send only first folderid to server side ?
HTML
<div *ngFor="let folder of folderObjs" (click)="getFolderName(folder.folderid)">{{folder.folderName}}
<div *ngFor="let pattern of patternObj" (click)="getFolderName(pattern.folderid)">
{{pattern.folderName}}
</div>
</div>
TS
getFolderName(folderid){
console.log(folderid); // 1231
1230
this.userService.getFolderName({'folderid': folderid}).subscribe(
(data) => {
console.log(data.payload);
}
)
}
The problem is that the inner click bubbles out to the parent - this should fix the problem:
<div *ngFor="let folder of folderObjs" (click)="getFolderName($event, folder.folderid)">{{folder.folderName}}
<div *ngFor="let pattern of patternObj" (click)="getFolderName($event, pattern.folderid)">
{{pattern.folderName}}
</div>
</div>
and
getFolderName(e, folderid){
e.cancelBubble = true;
this.userService.getFolderName({'folderid': folderid}).subscribe(
(data) => {
console.log(data.payload);
}
)
}
Not sure if I'm following what's wrong but...
I think when you click on folder-1-1, it also clicks on folder-1 since that's it's parent.
Try this:
<div *ngFor="let folder of folderObjs">
<span (click)="getFolderName(folder.folderid)">{{folder.folderName}}</span>
<div *ngFor="let pattern of patternObj" (click)="getFolderName(pattern.folderid)">
{{pattern.folderName}}
</div>
</div>
The view in my html is not getting filtered on selecting any li element.
But when I console the filter functions the output generated is correct.Also how to clear the filter so it is reusable again.I'm getting a blank page on clicking open or close select elements.Can anyone help me with this.
I have used two filters in a controller inside the functions like this-
indexController Functions-
this.UserTickets = ()=> {
//code to get the tickets
}
this.openTickets = () => {
index.filteredTickets = $filter('filter')(index.tickets, { status: "open" } );
console.log(index.filteredTickets);
};
//filter closed tickets
this.closeTickets = () => {
index.filteredTickets = $filter('filter')(index.tickets, { status: "close" } );
console.log(index.filteredTickets);
};
this.clearFilter = () => {
//clear the filter
};
HTML-
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="indexCtrl.clearfilter()">None</a></li>
<li><a ng-click="indexCtrl.openTickets()">Open</a></li>
<li><a ng-click="indexCtrl.closeTickets()">Close</a></li>
</ul>
<div ng-repeat="ticket in indexCtrl.tickets | filter:tickets |filter:indexCtrl.filteredTickets">
<div class="ticket-no">
<h4>Ticket No:<span>{{ticket}}</span></h4>
</div>
<div class="ticket-title">
<a ng-href="/ticketView/{{ticket.ticketid}}"><h3>{{ticket.title}}</h3></a>
</div>
<div class="ticket-info">
<p class="pull-left">{{ticket.username}} On {{ticket.created | date:"MMM d, y h:mm a"}}</p>
<p class="pull-right">Status:<span>{{ticket.status}}</span></p>
</div>
<hr class="hr">
</div>
You are mixing both angular filter options. I would recommend the javascript filters, index.filteredTickets=$filter('filter')(index.tickets,{status:"open"}); rather than the html template syntax, ng-repeat="ticket in indexCtrl.tickets | filter:tickets...". The key difference between these methods is how often they are run. The html template syntax filters are run on every digest cycle, the javascript filters are only run when the method is called, in your case, on each button click. For small apps or when the lists are small, this difference won't be noticeable, but if your app grows in size, the constant filtering on each digest cycle can cause page lag.
The filters in the controller are my preferred way of handling this, so I will show you how to clean up your code for these to work. You are almost there, just a few small changes are needed.
In your html, you can remove the inline filters in the ng-repeat, these aren't needed, and change the array to be your filter list, index.filteredTickets.
.html
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="indexCtrl.clearfilter()">None</a></li>
<li><a ng-click="indexCtrl.openTickets()">Open</a></li>
<li><a ng-click="indexCtrl.closeTickets()">Close</a></li>
</ul>
<div ng-repeat="ticket in indexCtrl.filteredTickets">
<div class="ticket-no">
<h4>Ticket No:<span>{{ticket}}</span></h4>
</div>
<div class="ticket-title">
<a ng-href="/ticketView/{{ticket.ticketid}}"><h3>{{ticket.title}}</h3></a>
</div>
<div class="ticket-info">
<p class="pull-left">{{ticket.username}} On {{ticket.created | date:"MMM d, y h:mm a"}}</p>
<p class="pull-right">Status:<span>{{ticket.status}}</span></p>
</div>
<hr class="hr">
</div>
For the javascript, you need to make sure the filteredTickets are accessible in the html. I'm not sure if index == this, if not, you may need to attach the filtered tickets to the scope. The one other change needed is to set the filteredTickets to your original list if the none button is pressed. You will also want to call clearFilter after you load the list, otherwise index.filteredList will be undefined/null.
.js
this.UserTickets = () => {
//code to get the tickets
....
//after getting list, call clear filter
this.clearFilter();
}
this.openTickets = () => {
index.filteredTickets = $filter('filter')(index.tickets, { status: "open" } );
console.log(index.filteredTickets);
};
//filter closed tickets
this.closeTickets = () => {
index.filteredTickets = $filter('filter')(index.tickets, { status: "close" } );
console.log(index.filteredTickets);
};
this.clearFilter = () => {
//clear the filter
index.filteredTickets = index.tickets;
};
So what I'm doing is pulling battery voltage and the state of a battery from a Mysql database processing the data in data.php and putting that into a Json array all that is fine. When I get to the Javascript side I get stuck.
2 Questions:
Question 1: How do insert the value into id voltage in html without removing the span?
HTML Code:
<div id="voltState" class="tile-box bg-green">
<div class="tile-header">
Battery Status
<div class="float-right">
<i class="glyph-icon icon-bolt"></i>
Green
</div>
</div>
<div class="tile-content-wrapper">
<i class="glyph-icon icon-database"></i>
<div id="voltage" class="tile-content">
<span>volts</span>
</div>
</div>
</div>
Questions 2: class="tile-box bg-green"> I want to replace with the var status from the Javascript so it looks something like class="tile-box bg-(status var here)">
$(document).ready(function() {
sensorData();
});
function sensorData(){
$.ajax({
type:'GET',
url:"data.php",
data:"json",
success:function(sensor) {
//document.write(sensor);
var volt = sensor[0];
var status = sensor[1];
var date = sensor[2];
document.getElementById('voltage').innerHTML = (volt);
$("#voltState").toggleClass('bg-green bg-(STATUS VAR HERE??)');
},
dataType:'json'
});
}
setInterval(sensorData, 3000);
You can use $("#voltage").append(volt) or $("#voltage").prepend(volt) based on if you want the span before or after the value. In this case I assume you want the span after the volt so you can use the second code. If you would like the value inside a new span you can also use:
$("#voltage").prepend($("").text(volt));
You can store the previous status value in a variable lets say pastStatus. So once you have set
$("#voltState").removeClass('bg-'+pastStatus).addClass('bg-'+status);
pastStatus = status
Note: toggleClass is used when you want to switch between adding and removing the same class. It can't be used in this case since you want to add a class and remove another.
document.getElementById('voltage').appendChild(volt);
or
document.getElementById('voltage').innerHTML = '<span>'+volt+'</span>';
I would like to ask whether I can get the data from dynamic URL... Here is the case:
I have given an (a) html tag into my angularJS php file to give direction to certain page with the value inside it e.g. localhost:8080/someurl/blablabla/{{item.master}} so the output is based on what I have clicked... so it will be localhost:8080/someurl/blablabla/221
After that, I have a laravel 5.2 and given a route based on this dynamic url, e.g. Route::get('order/{id}','someController#index')
After this route, I have prepared the php files and it is ready to display the data
The problem is, I don't know which angularJS code that I should use to display the data based on the {{item.master}} in this new page, when I use $http.get, it doesn't get anything, is there any clue about this?
UPDATED
Here is the codes:
HTML (order.html)
<div class="itemcheck" ng-repeat="item in dataItem.stores | regex:'name':alfabet | orderBy: 'name' | filter: searchItem" ng-model="item">
<div class="left" ng-if="item.preparation == ''" ng-click="klikItem(item)"><i class="fa fa-circle silver"></i>{{item.name}}</div>
<div class="left" ng-if="item.preparation == '1'" ng-click="klikItem(item)"><i class="fa fa-circle green"></i>{{item.name}}</div>
<div class="left" ng-if="item.preparation == '2'" ng-click="klikItem(item)"><i class="fa fa-circle yellow"></i>{{item.name}}</div>
<div class="left" ng-if="item.preparation == '3'" ng-click="klikItem(item)"><i class="fa fa-circle pink"></i>{{item.name}}</div> <div class="right" ng-click="tambahItem(item)"><a>+ Tambahkan</a></div></div>
Let's not focus on "tambahkan" but the item.name when I put klikItem function
So, when I click, the klikItem() function is triggered (what I want) or let's say I put the tag a inside the {{item.name}} function and when I click that it goes to order/{{item.id}} (somehow like that)...
Nah, the problem is, how can I get the data from order/{{item.id}}? If I use $http.get, it must have the data, and when I put id for example
$scope.tampilkanDeskripsiItem = function(id){
var url = 'order/' + id;
$http.get(url).success(function(data){
$scope.deskripsiItem = data;
});
};
$scope.tampilkanDeskripsiItem();
this code will return error as "id" is not defined...
You can assign id inside klikItem (if item object has id property.)
function klikItem(item){
$scope.tampilkanDeskripsiItem(item.id);
}
I have some Jquery tabs with Names on them.
(Ie: |Apple|Orange|Pear| )
I would like to update these titles to say something like
|Apple(2)|Orange|Pear(4)|
or something else based on the data returned by a php page ( say, numbers.php )
So,
Jquery requests numbers.php
numbers.php returns
Apple:2
Pear:4
How can I have JS, then use that data to dynamically update the Jquery tab "titles" with the data returned?
Then, if I re run the function, it would ask for numbers.php again and once again, update the tab titles based on what php returns?
Also, the names could change.. So next time it runs, Apples may not exist, but Pear may read 5 ..
In this instance, apple should be renamed "Apple"
Any help would be most excellent.
( hope ive made this clear? )
[ UPDATE ]
I have tried the below answer, but no luck.
The LI appears like this in the console:
<li id="tab-tabtestuser" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="newtab-tabtestuser" aria-labelledby="ui-id-5" aria-selected="true">tabtestuser <span class="count"></span><span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
If you return the data from numbers.php in a meaningful format such as JSON, you can then process the data and update the tabs in Javascript much more easily. Here is a basic example of what you want to do, you will probably want to improve upon it.
numbers.php
{
apple: 5,
orange: 3,
pear: 2
}
Javascript:
$.getJSON( "numbers.php", function( data ) {
$.each( data, function( key, val ) {
$('#tab-' + key).find('span.count').text(val);
if (val == 0) {
$('#tab-' + key).hide();
};
});
});
HTML:
<div id="tabs">
<ul>
<li id="tab-apple">Apple <span class="count"></span></li>
<li id="tab-orange">Orange <span class="count"></span></li>
<li id="tab-pear">Pear <span class="count"></span></li>
</ul>
<div id="tabs-apple"></div>
<div id="tabs-orange"></div>
<div id="tabs-pear"></div>
</div>