detect tab characters with javascript in IE - javascript

I want to detect and replace tab characters in a bit of HTML like this:
<code>
something
{ something else
}
</code
Right now, I am using something like this:
$(this).html(replaceAll(trim($(this).html()), "\t", " "));
But IE, in all its cleverness, changes tab characters into spaces, and so doing the above is useless. Does anyone know how I can detect tab characters in the HTML source with javascript for IE?

So, jmaglasang gave me a good idea. He said IE respects whitespace in a pre tag. So, I thought why not insert a pre tag with javascript, read the html, then remove the pre tag afterward. It works but theres a catch - you have to use a setTimeout callback. Heres the code:
$("code").each(function()
{ $(this).wrap("<pre></pre>");
var element = $(this);
setTimeout(function() // read the html
{ var x = element.html().split("");
for(n in x)
{ alert(x[n].charCodeAt(0) + " '" + x[n] + "'");
}
}, 0);
});
The setTimeout is neccessary because for some reason, IE waits to re-render the html until after all the javascript finishes running. Incidentally, it also waits to execute any callbacks issued by setTimeout. I wish I knew how I could force IE to render the html immediately... If anyone knows I'd definitely appreciate it.

Related

Full Calendar event resource with on click event

On the latest version of Full Calendar, I have a link wrapped around my event resources. When you double click on the event resource name I would like a modal to pop up.
The problem I'm having is as soon as the calendar loads it loads each of the modals for each of the resources as if I've just double-clicked on them.
Has anybody else come across this and does anybody have any idea on how to fix it?
resourceRender: function(renderInfo) {
if(renderInfo.resource.extendedProps.unassign==false)
renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>" + renderInfo.resource.title + "</a>";
else
renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<span class='text-red'>" + renderInfo.resource.title + "</span>";
},
The problem is the way you've created the hyperlink:
.innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>"
In that context, showProfileModal() is not part of your HTML string, instead it's treated as actual code to be executed...and so that's what happens, it gets executed.
You're using it as if the result of that function was something to be included in the HTML string. If you want that to be treated as text, something to be added to the HTML declaration, then include it inside the string:
.innerHTML = '<a ondblclick="showProfileModal(\'staff\',\'' + renderInfo.resource.id + '\')\" class=\"text-staff\">'
Demo: https://codepen.io/ADyson82/pen/WNeKYav?&editable=true&editors=001
(Of course if you wanted to make that code less messy without all the character escaping and so on, you could use createElement and addEventListener to create the hyperlink and set the double-click event handler instead.)

Jquery altering background-url in IE

I ran into a problem using jquery in IE for a background-url. I have some html (that contains a style with a background-url) that I make a jquery object from. After that I change some properties in this object and want back the outerhtml. This all works fine in chrome, but in IE it changes the background url a bit (removing slashes and adding quotes) because of this the url is not working anymore. I can add more slashes for IE, but I was wondering why this happens and if there is a better solution?
So the following peace of code will give the same html back in chrome as was put in, but in IE it has been altered:
function test() {
var logo = '<div class=\"item__img\" style=\"background-image: url(graphic?path=avatars\\OSDAFIJ-Employee_Large.JPEG?ts=1433171332313)\"></div>';
var $logo = $(logo);
var logoOuterHtml = $logo.prop('outerHTML');
console.info(logo + " || " + logoOuterHtml);
alert(logo === logoOuterHtml);
}
test();
Fiddle: https://jsfiddle.net/v7fs4xvr/

Uncaught SyntaxError in JS and possibly Wordpress

I'm not too sure why my code is causing this.
I have this jquery script in the header:
<script>
$(document).ready(function() {
$('.control').on('click', function(e) {
e.preventDefault();
var field = $(this).data('field');
$('.hider:visible').fadeOut("slow", function() {
$('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
});
});
var randomIndex = Math.floor((Math.random() * 100) + 1) % 3;
console.log(randomIndex);
var field = $($('a').get(randomIndex)).data('field');
$('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
})​;
</script>
when I reload the page, nothing happens so it appears the script isn't running. When I inspect the page on Chrome, I see there is this error which is in a tab called (program) and it's in the first few lines line:
if (window.top.require) {
Uncaught SyntaxError: Unexpected token ILLEGAL
window.top.require("ripple/bootstrap").inject(window, document);}
I don't know what it is in my code to cause this error. When I take out my script, it goes away. Not too sure if it's something with wordpress or jqueryUI (I have that loaded for another plugin).
You have an illegal invisible character on the last line between the ) and the ;.
Place your cursor after the ;, and start backspacing until you delete the ), then retype them both.
})​;
// ^^---between these
You'll notice that while backspacing, the cursor will fail to move one time. That's when the invisible character is being deleted.
This happens when copy/pasting code from jsFiddle or perhaps other similar sites.
The character is the unicode \u200B.
AFAIK, the script code you don't know where it comes from, is generated by the Blackberry emulator Ripple, when it inserts a generated script your document.documentElement (see at GitHub). I have seen this behavior causing problems in many of my projects, for example, being inserted on ajax results with dataType HTML and confusing my selectors, or getting my ajax responses dirtier in combination with jquery form plugin (can't link to it because of not enough reputation), etc. I think it might be interferring with your javascript? Hope it helps.

Image Hide in and hide out using event handler

I am working on a web page which contains a list of items and sub items for display. In the Div element, I am setting up the values, image. Using the image show and hide option On click event handler is triggered. This seems to be working fine with IE9, but doesn't work with other browsers (FireFox, Chrome and safari).
<div id="Type_A Medicine" value="H" entity="Type A Medicine" onClick="showHide(this,'MIE_Type_A Medicine')"><img src='<%=request.getContextPath()%>/images/plus.gif'>Type A Medicine</div>
function showHide(ctrl,id)
{
if (ctrl.value == "H")
{
ctrl.value = "S";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/minus.gif'>" +ctrl.getAttribute("entity");
showBlock(id);
}
else if (ctrl.value == "S")
{
ctrl.value = "H";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/plus.gif'>" + ctrl.getAttribute("entity");
hideBlock(id);
}
}
function hideBlock(blockId)
{
var str = "document.all." + blockId + ".style.display='none'";
eval(str);
}
function showBlock(blockId)
{
var str = "document.all." + blockId + ".style.display=''";
eval(str);
}
I still couldn't figure out the difference with the list of browsers. Kindly help...
I'm guessing it is because you use an invalid ID syntax. ID's cannot have spaces. If you use invalid HTML you can't expect javascript to work the same way across browsers.
id="Type_A Medicine"
Also, you never post the code for showBlock or hideBlock where you pass the ID in. Can't tell what goes wrong there without code.
To retrieve non-standard attributes, you should use .getAttribute() rather than trying to access them as properties.
So ctrl.entity should be ctrl.getAttribute("entity") and the same for other non-standard attributes. Run this example in Chrome: http://jsfiddle.net/jfriend00/Lxna7/.
Also, you should remove the space from your ID value as that's not a legal character and makes the id unusable in many circumstances (where a space is a delimiter between identifiers).
Try closing correctly the image tags to see if that fix the problem:
<img src="path/file.html" />

Javascript working on Firefox but not in Chrome and IE6

I have javascript that working fine in Firefox 3.x.x, but it does not work in IE*, Chrome, Safari. Simple alert work before calling function. Here is the code
function showDiv(div){
//alert(div);
document.getElementById(div).style.visibility='visible';
document.getElementById(div).style.height='auto';
document.getElementById(div).style.display='block';}
function hideDiv(div){
//alert(div);
document.getElementById(div).style.visibility='hidden';
document.getElementById(div).style.height='0px';
document.getElementById(div).style.display='none';
}
here is the html page code
<td align="center"><a onclick="showDiv('<?=$val['keyname']?>')" style="cursor:pointer;">Edit</a></td>
if I put alert() before showDiv('<?=$val['keyname']?>') then alert box is displayed but the function is not called in other browsers other than fire fox
Please tell me the solution for this.
The syntax looks okay to me.
Make sure there are not multiple elements with the same ID in the document and that your element IDs are valid.
There is nothing inherently wrong in the code you have posted. I suggest you post a reproduceable non-working example: the problem will be elsewhere in the page. Maybe the div ID string isn't unique (this is invalid HTML and will make behaviour unreliable); maybe there's some other script interfering, maybe you have event code firing this that's not written in a cross-browser way
However your attempts to hide an element in three different ways seem like overkill to me. Just a single display change would do it fine.
Another way to do it is to set className='hidden' or '', and use a CSS rule to map that class to display: none. The advantage of this is that you don't have to know whether the element in question is a <div> (that should revert to display: block), a <span> (that should revert to display: inline) or something else. (The table-related elements have particular problems.)
Maybe you could try that:
function showDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "block";
obj.style.height = "auto";
} else {
alert("DIV with id " + div + " not found. Can't show it.");
}
}
function hideDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "none";
} else {
alert("DIV with id " + div + " not found. Can't hide it.");
}
}
Do not call document.getElementById several times in the same function, use a variable to store the div element.
The if (obj) test will only execute the code if it has been found by document.getElementById(...).

Categories