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.
Related
I have a jquery-mobile selectmenu that has previously worked fine in both Safari and Chrome, but just recently the selectmenu won't select the option choice. It still works fine in Safari. When using development tools either from an emulator or chrome on my desktop, I get no errors. I do have an issue with glyphicons-halflings-regular.woff2 not loading and I have tried all of the suggestions found here on stack, but none of those seem to work and most all research I've done comes up with answers that are >4 yrs old.
I'm using jquery mobile 1.4.5 and bootstrap 3.3.6 and the application resides on Azure.
Here's what I've got right now...
<div class="ui-field-contain" id="regionDiv">
<label for="region">Region:</label>
<select class="text-left" name="select-region" id="region" data-native-menu="false" data-mini="true" onchange="changeRegion();"></select>
</div>
<div class="ui-field-contain">
<label for="projectmob">Project:</label>
<select class="text-left" name="select-proj" id="projectmob" data-native-menu="false" data-mini="true" onchange="dwmChange();"></select>
</div>
Both the region and the project selectmenus do not select the item, they just leave a blank box or won't let you select the item.
The .js that runs when selected (I think it is fine)...
function changeRegion()
{
var regid = Number($("#region").val());
var projsel = $("#projectmob");
projsel.empty();
projsel.append("<option id='selproj' value='placeholder' data-placeholder='true'>Select Project...</option>");
var projNumber = 0;
var projValue = -1;
for (var i = 0; i < proj.length; i++) {
if (proj[i].region == regid) {
projNumber++;
projsel.append("<option id='oc1-" + proj[i].id + "' value='" + proj[i].id + "'>" + proj[i].wono + ': ' + proj[i].name + "</option>");
projValue = proj[i].id;
};
};
$("#projectmob").selectmenu('refresh', true);
if (projNumber == 1) {
$("#projectmob").val(projValue).selectmenu('refresh');
};
getFilteredEvents();
}
function dwmChange()
{
var projid = Number($("#projectmob").val());
if (projid > 0) {
getFilteredEvents();
var regValue = findRegion(projid);
$("#region").val(regValue).selectmenu('refresh');
};
}
getFilteredEvents(); hits the azure sql database and sets up the screen with the data retrieved.
This all ran fine up until about a week ago as far as I know. I have made changes and updates, but none that I think should affect the selectmenus from working.
Any thoughts or ideas would be appreciated.
Thanks
It seems a problem with Chrome 50.0.2661.89.
Looking further into this...
I have to question the logic behind JQuery Mobile hiding the toolbars on select >element focus by default. The native browser select elements overlay the page in >their various special ways, and even the non-native select popup (which you get >when specify the data attribute data-native-menu="false" in html or nativeMenu: >false in the selectmenu options) is absolutely positioned as a dialog. This >means that the toolbars really do not intrude on the real-estate given to the >selectmenu options as they'll always overlay everything including the toolbars. >To me, this makes the code from line 12664 - 12692 commented as: this hides the >toolbars on a keyboard pop to give more screen room rather unnecessary for >select elements.
Workaround/solution: thankfully jQuery-Mobile does nicely allow you to override >this setting in your header/footer with the data-attribute data-hide-during->focus - simply set this to:
data-hide-during-focus="input, textarea"
and it won't try to hide the toolbars anymore when a select element gets focus."
From https://github.com/jquery/jquery-mobile/issues/8429
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/
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
This question already has answers here:
Dynamic controlgroup and checkboxes unstyled
(6 answers)
Closed 8 years ago.
This is my code:
http://jsfiddle.net/YKvR3/34/
I would create a controlgroup with values that are in my array (name).
The problem is that when I click load button the values are added in a controlgroup but the jquery-ui styles are not loaded like in the image.
The controlgroup is not styled with jquery-ui mobile css.
$("#load").click(function(){
var name=["one","two"];
var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
for ( var int = 0; int < 2; int++) {
html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
}
alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
$("#list").html(html+'</fieldset');
//$("#list").page();});
What I am doing wrong?
Thanks.
$("#list").trigger('create');
From: jqm docs
if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
I do applogies if this post is too old and if my post isn't by the correct standard since it's the first time ever posting so please correct me if it's horribly bad :-]
But in case someone else comes across it, I had similar problems with how the dynamic data is displayed and I used the jsfiddles and comments above as a help, and this is what got mine to work, well somewhat near my solution, I don't have a button to load the data it's loaded automatically when the page is loaded.
Updated In my .html-file:
<div id="members"></div>
<input type="button" id="load" value="test"/>
Updated In my .js-file:
$("#load").click(function(){
var name = ["NameOne","NameTwo", "NameThree"];
var fset = '<fieldset data-role="controlgroup" id="members-ctrlgroup"><legend>This is a legend:</legend>';
var labels='';
for ( var i = 0; i < name.length; i++) {
labels += '<input type="checkbox" class="checkbox" id="c'
+ i
+ '"><label for="c'
+ i
+ '" data-iconpos="right">'
+ name[i]
+'</label>';
}
$("#members").html(fset+labels+'</fieldset>');
$("#members").trigger("create");
});
I know the "field" looks a bit weird how I divided it but I find it somewhat easier when it comes to getting the whole html-string correct in these cases.
Updated In order to have the rounded corners and have it as one controlgroup you'll have to have this approach instead. Just like the former posters showed.
Do note that the id with the checkbox and the label for= can tend to screw the output if they're not the same :-]
fiddle
In order to replace the content you should use .html(); instead of .append(), which adds the new content after the existing one.
After adding content to a jQuery Mobile Page you need to enhance the content, using for instance $("input[type='radio']").checkboxradio();
I was using
for( var i=0 ; i < html.length ; i++ ){
var spline = html[i].split("|");
inHTML = inHTML + " <input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" /> <label for=\"checkbox-"+i+"a\">"+ spline[0] +" , "+ spline[2] +"</label> ";
}
jq("fieldset#myFieldSet").empty();
jq("fieldset#myFieldSet" )
// Append the new rows to the body
.append( inHTML )
// Call the refresh method
.closest( "fieldset#myFieldSet" )
// Trigger if the new injected markup contain links or buttons that need to be enhanced
.trigger( "create" );
I was wondering if there's anyway to get a 'dynamic path' into a .js file through Ruby on Rails.
For example, I have the following:
new Ajax.Request('/tokens/destroy/' + GRID_ID, {asynchronous:true, evalScripts:true, onComplete:function(request){load('26', 'table1', request.responseText)}, parameters:'token=' + dsrc.id + '&authenticity_token=' + encodeURIComponent(AUTH_TOKEN)})
The main URL is '/tokens/destroy/:id', however on my production server this app runs as a sub folder. So the URL for this ajax call needs to be '/qrpsdrail/tokens/destroy/:id'
The URL this is being called from would be
/grids/1 or /qrpsdrail/grids/1
I could, of course, do ../../path -- but that seems a bit hackish. It is also dependent on the routing never changing, which at this stage I can't guarantee.
I'm just interested in seeing what other solutions there might be to this problem.
Thanks in advance :)
Maybe a bit hackish solution, but i have a configuration-file like described here, and so you could do something like, inside a config.yml :
development:
root: /
production:
root: /qrpsdrail/
and when you build your Ajaxrequest, you could write
new Ajax.Request("#{AppConfig.root}tokens/destroy/' + ...
But it still looks like there should be a cleaner way to solve this ;)
you can use Dynamic path in new.AjaxRequest using javascript in rails
javascript
function dynamic_ajax(GRID_ID)
{
new Ajax.Request("/tokens/destroy?"+GRID_ID, {asynchronous:true, evalScripts:true, onComplete:function(request){load('26', 'table1', request.responseText)}, parameters:'token=' + dsrc.id + '&authenticity_token=' + encodeURIComponent(AUTH_TOKEN)});
}
html
Grid Id 1
Grid Id 2
Grid Id 3
You can set the path as an attribute to your html object that initiates the ajax call. An example would be:
HTML
<a id='my_clicky_thing' href='#' rails_path='<%= tokens_destroy_path %>'>Click me</a>
JQuery
$('#my_clicky_thing').live('click', function(){
var ajax_path = $(this).attr('rails_path');
/* Do ajax stuff here with the path */
});
This would allow you to use the actual rails path in your .js files, as you do in your views.
(This code may not work, it is for the concept only)