jQuery .append() not working in IE, Safari, and Chrome
Posted
by mkmcdonald
on Stack Overflow
See other posts from Stack Overflow
or by mkmcdonald
Published on 2010-05-17T01:16:05Z
Indexed on
2010/05/17
1:20 UTC
Read the original article
Hit count: 323
So I'm using jQuery's AJAX function to read some XML for me and it's worked just fine. But now I'm trying to manipulate the display property of 4 different dynamically generated divs. The size and x/y of the divs are determined by the XML and are parsed through.
My problem lies in the face that these divs either aren't being generated or just don't show up in IE, Safari, and Chrome. In Firefox and Opera, they do work. I'm using jQuery's .append() to create the divs and then the .css() functino to manipulate them. Looking in Chrome's developer tools, I am seeing that the css property being changed in the script is being overridden by the property in the stylesheet. Any fixes?
$(document).ready(function(){
$.ajax({
type: "GET",
url: "generate?test",
dataType: "xml",
success: function(xml) {
$(xml).find('template').each(function(){
var portion = $(this).attr('portion');
var select;
var name = $(this).find('$(this):first').text();
var mutability = $(this).attr('mutability');
var x = (parseInt($(this).find('x:first').text())*96)/72;
var y = (parseInt($(this).find('y:first').text())*96)/72;
switch(portion){
case "stub":
select = $('#StubTemplates');
select.append(""+name+"");
break;
case "body":
select = $('#BodyTemplates');
select.append(""+name+"");
y = y + 90;
break;
}
switch(mutability){
case "dynamic":
var width = (parseInt($(this).find('width:first').text())*96)/72;
var height = (parseInt($(this).find('height:first').text())*96)/72;
var n = name;
switch(portion){
case "stub":
$('.ticket').append("")
break;
case "body":
$('.ticket').append("");
break;
}
var top = $('#'+n).position().top;
var left = parseInt($('#'+n).css('margin-left'));
$('#'+n).css('top', (y+top)+"px");
$('#'+n).css('margin-left', (x+left)+"px");
$('#'+n).css('width', width+"px");
$('#'+n).css('height', height+"px");
break;
case "static":
var n = name;
switch(portion){
case "stub":
$('.ticket').append("");
break;
case "body":
$('.ticket').append("");
break;
}
break;
}
});
var stubActive = false;
var bodyActive = false;
$('#StubTemplates').find('.ddindent').mouseup(function(){
var tVal = $(this).val();
var tTitle = $(this).attr('title');
if(!stubActive){
$('.stubEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
stubActive = true;
}else{
$('.stubEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
stubActive = false;
}
});
$('#StubTemplates').find('#stubTempNone').mouseup(function(){
$('.stubEditable').css('display', 'none');
});
$('#BodyTemplates').find('.ddindent').mouseup(function(){
var tVal = $(this).val();
var tTitle = $(this).attr('title');
if(!bodyActive){
$('.bodyEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
bodyActive = true;
}else{
$('.bodyEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
bodyActive = false;
}
});
$('#BodyTemplates').find('#bodyTempNone').mouseup(function(){
$('.bodyEditable').css('display', 'none');
});
}
});
});
© Stack Overflow or respective owner
