I am trying to put the '¡' character (¡ in HTML) in one of my jQuery UI dialog buttons, but I can't figure out how this works. Here's my code:
registerhtml.dialog({
modal: true,
title: 'Registro en entreSartenes',
resizable: false,
buttons: [
{
text: "¡Regístrate!",
click: function(){
$(this).dialog('close');
connect();
}
},
{
text: "No gracias",
click: function() {
$(this).dialog('close');
}
}
]
});
When the dialog pops up, I actually get "¡Regístrate!" in my button. I have also tried putting the unescaped text directly in the JS code ("¡Regístrate!") but I get weird characters when it gets displayed.
Does anyone know a solution for this?
Since you're using javascript and not HTML, you'll need to put the actual character, not the HTML entity. You'll be able to do it if you use the right encoding (like UTF-8, but any encoding that can represent the characters you need should work). Make sure your file is UTF-8 and that it is interpreted as such by the browser, by setting the encoding in the HTTP headers or the HTML meta elements.
There is always an alternative in jQuery, you can do this:
var text = $('<i/>').html('í').text();
alert(text); // ---> á
It will create an unattached i tag, then evaluate the string í as HTML, then retrieve the rendered text content.
Also i found out you can use
\hexcode
works well
"Har hentet V\xE6rge": function() {
$( this ).dialog( "close" );
http://www.javascripter.net/faq/accentedcharacters.htm
Related
Hey I have added jsPdf into my HTML to download the HTML as a PDF, but in IE 9 it doesn't works. It is not downloading any PDF so I searched about this and got the I have to enable the IE shim for this so can you help me out that how I can be able to do that, I have tried to use Downloadify but didn't understand how to pass full HTML file and get the image of that into PDF.
These are the steps, but the support for downloadify is poor.
Add these script tags to the top of your page (changing the path as appropriate to the files in the lib directory of jspdf):
<script src="./js/jspdf/libs/Downloadify/js/downloadify.min.js"></script>
<script src="./js/jspdf/libs/Downloadify/js/swfobject.js"></script>
add a <div id="downloadify"> in your dom. This div should be empty.
Next, add a script tag to the bottom of your page that will run after the DOM has been populated. This script will generate a button in the '#downloadify' div. Put this inside of the script tag:
Downloadify.create('downloadify',{ // this first argument id a dom element id. this is how it knows where to populate the flash button it's creating.
filename: "afilename.pdf",
data: function(){
// generate your pdf here.
var pdf = new jsPDF;
// various other jspdf commands here
return pdf.output();
},
onComplete: function(){
alert('Your File Has Been Saved!');
},
onCancel: function(){
alert('You have cancelled the saving of this file.');
},
onError: function(){
alert('You must put something in the File Contents or there will be nothing to save!');
},
swf: './js/jspdf/libs/Downloadify/media/downloadify.swf', // make sure this links properly to your file as well.
downloadImage: './js/jspdf/libs/Downloadify/images/download.png', // this is the link to the image of the button itself. An ugly default is included. If you want to style the button, you have to create a sprite image of the same kind.
width: 100, // width of the button
height: 30, // 1/4 height of the button image (which has four states present)
transparent: true, // seems to do nothing, set to true or false.
append: false // have not figured out what this does.
});
I've updated jQuery UI to latest version (from 1.9.x) and there's something that I can not resolve, namely: in title attriutes I sometimes store HTML, for instance:
Start Date: 2012.01.01<br />End Date: 2012.02.01
Before upgrade tooltip text was not encoded so I saw Start & End date in two separate lines. However now, text in encoded and I see . Is there a way to resolve it?
My answer is an extension to what Fran said.
Ran into this as well. You can store simple html tags in title. Instead of just calling tooltip, you now have to do some more work. You have to return your html coded title. I have tested this with bold < b>, underline < u> and breakline < /br>.
$( document ).tooltip( {
content: function() {
return $( this ).attr( "title" );
}
});
The problem is that title doesn't admit HTML tags. To apply style to text in title attribute using Tooltips, you should use something like this:
HTML:
<a id="mytooltip" href="#" title="">Tooltips</a>
JS:
$('#mytooltip').tooltip({
items: "[title]",
content: function() {
return "<b>That's what this widget is</b>";
}
});
You can use any HTML tags (even tables, images, etc) and JQueryUI Tooltip
Show it running in JSBin: http://jsbin.com/ukejok/3/
When I use the Paste from Word or Paste as plain text options in CKEditor double line returns get converted into double instances of <br>.
Whilst this is technically exactly what exists in the source file it would be fantastic if there were a way to have all double line returns be converted into paragraph tags when pasting from an external document. TinyMCE doesn’t seem to struggle with this.
Is this possible with CKEditor?
I'm using Pixel & Tonic's Wygwam version of CKEditor and the inference of this support thread is that it can't be done as exists :(
Since I spent hours searching for the same thing and found lots of posts asking but none answering I decided to work it out on my own.
Here is the solution, hope it saves you the time I wasted:
In config.js add:
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.on('paste', function (ev) {
ev.data.html = ev.data.html.replace(/<br>\s*<br>/g, '</p><p>');
});
});
What really really fixed this issue for me was:
Put this line in config.js:
"config.enterMode = CKEDITOR.ENTER_BR;"
This will create a "br" instead of a "p" when you hit ENTER in the ckeditor.
Then put this script where you replace the
CKEDITOR.replace( 'descripcion', { enterMode : CKEDITOR.ENTER_BR, shiftEnterMode : CKEDITOR.ENTER_BR } );
CKEDITOR.on( 'instanceReady', function( ev )
{
ev.editor.dataProcessor.writer.setRules( 'br',
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
});
</script>
That script prevented the double "br"
Hope it helps.
Here is my work-around for this in CKEditor 4 (where ck is an editor instance):
ck.on('afterPaste', function() {
var data = ck.getData();
data = data.replace(/<br \/>\s*<br \/>/g, '</p><p>');
ck.setData(data);
});
I'm using jQueryUI to create a dialog, I want the dialog object to be destroyed when it's removed.
So I did something like this:
thisDialog.dialog({
autoOpen: true,
close: function(event, ui) {
thisDialog.dialog("destroy");
}
});
What I want to do is maintain the existence of the element that thisDialog is attached to, but simply destroy the jQueryUI .dialog() object that is attached to it, not change my DOM.
Sample:
http://jsfiddle.net/ytWPV/1/
Update:
This may be a bug/issue with jQueryUI? If someone can show that, I'll accept that as an answer as well
I am not sure what you want to accomplish with "destroy" versus "close", but I will assume you have good reasons.
If you can successfully close your dialog (essentially setting the entire DIV that represents your dialog to the CSS equivalent of display:none) but want to go further and have the html more permanently removed from the DOM, I would add some logic to the close function that would use a selector (any selector will suffice) to find the top-most DIV for your dialog and then to manually set the .html() for that DIV to and empty string. That will basically wipe out the internal HTML and leave you with only your original that once acted as a dialog...
You could also try cloning the element if it doesn't change such as:
$("#win2").clone().attr("id","random").dialog({
autoOpen: true,
height: 60,
width: 50,
modal: true,
close: function(event, ui) {
alert($(".hide").html())
this.dialog("destroy");
}
});
...which the original code came from your example.
I am trying to get jQuery.post() to run my php script and then open a jQuery UI dialog with the data that php script returns. Its supposed to come back as a form with a table and a textarea in it. It works great with alert(data); and i get a pop-up with all my data.
The problem starts if i turn off alert(). Now it opens 2 dialogs. One containing only the table, without textarea, and the second one absolutely empty.
What am i doing wrong here? How come all my data shows up in the alert(), but not in dialog? What do i need to do to fix it?
Oh, and do i need to also include $.ajax() before the $.post()?
Thank you.
$.post("/path/to/script.php",
{ id: this.id, value: value },
function(data){
// THIS WORKS
//alert(data);
// THIS DOES NOT WORK
$(data).dialog({
autoOpen: true,
width: 400,
modal: true,
position: 'center',
resizable: false,
draggable: true,
title: 'Pending Changes'
});
}
);
You don't need another $.ajax() call. The $.post() method is a wrapper shortcut to $.ajax(). What might be happening is you may be getting both default behavior and Javascript bound behavior. I'm assuming this $.post action triggered on a click. If so, then at the very end of your $.click() handler you need to return false to prevent default behavior.
$('input[type=submit]').click(function() {
$.post( /* ... */ );
return false;
});
This is how I handle it. I have a empty div and initialize the dialog upon document ready. Now on the ajax return load that div's html with the data received from PHP and call the "open" method of dialog. Simple and definitely works.
HTH
Ah! This was not a problem with the JS, but my php file.
The textarea was sitting outside of <div>blah blah</div>.
Problem solved.