I have an unordered list like so:
<ul class="foo">
<li id="asdf">
<span class="indexnumber"></span>
<span class="description">whatever</span>
</li>
<li id="asdfasdf">
<span class="indexnumber"></span>
<span class="description">whatever</span>
</li>
</ul>
I want to display the index number of the list item in the indexnumber span (i.e., the first item will display 1, the second will display 2, and so on). My users will have the ability to sort the list items (using jquery ui sortable). I would like to be able to show my users a number in the list item that indicates where the list item is (and the value can change as the user re-orders the list).
How can I simply display the index position in the array using jquery? Alternately, is there an easy way to do this with the sortable events (i.e., once the list is sorted, increment or decrement the indexnumbers in all other list items as appropriate)?
I guess you could add the DOM elements to an array using something like
var arr = jQuery.makeArray(document.getElementsByTagName("span"));
Then get their index using jQuery.inArray( value, array ) which returns an int.
Not very pretty though
I ended up doing the following:
$(function() {
$(".foo").sortable({
stop: function(event, ui) {
var itemID = $(ui.item).attr("id");
var items = $("li#" + itemID).parent(".foo").children();
var updateditems = new Array();
for (var i = 0; i <= items.length - 1; i++) {
var singleitemID = $(items[i]).attr("id");
var loc = i + 1;
$("#" + singleitemID).text(loc);
updateditems.push([singleitemID, loc]);
}
}
});
});
index_list = function() {
$(".foo li").each(function(i){
$(this).find(".indexNumber").html((i+1));
});
}
you can call this function on document ready and on the change attribute of the sortable object
Related
I am trying to develop a WebApp in which user enters his/her id and script will search that ID in the Google sheet and retrieve the respective data row from sheet which contains that ID. Now script is searching the ID in sheet and retrieve the specific row as an array. But I want to import that data in Table in WebApp. But couldn't find any reasonable solution. Following is the script:
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
function FetchData(val) { //'val' is entered by user in WebApp
var ss = SpreadsheetApp.getActiveSpreadsheet();
var formSS = ss.getSheetByName("Sheet1");
var lc=formSS.getLastColumn();
var lr=formSS.getLastRow();
for (var i=2;i<=lr;i++)
{
var UID = formSS.getRange(i, 1).getValue();
if (val==UID) //Searching Google Sheet ID's and User Entered ID
{
var res=formSS.getRange(i, 1, 1,lc).getValues()[0];
return res; //contains the data of specific row which we want to put in WebApp Table
}
}
}
This is HTML Code
<body>
<script>
document.getElementById("btn").addEventListener("click",SearchID);
function SearchID() //Searching ID in Google Sheet
{
var id=document.getElementById("userid").value;
google.script.run.FetchData(id);
document.getElementById("userid").value="";
}
</script>
</body>
</html>
Is there any way that we can put this data in the table of WebApp HTML page. Any Guidance would be much appreciated. This is sheet Link:
https://docs.google.com/spreadsheets/d/119wJ3sBY3coGpEo2CHDnW1hPv_WQbgRaQKUwv7HxyFY/edit?usp=sharing
As others mentioned, you need to construct a HTML table based on the results received from the server. getValues() returns Object[][], but in your case, the function returns when it finds the first result, so you have only one row.
After receiving that, your useData() function should create a TABLE element using HTML syntax, so you need to add tags like <TABLE>, <TR>, <TH> and <TD>. These tags can be added to a variable that is used to construct the table, appending tags and their contents as you iterate over the data received:
function useData(data) {
var output = document.getElementById('OutPut');
// Start building table
var html = '<table>';
// Add table header
html += `<tr>
<th>Unique ID</th>
<th>Student name</th>
<th>Course</th>
<th>Issued on</th>
<th>certificate link</th>
</tr>`;
// Add table row, assuming there's only one row based on what is being done by Apps Script
html += '<tr>';
for (var col = 0; col < data[0].length; col++) {
html += '<td>' + data[0][col] + '</td>';
}
html += '</tr>';
// Stop building table
html += '</table>';
// Add table to existing element
output.innerHTML = html;
}
Hi here the scenario i created a SITE1 where in the blog it has an examine search engine and it is working correctly. now I have to copy my whole page to duplicate it for my new demo SITE2 then I test my search engine and it picked the searched item on the page it self "AND IT ALSO PICKED THE ITEM ON THE SITE1!" :/ that's bad issue..
Any idea how to avoid to picked search item on the other site or content??
Here is my search code:
#{
string searchTerm = Request.QueryString["search"];
var searcher = ExamineManager.Instance.SearchProviderCollection["WebsiteSearcher"];
var searchCriteria = searcher.CreateSearchCriteria(Examine.SearchCriteria.BooleanOperation.And);
var query = searchCriteria.GroupedOr(new string[] { "nodeName", "addblogImage", "blogTitle", "datePublished", "blogCategory", "blogAuthor", "blogbodyText", "blogreadMore" }, searchTerm).Compile();
var searchResults = searcher.Search(query);
}
#{
try {
if (searchResults.Any()){
<div class="items-row cols-3 row-0 row-fluid clearfix clean-list background-white">
<div class="span4 post padding">
#foreach (var result in searchResults){
var node = Umbraco.Content(result.Fields["id"]);
<div class="item column-1" itemprop="blogPost" style="margin:0">
#if(node.HasValue("addblogImage")){
var blogImg = Umbraco.TypedMedia(node.GetPropertyValue<string>("addblogImage"));
<img src="#blogImg.Url" alt="" width="898" height="597">
}
Sounds like both sites use the same search index.
Make sure in ExamineIndex.config the indexers are using a different IndexPath
For more useful Examine documentation, check out: http://umbraco.com/follow-us/blog-archive/2011/9/16/examining-examine
I have a checkboxlist as the following:
<s:checkboxlist list="books" name="checked" theme="simple" cssStyle="vertical"
listKey="code" listValue="description" > </s:checkboxlist>
<s:submit value="submit" name="submit"/>
I have checkboxes such as academics, fiction, cooking recipes etc. i.e., there are multiple checkboxes from which I can select more than one option. Say for eg., I select fiction and academics, then all the books under fiction and academics should be displayed. If I choose only fiction, then books under the fiction category only has to be displayed. I would like to have a submit button, which when clicked lists all the books based on the selected categories.
When I tried working with onchange funtion inside checkboxlist (the second code as you can see below), it does not work for multiple selections i.e., as soon as I check a single checkbox(e.g.,fiction), the page refreshes automatically before I could check other checkboxes and displays only the books under that particular category(i.e.,fiction). So, the following does not allow me to check multiple checkboxes. Is there any other way I could achieve this?
<s:checkboxlist list="books" name="checked" theme="simple" cssStyle="vertical"
listKey="code" listValue="description" onchange="searchBook(this)" > </s:checkboxlist>
function searchBook(book){
var bookValue = book.value;
document.getElementById("book").value = bookValue;
document.forms[0].submit();
}
Thank you!
<s:checkboxlist list="books" name="checked" theme="simple" cssStyle="vertical"
listKey="code" listValue="description" onchange="searchBook(this)" > </s:checkboxlist>
you can use onchange or onclick
var lastVal = ""; // globale variable
function searchFunction(){
var checkboxes = document.getElementsByName('checked');
var vals = "";
for (var i=0, n=checkboxes.length;i<n;i++) {
if (checkboxes[i].checked)
{
vals += ","+checkboxes[i].value;
}
}
if (vals) vals = vals.substring(1);
if(vals != "" && lastVal != vals){
lastVal = vals;
document.getElementById("book").value = vals;
document.forms[0].submit();
}
}
I'm currently finishing a feature with list reordering and I'm stuck with a probably very simple thing, but I'm really sorry that I can't figure out how to solve it .... ( possibly my brain just ignores this logic :) )
The purpose is simple :
I have a list of items with a "position" data (different from $index).
I drag and drop items to change their order.
When the drag stops, all items in the list should have a new position, that'll be updated with a $resource object.
For example, after dragging I have this:
$index elem.position
0 2
1 1
2 3
should automatically change position 2->1, 1->2 and 3->3.
The problem :
With angularUI I can have the current item index but not the others in the list. So I can't change the whole list index after stopping the drag. And it's frustrating because on view, I can catch easily $index but not in controller.
Code :
in controller.js
$scope.updateSortable = {
stop: function(e, ui) {
for (var i=0; i<$scope.list.length; i++) {
var elem = $scope.list[i];
// here's don't know how to update elem.position
//elem.position = ui.item.index; // bad one, I know :)
//elem.$update();
}
},
placeholder: "xp-hightlight",
axis: 'y'
};
in html page :
<div ng-repeat="el in list">
<div>
<span class="position" ng-bind="el.position"></span>
</div>
</div>
The json items look like that :
{ id: 47, description: "my text in the list", position: 1}
Would this work for you, or do you have to have the position variable set?
<div ng-repeat="el in list">
<div>
<span class="position">{{$index + 1}}</span>
</div>
</div>
I added this to your controller 'testCtrl'. You can update the position element within the callback of this watch:
var _list;
$scope.$watch(function() {
return JSON.stringify($scope.items)
},function(_l) {
if(typeof _l !== 'undefined') {
_list = JSON.parse(_l);
console.log(_list)
}
});
I just solved the issue, and thanks to koolunix I managed the update of position directly inside the controller with this plunkr :
http://plnkr.co/edit/kDkNLSjoHbnaumk2uaOF?p=preview
The main fact was just to manage the position with the loop in list items.
elem.position=i+1;
I'm trying to understand why, sometimes, my sub-objects disappear.
In my List view, I have the standard
<% foreach (var item in Model)
and when I inspect the item and the model, I can see that item.Map has a couple of elements.
In fact, in my List view I can do:
<% foreach (var map in item.Map)
<% Html.RenderPartial("MapView", map); %>
and MapView can access and display all the properties. I'm including the sub-objects with:
list = from item in _entities.DataTable
.Include("LookupTable1")
.Include("Map")
.Include("Map.LookupTable2") select item;
return View("List", list);
But if I try to do:
<%= Html.Encode(item.Map.FirstOrDefault().Field)%>
I get a null pointer exception, and item.Map has 0 elements.
Can anyone explain why this is happening?
You could probably do without the .Include statements. I'm not sure if that solves your problem though, without knowing the cause of the null-pointer.
Just as a note: when doing MVC, you probably shouldn't be doing Linq queries in the view (like .FirstOrDefault).
list = from item in _entities.DataTable
select new
{
Name = item.Name
Maps = item.Maps
};
Using this syntax you can execute more Linq queries in the controller instead
list = from item in _entities.DataTable
select new
{
Name = item.Name
FirstMap = item.Maps.FirstOrDefault()
};
Or even
list = from item in _entities.DataTable
select new
{
Name = item.Name
Maps = from map in item.Maps
where map = somecondition
select map
};