We Keep Coding

featherlight.js - Run script on modal load

Problem
HTML
<div id="form-lightbox">
<div class="form">
<div id="ajaxreplace">
<script type="text/javascript">
jQuery(function() {
jQuery.ajaxReplace({
//parameters
});
});
</script>
</div>
</div>
</div>
open lightbox
It is a custom script that replaces the script with a form from the backend.
The problem is, that featherlight.js copies the source and displays
the clone in the lightbox.
That duplication of code can't be handled by the library for the form.
I changed the script-tag-type to "text/x-template" so the script does
not run directly. But then the form isn't rendered in the lightbox.
Question: How can I use featherlight to run the script on loading the the lightbox?

To run code after the lightbox is opened, use callbacks (e.g. afterOpen).
If you don't want content to be duplicated, use the persist option.
HTH

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.

The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

modifying main view from inside partial view

I have a main view that let's say has the following:
<div id='test'>Some Text</div>
<div id='placeholder'></div>
then using ajax I'm replacing the contents of 'placeholder' with a partial view that looks like this:
<div id='ajaxContent'>
// new content
</div>
<script>
$(document).ready(function() {
console.log($('#test').text());
$('#test').css('color','red');
});
</script>
so in my script I'm trying to change the color of the text in div 'test' to red, but I keep getting 'undefined' in the console. How do I access the test div in the main view from the partial view coming into the main view through ajax?
If they're ending up on the same page, shouldn't the html elements be able to see each other?

Your JavaScript fragment is simply removed by jQuery on html(...) call. A similar issue can be found here: jQuery .load() / .ajax() not executing javascript in returned HTML after appended
Thus, you have to insert partial data in this manner (assuming you have your partial respone in result variable):
$(result).find('#ajaxContent').appendTo('#placeholder');
$(result).find('script').appendTo('#placeholder');
Also, as #RolandBertolom said before, you don't need ready() in your partial response in JavaScript.

You actually do not need to use $(document).ready. It's just useless. But it shouldn't break anything. As well as you can access any element on the page from script inserted anywhere in the same document. So problem is somewhere out your question's scope.
Try:
run $('#test').text() from console.
replace $('#test').text() with $('body') or something else in your script.
...
Be deductive when you debugging! ;-)

you should not be using $(document).ready again because you document will already loaded with main page so again using it wont help.
try like this:
suppose this is your test.php:
<script>
jQuery(document).ready(function() {
$.ajax({
type:'post',
url:'submit.php',
success:function(data) {
$('#placeholder').append(data);
}
});
});
</script>
<div id='test'>Some Text</div>
<div id='placeholder'></div>
//this is your submit.php the content to replace
<?php
echo "<div id='ajaxContent'>
</div>
<script>
$(function(){
console.log($('#test').text());
$('#test').css('color','red');
});
</script>";
?>
NOTE: what i exactly mean here is use:
$(function(){
console.log($('#test').text());
$('#test').css('color','red');
});
in script.

Render to a html page in the same page on click of a button in Ruby on Rails in a particular position

I am new to Ruby and i have a requirement to redirect to a html page on click of a button.
On click of Help button i need to show a html page in the same window and it should display in
in the center of the current window with the previous content same in the top.
My code in erb file:
<script type='text/javascript'>
window.open('../redmine_portals/Redmine Portals.html', '_self');
window.moveTo(10, 20);
</script>
Please help me how do it, refer image.
Thanks
Sekhar

I'd suggest with some JS, you render a partial.
So for example:
<button onclick="showPartial()">Click me</button>
<%= render partial: "pathto/partial"%>
and within the partial I'd have something that you'd show with the JS

where to put <script> tags when using templates for headers / footers

In my codeigniter app, I've created a header.php and a footer.php. When I load a view, I do the following in my controller:
$this->load->view('includes/template', $data);
The template.php file looks like this:
$this->load->view('includes/header');
$this->load->view($main_content);
$this->load->view('includes/footer');
So far, this has been working very well. However, I'd like to move all my code that loads javascript files from the header to the footer - to help my pages load faster. Stuff like this is what I'm talking about:
<script src="<?php echo base_url('assets/js/jquery-1.8.1.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/jquery-ui-1.8.23.custom.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/jquery.qtip-1.0.0-rc3.min.js')?>"></script>
The problem is that in the files that make up the "main_content", if I have javascript logic, it no longer works.
For example, let's say I have the following view that acts as the "main_content"
<!-- DISPLAY RESULTS -->
<div class="row-fluid">
<div class="span12 visible-desktop visible-tablet" id="l1locations">
<table id="switchrecords" name="switchrecords" class="table table-bordered">
</table>
</div>
<div class="span12 visible-phone" id="l1locations">
<div id="mobileswitchrecords"></div>
</div>
</div>
<button class="btn search">Search</button>
<script>
$(document).ready(function(){
$('#search').show();
$('.search').live('click',function(){
etc... logic that dynamically fills in the table
});
</script>
I thought this logic would still work because it's inside the document.ready() and document ready doesn't fire until all files are loaded.
But I must be wrong because my code no longer works.
I can include the main jquery include file in the header, and all other js files in the footer. But any other suggestions would be appreciated.
EDIT 1
Please note that currently, each view has different inline javascript. Some pages make a lot of ajax calls, other pages just have simple scripts. Regardless, for me to move all inline javascript into files is ok, but how does the footer then know which js file to include? I don't want to include all javascript all the time because the js code only applies to specific pages.

$(document).ready is jQuery. You're trying to use jQuery before it's even loaded in, so it'll fail. You can try to move all of your core-JS includes to the bottom of each view file, before the specific view JS, and the footer containing other footer-y stuff. This way, your JS is still loading at the bottom (after the content), and also before your view-specific code.