I have a element that I am trying to update on each creation of an item.
At the moment, a list is populated via a REST API, and I have a script that takes some info from each item, counts another table, and the answer is to populate the counter bubble of the jquerymobile list.
I have searched, and I understand I need to access 'ui-li-count' but I am unable to get to it. I have searched on here and tried many ways, but none actually give me the answer.
Using google console, this is how the element is drawn:
This is how it should look
This is the code I am trying, and failing badly :
console.log('get count : '+$('li[name=mobilelistitem_9]').find("ui-li-count ui-body-b").text());
I need to set the value, but here I am trying to find it, so I know what syntax to use to set the value.
I need this to fire, each time a new item is added to the list collection. Using $(this) or Appery(this) is not working.
Any suggestions on this would hugely welcomed :)
Thanks in advance.
add a . (dot) in the find filter for both the classes, and leave no spaces between them:
$('li[name=mobilelistitem_9]').find(".ui-li-count.ui-body-b").text())
you are searching for a class, that's why you need the dot. No white space = "both classes"
FIDDLE http://jsfiddle.net/z2zJL/1/
I stole the fiddle from ezanker comment, and modified it a bit: as you can see only the 2nd list item will return a result.
Related
I am using Xcrud Version 1.7
https://www.xcrud.net/
And would like use a button to search/filter for a predefined keyword and column. In the Xcrud Documentation I found buttons with tasks like edit and modal but nothing with search.
the idea is something like this
<button onclick="Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{task:'search',field:keyword}))">Filter Keyword</button>
The documentation has some button functions but I cant get something work with search.
https://www.xcrud.net/demos/index.php?page=js_tricks&theme=default
I need somehow a solution to filter the table data without reloading the entire page and their for use the js function from xcrud instead of loading the entire page again. Maybe somebody worked with xcrud already and has an idea.
thank you in advance
I solved it myself with my own little function. It might not be the slickest solution but it works well and like this you can have direct any buttons or menu entries with automatic search in specific columns or all column for phrases.
You then connect your button/link with a simple onclick or like this:
search_xcrud('phrase','colname');
Here the function:
function search_xcrud(phrase, col=''){
console.log('Xcrud Search Started: ' + phrase+ ' Col: ' + col);
$('input[name ="phrase"]').val(phrase);
$('select[name ="column"]').val(col);
$( '.search-go' ).trigger( "click" );
}
You can use the function without "col" and than the function searches in all columns.
If you search for a specific column you need to enter the name of the table with the exact label as used in $xcrud->columns!
Example:
If you use for example table "clients" with the columns id,name,age.
$xcrud->table('Clients');
$xcrud->columns('id, name, age');
You would call the function like this:
search_xcrud('myphrase','Clients.name'); // incl. tablename and colname!
If you have doubts about the right column check your source code and look for the select box with the name "column" for all your options in this situation. This depends on the use of relations etc. and might change in this cases.
I hope this helps others since I was looking since quite some time for a easy solution without somehow touching the original Xcrud code. PS: Xcrud is fantastic!
if you have any questions let me know.
I have form and list of objects at the same page. When I insert a new row, it is not very easy to see where the newly inserted row is placed. Therefore, I thought I could color/highlight the newly inserted row (and perhaps remove the highlight after a few seconds).
How can I do this? I think a way to do this could be using a method on the server which returns the inserted id (return Collection.insert(doc);) and on the client use a callback with
Meteor.call('insertDoc', function(err,result) {
// do something with result
});
I think I can use a reactive-var to save the id of the last inserted row and in the loop highlight the row with
{{#each docs}}
<li class="{{isActive}}">{{name}}</li>
{{/each}}
and have a helper to return active if this._id equals the reactive var with the last inserted id.
But is this the best way to do it? How can I remove the color after some seconds? I have seen such behaviour on many pages but I cannot find any tutorials/code snippets to achieve this.
I wrote a package that uses Meteor's UI hooks to fade items in and out of a list as they are added and removed, to help users maintain context as data changes:
https://github.com/mizzao/meteor-animated-each
There is a demo at http://animated-each.meteor.com/. You can see that as items are added and removed, they are faded in and out. If items are inserted off the screen, the visible area does not scroll.
This isn't doing exactly what you want, but you can use the same idea to highlight items as they appear as well, as opposed to the simple fade in.
Note that all of this happens at the UI rendering level - not the template/code level. The UI hooks are also not well documented right now, but they've been around for a while.
I don't know if your method is the best, but that's how I'd go about doing it.
As for the animation, I'd use a CSS3 animation. Plenty to choose from ( https://developer.mozilla.org/en-US/docs/Web/CSS/animation ), and you can easily make them fade to the standard color. The animation would also only be applied to the last inserted item (because of the way you did it, only the last item would have the "active" class)
basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs
I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.
EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.
I want to append item to sortable list by script. Users can drag item to list directly, and can check some checkboxes and press "Send to list" button. First approach works, second is not.
The problem is if I pass $(ui.draggable) to function, it works. But if i point to draggable element by jQuery chain ($(this).parent().parent().find('div.drag')) and pass this, it won't work. It seems that these two objects are not equal (i tried cloning second object and reducing it to one with eq, and nothing works).
Okay, i got it :) Problem was in move_to_list function.