jQuery with LightWindow and Prototype JS
What a day yesterday was. Supposedly if you do the whole jQuery no conflict stuff it will be able to play ball with Protoype.js, not true. I wanted to retrieve the value of the currently selected option in a select box with jQuery but for some reason all that monkey patching going on in Prototype just tripped it up.
The goal was to update a DIV with information when something in a dropdown was selected. Furthermore in the DIV, this information (various template choices) was to be clickable and a preview shown in a LightWindow. The underlying PHP framework used here is Symfony.
At first I tried this:
function onSelectChange(){
updateTemplates($("#template_category option:selected").val());
}However it just stubbornly returned undefined, not when I left prototype.js out of it though. Problem was, I needed prototype due to a lot of legacy code being reliant on it, as well as LightWindow. And I didn’t feel like just chucking jQuery out because of this problem with the selected option. Here is how I managed:
<script type="text/javascript" src="/project/js/jquerymin.js"></script>
<link rel="stylesheet" href="/project/css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript" src="/project/js/lightwindow.js"></script>jQuery.noConflict();
var targetUrl = '<?php echo url_for('invitations/ajaxAction') ?>';
function updateTemplates(catId){
jQuery.post(targetUrl, {cat_id: catId}, function(res){
jQuery("#template_selector").html(res);
lightwindowInit();
});
}
function onSelectChange(){
var dropdown = document.getElementById("template_category");
var index = dropdown.selectedIndex;
var ddVal = dropdown.options[index].value;
var ddText = dropdown.options[index].text;
updateTemplates(ddVal);
}
jQuery(document).ready(function($){
updateTemplates(1);
$("#template_category").change(onSelectChange);
});Note how jQuery works just fine except for getting that option for some reason. I had that part replaced with an example from Daniel Anthony Vega, ironically something ugly that he replaced with slick jQuery.
Note also how we need to call lightwindowInit() every time we update the DIV with the result of the Ajax call in order to map the LightWindow popup event to all the links in there.
Related Posts
Tags: Javascript, jquery, lightwindow, prototype js, symfony