jQuery multiple language script - javascript

Found this script on JSFiddle that would switch between languages. The problem is. When I type in the text with <br> it displays the breaks.
How can I get it to actually break the text?
Also, how can I get it to choose a default language? So every time you reload the page it will be that language that is selected. Otherwise, nothing is displayed until you select the language manually.
Also, I would highly appreciate it, if you can recommend other such scripts that are better then this one.
function getLanguageResources(){
var fr = new Array(); var en = new Array();
fr['settings'] = "paramètres"; en['settings'] = "settings";
fr['default_feed'] = "Flux par défaut"; en['default_feed'] = "Default feed";
fr['hidden'] = "Masquer"; en['hidden'] = " Hidden";
fr['save_settings'] = "Enregistrer les paramètres"; en['save_settings'] = "Save settings";
var resources = new Array();
resources['fr'] = fr;
resources['en'] = en;
return resources;
}
function changeLanguage(lang){
var langResources = getLanguageResources()[lang];
$("span[name='lbl']").each(function(i, elt){
$(elt).text(langResources[$(elt).attr("caption")]);
});
}
$(document).ready(function() {
$("input[name='radio-language']").click(function(){
changeLanguage($(this).val());
});
});
Thanks.

To break the text, apply your string as HTML instead of text:
$(elt).html(langResources[$(elt).attr("caption")]);
To set a default language, set the checked attribute on the appropriate radio button and simulate a click event in your $(document).ready callback:
$("#radioEnglish").attr("checked", true).trigger("click");

Related

Tablesorter Set output widget options on the fly

I'm using the tablesorter fork from Mottie. I am not very experienced with javascript, but so far I got everything to work. Here is the problem:
NOW I want to have two buttons above my table to allow the download of either all rows or download just the selected rows.
For this I have the following javascript code which works partly. I just need to get it to work to download all(!) rows.
What I am doing wrong ?
Here is the portion which outputs all:
$('.downloadall').click(function(){
var $table = $('.tablesorter');
wo = $table[0].config.widgetOptions,
saved = $table.find('.output-filter-all :checked').attr('class');
wo.output_includeHTML = false;
wo.output_delivery = 'p';
// d = download p = page
wo.output_saveRows ='a';
// a = all f=filtered
$table.trigger('outputTable');
return false;
});
This works very well including the setting of all the other output options.
The following code does exactly the same thing, but I want, of course, just the selected rows.
$('.downloadselected').click(function(){
var $table = $('.tablesorter');
wo = $table[0].config.widgetOptions,
saved = $table.find('.output-filter-all :checked').attr('class');
wo.output_includeHTML = false;
wo.output_delivery = 'p';
// d = download p = page
wo.output_saveRows = saved;
// a = all f=filtered
$table.trigger('outputTable');
return false;
});
I've tried various things but with no luck.
Since I can't tell what to expect from the table HTML. I don't know what the saved variable ends up as, but it appears to be missing the leading period to make a jQuery selector for a class name.
wo.output_saveRows = '.' + saved;
Anyway, it got me thinking that currently you can't select a row based on its content, so I updated the saveRows option to now accept a filter callback function which as of this writing is currently only available in the master branch, and can be used as follows:
$('.downloadselected').click(function(){
var $table = $('.tablesorter'),
wo = $table[0].config.widgetOptions
wo.output_includeHTML = false;
wo.output_delivery = 'p';
wo.output_saveRows = function(){
// include row only if it has a checked checkbox
return $(this).find('input[type="checkbox"]:checked').length > 0;
};
$table.trigger('outputTable');
return false;
});
Well I just overlooked that the class name '.saved' is of course not correct. At the end Mottie pointed me to the right direction. Here is the solution to my original question just use the correct class name .checked and everthing works as expected.:
$('.downloadselected').click(function(){
var $this =$('#table');
var $table = $('.tablesorter');
wo = $table[0].config.widgetOptions,
wo.output_includeHTML = false;
wo.output_delivery = 'p';
// d = download p = page
//saved = '.checked';
// a = all f=filtered
wo.output_saveRows = '.checked';
$table.trigger('outputTable');
return false;
});
It

Jquery mobile interfering with javascript filling select box

I am trying to fill an html select box programmatically using javascript. I have found that although my code is working, jquery mobile is interfering with what displays in the select box. I am setting the selected option, which is working, but the value displayed in the select box is the wrong value. It isn't changing from what I had it originally filled as from the html.
I am linking in: "http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css". Is there anyway to get around the jquery? I can't just remove the jquery css. That would break everything on my site, and I don't have time to redo it all.
Here is a jsfiddle of the problem: http://jsfiddle.net/RjXRB/1/
Here is the my code for reference:
Here is my javascript function that fills the select box:
function printCartList(newCart){
// newCart is an optional parameter. Check to see if it is given.
newCart = newCart ? newCart : "a_new_cart_was_not_provided_12345abcde";
// Create a cart list from the stored cookie if it exists, otherwise create a new one.
if($.cookie("carts") != null){
carts = JSON.parse($.cookie("carts"));
}
else{
selectOption = new Object();
selectOption.value = "newuniquecartid12345abcde";
selectOption.html = "***New Cart***";
carts = new Object();
carts.size = 1;
carts.option = new Array();
carts.option[0] = selectOption;
}
// Get the select box
var select = document.getElementById("select_cart");
// Get the number of options in the select box.
var length = select.options.length;
// Remove all of the options in the select box.
while(select.options.length > 0){
select.remove(0);
}
// If there is a new cart, add it to the cart.
if(newCart != "a_new_cart_was_not_provided_12345abcde"){
selectOption = new Object();
selectOption.value = newCart;
selectOption.html = newCart;
carts.option[carts.size] = selectOption;
carts.size++;
}
// Save the cart in a cookie
$.cookie("carts",JSON.stringify(carts));
// Populate the select box
for(var i = 0; i < carts.size; i++){
var opt = document.createElement('option');
opt.value = carts.option[i].value;
opt.innerHTML = carts.option[i].html;
if($.cookie("activeCart") == carts.option[i].value && newCart != "a_new_cart_was_not_provided_12345abcde"){
// Set the selected value
alert(carts.option[i].value);
opt.selected = true;
// I tried changing the value of a p tag inside the default option, but that didn't work
document.getElementById("selectHTML").innerHTML = carts.option[i].html;
}
if(opt.value == "dd"){alert("hi");};
select.appendChild(opt);
}
}
Here is my html:
<form method="POST" name="cartSelectForm" action="home.php">
<select name="cartList" id="select_cart" data-mini="true" onchange="submitCartForm()" data-icon="false">
<option value="newuniquecartid1234567890"><p id="selectHTML">*** New Cart ***</p></option>
</select>
</form>
Any help would be greatly appreciated.
I know this question is about a month old, but I stumbled upon it because I was having the exact same issue. I eventually fixed it by doing this:
After programmatically setting the value, I manually fired the change event on that select box. I guess it forced jQuery mobile to update all of it's enhanced markup related to that element. Slightly annoying, but fortunately very easy to work around.
$("#country").val("US");
$("#country").change();
Hope that helps somebody.

Accessing textarea value inside td on iframe

I'm freaking out with an issue I cannot solve.
I don't have so much experience with iFrames and jQuery but it's needed to solve this asap because it's a big problem in an app.
I've an iFrame with a div and some rows. I've a textarea and a button whos calling a javascript method who's recovering the value inserted in textarea
But it's not working, either of options I tried have worked.
This is the code, could you help me?
Thank you!
http://pastebin.com/xsWzG2VH
EDIT:
I'm trying to recover the value of TEXTOAYUNTAMIENTO, a textarea inside td structure with that function.
When I press the button to recover it, all of them are empty or null.
This is the method:
function checkayuntamiento(value)
{
alert(value);
alert('Hola');
alert($('#TEXTOAYUNTAMIENTO', window.parent.document).html());
alert('<%=indice%>');
alert('<%=TEXTOAYUNTAMIENTO%>');
alert('<%=DESCMODOENVIO%>');
var valor = document.getElementById("TEXTOAYUNTAMIENTO");
var valor5 = document.getElementsByName('TEXTOAYUNTAMIENTO')[0].value
var valor2 = document.getElementById("TEXTOAYUNTAMIENTO").innerHTML;
//var elem = $('#salida_'+id);
var idi = $("#TEXTOAYUNTAMIENTO").val();
var asdf = $(this).closest('tr').next().find(".AYUNTAMIENTOS").val();
var valor3 = document.getElementById("PRUEBA");
var valor4 = document.getElementById("PRUEBA").innerHTML;
//var elem = $('#salida_'+id);
var idi2 = $("#PRUEBA").val();
var asdf2 = $(this).closest('td').next().find(".PRUEBA").val();
alert(asdf);
alert(idi);
alert(valor);
alert(valor2);
alert(asdf2);
alert(idi2);
alert(valor3);
alert(valor4);
alert(valor5);
}

How to get currently selected text from Thunderbird Message Composer

In Thunderbird's message composer, I need to use javascript to see if the user has selected any text, and optionally get that selected text.
I tried this:
var thisselection = window.getSelection();
alert("selection = " + thisselection.toString() );
But even if text is selected, it says nothing is selected. I am sure I don't understand what is going on. I was reading from MDN.
I've also tried:
var editor = gMsgCompose.editor;
var thisselection = editor.getSelection.toString();
but then I get an error saying getSelection is not a function to be used with editor.
Ah, found it:
var thisselection = document.commandDispatcher.focusedWindow.getSelection();
var thistext = thisselection.toString();
alert(thistext);
Another way (not so magic as commandDispatcher):
var editor = document.getElementById("content-frame");
var edocument = editor.contentDocument;
var sel = edocument.getSelection();

Use stored properties when creating an HTML Sidebar

Using a sidebar, I get user input and save it as a script property. Next time the sidebar is loaded, I'd like to check if the saved property exists. If so, display it instead of the text entry box.
I know to use:
google.script.run.withSuccessHandler().myFunction()
Honestly, I have tried so many different things at this point. Any help would be greatly appreciated.
This is what I have tried, I want to load values in the sidebar if they exist. If they do not I want it load a text entry box, that is what it does by default.
Edit - Adding Code
function loadSidebarValues() {
if (dateText != 'ErrorStuff') {
var div = document.getElementById('dateValue');
div.innerHTML = dateText;
var errorDiv = document.getElementById('error');
errorDiv.innerHTML = "";
$('#dateText').val(
PropertiesService.getScriptProperties().getProperty('dateColumn')
);
} else {
var div = document.getElementById('sidebarValues');
div.innerHTML = "";
var errorDiv = document.getElementById('error');
errorDiv.innerHTML = 'There was an error.';
}
var scriptProperties = PropertiesService.getScriptProperties();
scriptProperties.setProperties({
'dateColumn': 'dateText',
});
Logger.log("date: " + userProperties.getProperty('dateColumn'));
}
function onLoad(){
if (PropertiesService.getScriptProperties().getProperty('dateColumn') != null) {
loadSidebarValues();
};
}
You can write server code to retrieve UserProperties value, then run the HTML script to get that value as instructed in File-open dialogs
section in this guide
What they do:
getOAuthToken in Code.gs
Call that function in Picker.html by this code:
function getOAuthToken() {
google.script.run.withSuccessHandler(createPicker)
.withFailureHandler(showError).getOAuthToken();
}
createPicker method from withSuccessHandler take token value from getOAuthToken in first step.
You can use the same pattern for your own case.

Categories