Ok I saw many posts on how to serialize the value of dragged items to get hash and they tell how to save them. Now the question is how do I persist the dragged items the next time when user log's in using the has value that I got
eg:
<ul class="list">
<li id="id_1">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_2">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_3">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_4">
<div class="item ui-corner-all ui-widget">
</div>
</li>
</ul>
which on serialize will give
"id[]=1&id[]=2&id[]=3&id[]=4"
Now think that I saved it to Sql server database in a single field called SortOrder.
Now how do I get the items to these order again ?
the code to make these sort is below, without which people didn't know which library I had used to sort and serialize
<script type="text/javascript">
$(document).ready(function() {
$(".list li").css("cursor", "move");
$(".list").sortable();
});
</script>
There are a few options. One option is to do the sorting server-side. You would read out that string in .NET to generate the list, in order, on the fly. Then output it to the browser.
Another option would be output the serialized string as a string variable in javascript. You could then use jQuery to reorder the elements. The problem with this method is that there would probably be a flash where the unordered list would display and then the correctly ordered list would appear.
Related
I implemented the UIkit sortable component and added a stop event. But I can't figure out how to calculate the new order if an item has been dragged. So far the only thing I can think of is giving each item an id then calculating based upon that id, but it doesn't seem like the proper way to do so
There is a quite simple way of achieving this. The element stores originalEvent where you can find also explicitOriginalTarget - our moved element. As it is wrapped in li inside ul, I went up to its parentNode (li), so I am at the level of elements I need, then converted it to jQuery object (you don't have to, I did it just because it was quick), then you can get its index. All of these values can be accessed by console.log(e);
Only problem with this solution is performance, it works, but when you move elements too often, it can show 0 instead of correct index value
EDIT: I realized you're probably asking about the whole set of items and their order, not only the index of currently moved item, so I added also console logging for this as well
Example below:
var indexes = new Array();
$(document).on('moved', '.uk-sortable', function(e) {
var currentLi = e.originalEvent.explicitOriginalTarget.parentNode;
indexes = [];
$(this).find('li').each(function() {
indexes.push($(this).data("index"));
});
alert("New position: " + $(currentLi).index());
console.log(indexes);
});
$('.uk-sortable').find('li').each(function(i) {
$(this).data("index", i);
indexes.push(i);
});
console.log(indexes);
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>
<ul class="uk-grid-small uk-child-width-1-4 uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 1</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 2</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 3</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 4</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 5</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 6</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 7</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 8</div>
</li>
</ul>
I came across this searching for something else and happen to know the answer you're looking for. You don't need jQuery or anything else for this, just UIkit.
<ul id="sortable-element" uk-sortable>
<li class="uk-sortable-item" data-id="1">Content</li>
<li class="uk-sortable-item" data-id="2">Content</li>
<li class="uk-sortable-item" data-id="3">Content</li>
<li class="uk-sortable-item" data-id="4">Content</li>
<li class="uk-sortable-item" data-id="5">Content</li>
</ul>
let sortable = UIkit.sortable("#sortable-element");
UIkit.util.on(sortable.$el, "added moved", function(e, sortable) {
sortable.items.forEach(function(item, index) {
console.log({ item, index});
// Grab data attributes if you need to.
// UIkit.util.data(item, "id");
});
});
The second parameter of the callback references the sortable component and contains the array of item elements. Loop through this array and use the index (0 based) to get the new order of items. It's important to use the .uk-sortable-item or define a different class with the cls-item option for the sortable component to return the items.
You also don't need to define sortable like I have, you can just use the UIkit.util.on with CSS selectors, e.g. UIkit.util.on("#sortable-element", "added moved removed start stop", function(e, sortable) { console.log(e.type); });
UIkit.util is more or less undocumented, but it's extremely well built. Check the repo to see available functions. They are binded to UIkit.util in the dist/uikit.js file. https://github.com/uikit/uikit/tree/develop/src/js/util
The easiest way I have found is to get the list of all the elements and perform a mapping operation that returns an array of unique & identifiable attributes (e.g. the IDs of the sortable elements.
The moved event has a detail property that's an array containing the UIKitComponent and the target element; you can get the items from the UIKitComponent.
const new_order = event.detail[0].items.map(el => el.id);
//["id-1", "id-2", "id-3"];
You can then get the indices after the fact, at least the messy DOM side of things is sorted.
I have simple bootstrap(3) tabs inside a div (class="example").
I have the div saved in a Partial view.
I am using foreach loop in my Razor view, passing the object to the Partial view and outputting it for each iteration.
How can I simply navigate each div's own tabs without affecting other tabs inside the loop?
View:-
#foreach (var pbrModel in Model)
{
#Html.Partial("~/_TestViewPartial.cshtml", pbrModel)
}
Partial View:-
#model PbrViewModel
<div class="example">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
</div>
You can use a for loop to iterate over the items in your main view's Model, and then use the i iterator to make each tab's id unique by appending it in the partial view.
You can pass the i value as a "model" to the partial view when you iterate.
Like so:
#for (var i = 0; i < Model.Count; i++)
{
#Html.Partial("~/_TestViewPartial.cshtml", i)
}
Then in the partial view, you can use the "model" passed to it from your for loop - in this case as an int type, so it can print the value into the ids accordingly.
Like so:
#model int
<div class="example">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home#Model">...</div>
<div class="tab-pane" id="profile#Model">...</div>
<div class="tab-pane" id="messages#Model">...</div>
<div class="tab-pane" id="settings#Model">...</div>
</div>
</div>
Much like my previous (before this edit) answer, passing the i variable to each iteration ensures the ids are unique.
Unfortunately, with this way you will not be able to access any properties of the main view's Model, as you are only passing the int to the Partial view, and nothing else (I explain more below).
A couple of notes to think about:
Your path to the partial doesn't need to be "relatively absolute". In that, I mean you can just use "_TestViewPartial.cshtml" as the first argument (omitting the "~/")
If you do wish to access properties of your main view's pbrModels inside the partial, you will need to pass these to the partial (as per your OP, with PbrViewModel as the #model type) and I would suggest adding a unique indexer property to that type, if possible - so you can then print this in the id/href of the elements within your partial view, like in my example; just use #model.MyUniqueIDProperty or whatever friendly name you have for it
THINK - Do you really need a separate partial view for this? If you're reusing the code elsewhere, then yes. If it's solely for the purpose of the page, then no; I would defer to having the code in the main view's code - you would then still be able to access the main Model of the page, if you need to get properties from the PbrViewModels using the indexer you're at (Model[i])
Any questions, just ask.
Hope this helps! :)
Help me to click.
<div class="items">
<ul>
<li class="first">
<a onclick="launch("mary", "mario", "1"); return false;" href="/">Cash</a>
</li>
<li class="last">
<a onclick="launch("mary", "mario", "2"); return false;" href="/">Credit</a>
</li>
</ul>
</div>
And I wrote code as which is a syntax error and NOTE: i cant take by xpath position or with text contains, because position is not constant it shuffles and cant write as text contains "cash/credit" because in a page many games are present with same text.
d1.findElement(By.xpath("//a[#onclick='nucleus_launch_game("slots","brittonaire", "1"); return false;']"));
Try to use
d1.findElement(By.xpath("//a[contains(text(),'Cash')]")); -- To click on Cash URL
d1.findElement(By.xpath("//a[contains(text(),'Credit')]")); -- To click on Credit URL
Try below locaor:
d1.findElement(By.xpath("//li[#class='first']/a[text()='Cash']"));
d1.findElement(By.xpath("//li[#class='last']/a[text()='Credit']"));
If still doesn't work and it has duplicate elements with text, replace
/a[text()='Cash'] with
/a[text()='Cash' and #onClick='\"mary\",\"mario\",\"1\"']
It will work
Thank you for the help... I sorted it off integrating it with other tool
Ok i saw many post's on how to serialize the value of dragged items to get hash and they tell how to save them. Now the question is how do i persist the dragged items the next time when user log's in using the has value that i got
eg:
<ul class="list">
<li id="id_1">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_2">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_3">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_4">
<div class="item ui-corner-all ui-widget">
</div>
</li>
</ul>
which on serialize will give
"id[]=1&id[]=2&id[]=3&id[]=4"
Now think that i saved it to Sql server database in a single field called SortOrder.
Now how do i get the items to these order again ?
the code to make these sort is below,without which people didn't know which library i had used to sort and serialize
<script type="text/javascript">
$(document).ready(function() {
$(".list li").css("cursor", "move");
$(".list").sortable();
});
</script>
I believe what Brian is saying is that your table should look like this, if they were sorted in ascending order by the user:
ID Sort Order
1 1
2 2
3 3
4 4
If they were sorted in descending order by the user, the table would look like this:
ID Sort Order
1 4
2 3
3 2
4 1
Then, when you query the database, you would do
SELECT [ID], [Sort Order]
FROM [thetable]
ORDER BY [Sort Order]
and the list would be sorted by the server.
You can then just output the data in the order the server code provides it in.
Rather than storing a single field, can you store a SortOrder column with the data? You can update the DB with the new sort order, and when you query data from the DB, order it by the sort order. Otherwise, in code, you must do a programmatic sort ordering of data, querying the data into something, then looping through and copying the data to another array/list that's sorted based on this one field.
HTH.
I have ASP.Net code similar to the following (this is inside a FIELDSET):
<ol>
<li>
<label>Some label</label>
<one or more form controls, ASP.Net controls, labels, etc.>
</li>
<li>
<label>Another label</label>
<... more of the same...>
</li>
...
</ol>
I'm trying to keep my markup as clean as I possibly can, but I've decided that for various reasons, I need to wrap a DIV around everything in the list item after the first label, like this:
<ol>
<li>
<label>Some label</label>
<div class="GroupThese">
<one or more form controls, ASP.Net controls, labels, etc.>
</div>
</li>
<li>
<label>Another label</label>
<div class="GroupThese">
<... more of the same...>
</div>
</li>
...
</ol>
I would rather do this with "unobtrusive Javascript" via jQuery instead of littering my page with extra markup so I can keep the form semantically "clean".
I know how to write a jQuery selector to get to the first label in each list item $("li+label") or use :first-child. I also know how to insert things after the selection.
What I can't figure out (at least this late at night) is how to find everything after the first label in the list item (or basically everything in the list item except for the first label would be another way to put it) and wrap a DIV around that in the document ready function.
UPDATE:
Owen's code worked once I removed the single quotes from around: $('this') and set the proper decendent selector: $("li label:first-child") in order to only select the first label that occurs after a list item.
Here is what I did:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
edit: corrected code (see old code in revision history and comments for more info)
ok this should work:
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});
from:
<li>
<label>Some label</label>
<div>stuff</div>
<div>other stuff</div>
</li>
<li>
<label>Another label</label>
<div>stuff3</div>
</li>
produces:
<li>
<label>Some label</label>
<div class="li-non-label-child-wrapper">
<div>stuff</div>
<div>other stuff</div>
</div>
</li>
<li>
<label>Another label</label>
<div class="li-non-label-child-wrapper">
<div>stuff3</div>
</div>
</li>
One approach would be to just wrap everything inside the <li> and then move the label out, e.g.
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());