We Keep Coding

JavaScript does not work well inside a loaded content in a DIV

I am creating an application with Symfony2, where I have a main menu of options depending on the option selected dynamically opens a tab at a lower div with the content for that option. Content is loaded with load() of Jquery in the container div.You can see in the picture below:
The first problem was that in the HTML loaded in each tab could not use the js file initially loaded in the index.html, as you can see in this example you should check out a notice when we click the content of each tab, but does nothing .
The solution to this problem was included in each HTML code to load the appropriate script, and it worked properly. But to do it this way, if two HTML carry the same js, when one of the contents some event runs is repetite many times as tabs we have created, that is, if I open two different options (each in its own tab both charge the same js) by clicking on the first event associated performed twice, whereas if I do it in the second only done once. In short, whenever a function of a js used, is repeated as many times as there are dynamically loaded on the tabs.
And I tried event.preventDefault();orevent.stopPropagation(); and it does not solve the problem.
Would it be okay that it js is included twice in the overall structure of HTML? (Included in the initial head and then the container div)

Dynamically loading HTML + JavaScript is not the best approach for this case. I suggest that you use some JavaScript SPA framework, like AngularJS or ReactJS. Both are very big and well supported projects, so you can find tons of documentation and tutorials. You'll most likely end up using Symfony only as a RESTful service and Angular/React taking care of the rest (template loading, sending request to server, etc). Also, js frameworks will take care of deep linking and in the end you'll have a better working, easier to maintain application.
It is a bit more work initially, especially until you bootstrap the application, but then it gets easier to maintain and implement new functionality, so it pays off in the end. With your current approach you soon will find yourself in a big mess full of 100s of templates, js callbacks, inclusions, etc. I'm saying this from a personal experience!

Well...
Jquery works like this: when you attach an event to html, if the html does not exist, the event is attached to nothing. If the element exists then the event is correctly attached. It attaches only to existing elements when the on function is execute. That is a correct behaviour. In the past it used to exist a .live method that did exactly what you want: you attached an event and if you create the element after the attachment, the new element also contained the event.
Adding the js twice is not the solution. As you said after a click the button will be executed twice.
Why do not attach the events after loading the content? If you load it in the page start you can do in the main file:
$(function(){ // will force to execute the on method after all the page is loaded.
$('.submenu .button').on ('click', function (){
...
});
});
If you load the menu by ajax, in the callback and after adding the html menu to the main you must use the code I wrote above.

Apply styles to an jquery included html file

I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you

There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.

You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.

Easy way to forward javascript calls between parent window and iFrame

We initially had a web page that had HTML pull-down menus and an Applet. Each of these pull-down menus triggers a javascript function which calls an applet function. The applet also invokes a javascript function to enable/disable the pull-down menus.
Problem is that the HTML pull-down menus are getting cut off by applet because most browsers ignore the z-index for applets. The only solution I found was to place the Applet into an iFrame.
Now all javascript calls to the applet that were getting triggered by the HTML pull-down are broken. Javascript invoked by Applet is now broken.
All javascript functions are stored in one big javascript file loaded in the parent window.
I been doing something like this but it will be a lot of work and will make maintenance to difficult:
var appletIFRAME= document.getElementById('appletIFRAME').contentWindow;
appletIFRAME.executeAction1= executeAction1;
appletIFRAME.executeAction2= executeAction2;
...
...
This works ok but I believe I will also need to create wrapper javascript functions on both the parent window and the IFRAME web page. Also, our javascript functions are using jQuery to access HTML pull-down elements by ID's, which will also need to be refactored out. This will be too much work.
So is there an easier way to call javascript between parent window and IFRAME? I want to avoid doing all this function mapping between parent window and iframe object. All javascript functions are stored in one javascript file loaded in parent window.
Just want to add that the HTML pull-down menus are located in parent window and Applet in the iFrame. This is the only way the pull-down menus will not get cut off by Applet.
Thanks in advance.

Need to make jquery add css to a table which is added through ajax

I have a webpage... http://beta.charmscorp.com/inspect/projects.php - this webpage is in beta and doesn't currently look super professional and is only half working, also, the server internet connection is slow so it takes a bit to load up the elements properly.
Anyways, this page calls other pages through ajax to display in a div. My problem comes from wanting to use jquery to apply css to a table on a page which dynamically loads up in a div. If that sounds confusing, go ahead and go to the link I posted above, click the down arrow in the sidebar, and chose a link... Assets for example. you will see this page load up, and anything on this page won't have jquery applied to it.
From looking at solutions, I see I can add a .live() jquery function, but this seems to apply only to events and selectors. Anything i can do?
ps. this is what I've tried to do:
$("#maintable").live(function(){
$(this).corner();
});
This works on the main page, as you can see, there are rounded corners for the main table. However every table has the same ID, and yet, they don't have rounded corners...

You have an ID problem, it seems. There should never be two elements with the same ID. That said, you need to configure your server-side code so that the markup served to the AJAX request gives these tables a class attribute. Something like class="rounded". Then you can use jQuery to apply the style like this...
$("table.rounded").corner();
Note you will have to make this call each time you "reload" the div with fresh markup, which can be done globally using the ajaxComplete function...
$("table.rounded").ajaxComplete(function() {
$(this).corner();
});

"every table has the same ID"
IDs are supposed to be unique. jQuery sees the first id and quits. Change those "ids" to classes and you'll be good to go.

jQuery Thickbox Issue

I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.
A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.
I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?
A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress
Any ideas?

in thickbox.js:
$(domChunk).click(function(){
was replaced with this:
$(domChunk).live(click, function(){

Stuart got it right: thank you so much!
I was stuck with a similar problem issue: in my case, the target of an appended link (through jQuery .append() method ) was not loaded in a thickbox.
My jQuery code was executed in a document.ready() function:
$("#subpages").append('','<a href="..." class="thickbox" [...]');
Simply adding:
tb_init('.thickbox'); //required to reinitialize thickbox as DOM was manipulated
just after the last line fixed the problem.

Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this

I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?
If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.