Hindsight, it might be helpful to see what I’m doing
Controller action:
def index
@messages = Message.roots
@project = Project.find(params[:project_id])
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @messages }
format.js {render :layout => false}
end
end
$('.window_trigger').click(function() {
var target_url = $(this).attr('href');
var current_trigger = $(this);
var current_box = $('<div class="window_container"><span class="title_bar"></span><span class="container_content"></span><div class="loader"><img src="/images/loader.gif" /></div></div>').appendTo('#page_content').hide();
current_box.attr('data-type',$(this).attr('data-type'));
current_box.find('.loader').show();
// set the dimensions
var width = parseInt($(this).attr('data-width'));
var height = parseInt($(this).attr('data-height'));
// set the title
current_box.find('.title_bar').html('<ul class="window_actions"><li class="close"></li><li class="minimize"></li></ul>' + $(this).attr('data-title'));
// include the functions button if attribute exists
if ($(this).attr('data-functions')) {
$('<span class="functions"></span>').appendTo(current_box.find('.title_bar'));
}
$(current_box).css({'display':'block','opacity':'0',width:width+200,height:height+200,marginLeft:'-'+(width+200)/2+'px',marginTop:'-'+(height+200)/2+'px'});
$(current_box).find('.container_content').css({width:width,height:height});
$(current_box).topZIndex();
$(current_box).animate({'width':width,'height':height,marginLeft:'-'+width/2+'px',marginTop:'-'+height/2+'px',opacity:'1'}, 400, function() {
var position = $(this).position();
var width = $(this).css('width').replace(/\\D/g,'');
var height = $(this).css('height').replace(/\\D/g,'');
var left_margin = $(this).css('margin-left').replace(/\\D/g,'');
var top_margin = $(this).css('margin-top').replace(/\\D/g,'');
var top_position = position.top-top_margin;
var left_position = position.left-left_margin;
// set css position
$(this).css({margin:0,top:top_position+'px',left:left_position+'px',width:'auto',height:'auto'});
// set container content
$(this).find('.container_content').load(target_url+'.js', function(response, status, xhr) {
// if it receives an error
if (status == 'error') {
var message = "Sorry, an error occurred: ";
$(this).next('.loader').html(message + msg + xhr.status + " " + xhr.statusText);
} else {
var position = $(this).find('.loader').position();
$(this).next('.loader').animate({opacity:0}, 'fast', function() {
$(this).remove();
});
}
});
});
I know the js is a bit complex…*it doesn’t need troubleshooting, important part is
$(this).find('.container_content').load(target_url+'.js', function(response, status, xhr) {
That’s what is doing the loading. So, what i would like to do is the window element generation, i want to move into a partial or helper and then inject the actual page into that rather than build it with jquery.
However…*if I can’t get js to execute, I don’t see that as an option.