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.
Related
back again! been a while.
So this is my question.
I have a datatable set up that gets the information from the database and shows this in a modal (bootstrap4).
That works fine by the way, but now I wan't to add a dropdown option.
This dropdown needs to have information that is stored in the database (just one table with all the rows).
success:function(data){
$('#Modal').modal('show');
$('#Id').val(data.id);
$('.number').html("<select><option>".val(data.number)"</option></select>");
$('#skills').val(data.skills);
$('.modal-title').html("<i class='edit'></i> Edit ");
$('#action').val('Data');
$('#save').val('Save');
}
as you can see I tried to do this little trick but sadly it didn't take so I was wondering if something like this is even possible?
Thanks so much for the help/info.
Assuming that your modal already contains a select box in a .number div with several options in it then the following would add the extra option into it, generated from the data object:
$('.number select').append(`<option value="${data.number}">${data.number}"</option>`);
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.
Right now I am trying to use HTML5's localStorage API to grab a value from a table, and pass that value into a form.
For example, when a user clicks on "Sign Up Today" on this form: http://yft.ac/upcoming-workshops/, I want the information from the given row (Date, Time, Location), as well as the heading above it (ex: YFT Admissions Insights) to be stored, and then displayed in the field "Workshop Interested In" on this page: http://yft.ac/contact-us/.
I'm really not the best with JavaScript but here is what I have so far:
Contact Us:
$('input#workshop').text( localStorage.getItem('workshop') );
Upcoming Workshops Page:
$('body').on('click', 'a.button', function(){
var index = $(this).parents('table').index('table');
var cur_workshop = $(this).parents('.innercontent').find('h3').eq(index).text();
localStorage.setItem('workshop', cur_workshop);
});
I just tried to piece this together so the above code isn't working, but I hope that it is a good jump start for somebody that might be more well-versed in JavaScript.
You have few problems in the page.
Modernizer library is not included - you are using Modernizr.localstorage in your code
The localStorage.setItem('workshop', cur_workshop); code is added before jQuery library is added to the page - since this code used jQuery move it after inclusion of jQuery
Look like somewhere you/wordpress is calling jQuery.noConflict() - so $ does not refer jQuery anymore so use jQuery instead of $ in your code
Some quick thoughts. I believe your localStorage code should work....
But I think what might be happening is the browser is loading the contact page before you store the values in localStorage.
What you may want to do is remove the hyperlink and bind the click handler to a div, span or just a button element instead. In the click event handler use window.location = "xyz"; after you set the value to localStorage.
Again that may not be the real answer.. but try on a non hyperlink element and see. You can also do e.preventDefault; then store the value then do the window.location thing. That is sort of a progressive enhancement way to do it.
As for the localStorage I would encourage you to try to store the values in a JSON object instead of several items.
localStorage.setItem("workshop", JSON.stringify({'date' : '9/2/2012', 'time': '8:30AM', 'Princeton, NJ'}));
var workshop = JSON.parse(localStorage.getItem("workshop"));
hope this helps!
So this is a very specific question for SlickGrid, but I was wondering if anyone has ever tried to change the way the rows look when grouped? I was thinking that it would be cool to add a border around the grouped rows to show that they are part of that heading.
The way that SlickGrid works doesn't give any indication the rows are grouped in the DOM, they just appear under the header. I have tried to do something like this:
dataView.getItemMetadata = function(index) {
return {cssClasses: "myRowCssClass"};
}
but unfortunately, this broke other things in terms of the grouping. There is some stuff in the native getItemMetadata function that the groupBy function needs to process. I could copy that stuff into this function and add a condition for this, but that doesn't seem right. Does anyone who has some experience with SlickGrid know how to achieve this effect?
I know this is an old question. But I have done something similar to what you are asking about.
In my data, I have information about assets at several sites within an organization. So for each group of records, the name of the site will be the same. As I am reading my data (obtained via an $.ajax call), whenever the site name changes, I insert a 'parent' row in the data array.
I wanted to display these parent rows in bold. I accomplished this by defining a CSS class for the parent rows and using getItemMetadata() to apply the class.
dataView.getItemMetadata = function(row) {
if (row is a parent) {
return { 'cssClasses' : 'my-parent-row-class' };
}
};
In my application, I also made use of Slickgrid filters and a 'toggle' class (applied in a click handler) to implement a drill-down feature where you can click on a parent row and collapse/expand the rows grouped under that parent row.
I hope this helps.
Tim
I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.