Doing the call via jquery and .load().
Not using rails.js, instead using ujs.js.
Is there something in the controller that needs to be setup? I want to move some things I’m doing via jquery into my views with partials, etc.
Any help is appreciated, thanks.
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.