I am working on a project that pulls a series of items form an SQL database and puts them into a grid of divs. The user then selects a series of divs the content of which will be placed into a different SQL database (basically separating 1 database into 4). I am trying to use the JQueryUI function selectable to achieve my selection method but it does not seem to be doing anything. From my research I can only seem to find examples of people using selectable in lists. Is it possible for me to use it with divs/spans or do i have to use lists inorder to get selectable to work correctly?
Code Examples:
htmlResponse &= "<div id=""selectable"">"
While sqlReader.Read = True
htmlResponse &= "<div class=""row"">"
htmlResponse &= "<span class=""rowText cell"">" + sqlReader("RowText").ToString() + "</span>"
htmlResponse &= "<span class=""rowtoCol cell"">" + "</span>"
htmlResponse &= "</div>"
End While
htmlResponse &= "</div>"
getData(currentRows, sortColumn, columnDir);
$("#selectable").selectable();
first is my VB code that makes my grid and the second is my javascript to show I am making the grid before attempting to make them selectable.
You can add a 'selectable' class to your spans, and use filter option of selectable plugin, like this:
$( "#selectable" ).selectable({ filter: "span.selectable" });
You can see the demo here: http://jsfiddle.net/FHtuP/
Related
I'm trying to fire a click event when a cell in ui-grid is clicked but the ng-click isn't working. Also ng-class isn't working and I can't get width: '*' to work. Does anyone know of any accurate documentation for angular-ui-grid? I'm using angular v 1.5.11 and angular-ui-grid v 4.2.3. It seems like half the features of ui-grid don't work and the docs don't seem to explain why.
{ name: 'Number of Vendor Parts', field: 'xrefCount', enableFiltering: false,
cellTemplate: '<div ng-class="{inactive: row.entity.active === \'N\'}" ' +
'ng-click="grid.appScope.showCrossReference()">' +
'<a>{{ row.entity.xrefCount }}</a>' +
'</div>'
}
Take a look at this plunker. I think your problem is that you have not added you controller after grid.appScope. If you declare you controller like this:
ng-controller="MainCtrl as main"
The expression for ng-click should look like this:
grid.appScope.main.showCrossReference(grid, row)
Note that you can pass to the function the grid and the row of the clicked button.
As you can see in the plunker for ng-class I use a function which returns the name of the css class using the row parameter.
I've integrated the ckeditor gem for rails in the activeadmin gem. So far it is working good but I want to include the language selector which I've seen in the demo of the ckeditor. But I've not found any related article except this. The demo of that selector isthis. Thanks in advance.
Download CKEditor and check the following sample: samples\uilanguages.html
Basically, CKEditor demo just shows a custom select element, with the list of languages taken from samples/assets/uilanguages/languages.js
The most relevant lines from this sample are:
<script src="assets/uilanguages/languages.js"></script>
<script>
document.write( '<select disabled="disabled" id="languages" onchange="createEditor( this.value );">' );
// Get the language list from the _languages.js file.
for ( var i = 0 ; i < window.CKEDITOR_LANGS.length ; i++ ) {
document.write(
'<option value="' + window.CKEDITOR_LANGS[i].code + '">' +
window.CKEDITOR_LANGS[i].name +
'</option>' );
}
document.write( '</select>' );
</script>
Keep in mind that by default CKEditor auto detects the browser language and loads the correct translation. So, providing a select combo to a user may so that he could select the language may not have a lot of sense.
I've been using the tag-it plugin from https://github.com/aehlke/tag-it (demo - http://aehlke.github.com/tag-it/examples.html).
In this code there is an option to display the inputted tags in another input, textarea etc. First option -
$('#singleFieldTags').tagit({
availableTags: sampleTags,
singleField: true,
singleFieldNode: $('#mySingleField')
});
Here the id - #singleFieldTags is the inputting field which is a list like <ul and id - #mySingleField displays the 'list-ordered' tags with commas between each.
All the tags that are added and removed in the #singleFieldTags appear in the #mySingleField. Since there is no built-it sortable function with tag-it, adding a sortable() to change the order of tags in #singleFieldTags, does not change the order of tags in #mySingleField.
The second option is a plain with only #singleFieldTags as follows :-
$('#singleFieldTags').tagit({
availableTags: sampleTags,
});
Although in tag-it.js there is a , the value does not appear in the mysql table after submitting the php form as the above list of tags is placed between <li></li>.
How is it possible to make the tags sortable and ensure that the same arrangement of tags in the list field <ul to be displayed in the <textarea as in First Option? Or How can the second option of sorting tags within a single field <input work and enabling it to be submitted by a form?
EDIT: There is a similar plugin like Tag-it called tagit here: http://webspirited.com/tagit/ . This plugin has sortable with an input box meaning if the tags were interchanged, and when submitted on form it would appear in the order of the sort. However, the disadvantage being that it has custom themeroller themes these are not similar and cannot even be linked to the ones at jQuery UI (jqueryui.com).
But on the other hand, the tag-it plugin (not tagit), can be loaded with these themes but does not provide the sortable function.
Here's a solution that uses the tag-it plugin, because I understand that your missing functionality is explained in your quote "...adding a sortable() to change the order of tags in #singleFieldTags, does not change the order of tags in #mySingleField".
In order to have "#mySingleField" reflect the new sort order, I'm adding a handler to the stop event of sortable():
$('#singleFieldTags').sortable({
stop: function(event,ui) {
$('#mySingleField').val(
$(".tagit-label",$(this))
.clone()
.text(function(index,text){ return (index == 0) ? text : "," + text; })
.text()
);
}
});
and
$('#singleFieldTags2').siblings(".tagit").sortable({
stop: function(event,ui) {
$('#singleFieldTags2').val(
$(".tagit-label",$(this))
.clone()
.text(function(index,text){ return (index == 0) ? text : "," + text; })
.text()
);
console.log( $('#singleFieldTags2').val() ); // just for reference
}
});
Here is a jsfiddle that demonstrates the functionality
(added functionality for single input field)
I am working on a JQuery Mobile app. I am dynamically adding HTML when the page loads. A trimmed down example is shown here:
var h = "";
for (i=1; i<=5; i++) {
h += "<div>Entry #" + i + "</div>";
h += "<div class='ui-grid-a'>";
h += "<div class='ui-block-a'><input type='button' value='Approve' onclick='return approveButton_Click(this);' /></div>";
h += "<div class='ui-block-b'><input type='button' value='Reject' onclick='return rejectAbuse_Click(this);' /></div>";
h += "</div><hr />";
});
$("#entries", "#myPage").append(h);
My HTML is appearing in the UI. However, the buttons are not rendered as a typical JQuery Mobile buttons. Instead, they look like traditional HTML buttons. How do I get my dynamically added buttons to apply the JQuery mobile styling?
Thank you
Here's an working example out of your code: http://jsfiddle.net/Gajotres/NuCs2/
Before you can refresh the button/s it first must be initialized with .button() function. Just like this:
$("#approve"+i).button().button('refresh');
$("#reject"+i).button().button('refresh');
There's also another solution but you should use it only if you are recreating a whole page:
$("#index").trigger("pagecreate");
And here's an example for the second solution: http://jsfiddle.net/Gajotres/mpFJn/
If you want to find out more about methods of markup enhancement take a look at my other ARTICLE, let me be transparent, it is my personal blog. Or find it HERE.
Use "Refresh" method in Jquery mobile for dynamic appearance of Jqm UI...
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html
I have been looking but couldn't find any way to remove the blank item on my dropdown list. Ideally, I would like to do this without altering the model. I just want to remove the blank item from the dropdown list so that users are forced to select one (so they can't select "blank").
Note: I am using the default dropdown list that comes with the MVC framework.
Here is my code:
' controller action:
ViewBag.CompanyId = New SelectList(db.Companies, "CompanyId", "Name")
' view:
#Html.DropDownList("CompanyId", String.Empty)
#Html.ValidationMessageFor(Function(model) model.CompanyId)
How are you building the options for your dropdown?
I never have blank options.
I usually create my dropdown like this:
#Html.DropDownListFor(x=>x.Client, new SelectList(Model.Clients))
Obviously your model options will be different.
Answer: Remove String.Empty
Update on 2021: My problem was on the JS script side, I was appending an empty line within my dropdown :D
Like this:
$("#" + "YourID").append('<option></option>'); //Remove This Line
for (var i = 0; i < CountriesList.length; i++)
{
$("#" + "YourID").append('<option value="' + CountriesList[i] + '">' + CountriesList[i] + '</option>');
}
Removing the first line will get you directly the first element from your Items list :)
Happy coding everyone.