We Keep Coding

How to make javascript file work in mvc after page is loaded to disable checkbox (with jquery)?

I'm just started to work on a new project and I'm not very experienced working with javascript and web programming.
On the website is a form with some checkboxes. My job is to write a javascript file with jquery, which should disable some checkboxes if other checkboxes are checked. The ID, name and other information of the checkbox comes live from a database, so there is no variable for the checkbox in the code directly. I use the ID of the checkboxes to check if a checkbox is checked (is this correct?). I think I already have the right code, because it's working on the web console in the browser.
if ($("#id_865_gen").is(":checked")) {
$("#id_866_gen").prop("disabled", true);
} else {
$("#id_866_gen").prop("disabled", false);
}
I have an index.html file with all the sources for the javascript file. I made a new js file and added it to the index.html (at the bottom of body tag). I think this is working so far because if I make an alert in the js file, I get an alert before the page is loaded. What else I have to consider while including a js file? Of course, my code has to work live. So if a checkbox is checked, another box should be disabled. If the same box is unchecked the other box should be enabled again. Do I have to put the code in a function and start the function in the HTML file?
I don't know what else is important but the project is mainly built with PHP, jquery, backbone (MVC), template library handlebars, and uses ajax. I have never worked with ajax before, but do I have to include some ajax stuff in the code to make it useable live?
I would be very thankful for suggestions or ideas.
Update:
I found the solution for my problem. I added the onchange attribute to the checkbox. Everytime a checkox gets checked or unchecked my function gets triggered.

There's lots to learn when you're coming to javascript from another language. One of the big adjustments is managing when your code will execute.
Generally speaking, for something like this, you want your code to run:
once after the page is ready and
every time the inputs change.
Since you're running your code multiple times, putting it in a method makes sense
function updateBoxes() {
if ($("#id_865_gen").is(":checked")) {
$("#id_866_gen").prop("disabled", true);
} else {
$("#id_866_gen").prop("disabled", false);
}
}
Just putting this function in a script does not execute the function - you still need to make it execute at the right times. To make it execute after page load can be really different depending on the app. It could be as simple as adding updateBoxes() in a script tag, but usually you would need to wait for some sort of rendering. Without knowing more about your app, the following is a good guess:
$(function() {
// this code will execute when jquery thinks your DOM is loaded
updateBoxes(); // do the initial check
$("#id_865_gen").change(updateBoxes); // this will run the check when your input changes value
});
Additional Concerns
If this doesn't work, it's likely because the checkboxes are not in the DOM yet when your code runs. They may be added by a framework. If they are added by backbone, you could look around for the backbone render method that adds your html. Then you'd need to execute updateBoxes after the render.
The jquery selectors you are using to find your inputs look like they might change. It may be safer to find your inputs using the name attribute, or possibly a class or some other way. For example:
$("input[name='blahblah']")
would select the input <input type="checkbox" name="blahblah"> without using any id.

You should put your code inside
$( document ).ready(function() {
// your code
});
Your code will only execute when the page Document Object Model (DOM) is ready
reference: https://learn.jquery.com/using-jquery-core/document-ready/

dynamicaly change an element if it is changed by a different script

I am writing a script that modifies the content on a page. The content is generated from a different script that I am unable to modify. My code works fine when the page is initially loaded. But when the user clicks a link (which causes the other script to run) then all my content modifications are lost. I am able to catch the event that causes the change by using $(a.pagination_button).on("click",function(){ code }) But whatever code I put in is not having any effect. It seems the other script is running after my .on function. What can I do to make my code execute after the other script so that my changes will be seen by the user?

Just listen on the document for clicks:
$(document).on("click","a.pagination_button",function() {
alert("exec code");
});

ajaxsetup and specific callback

My situation
First of all, I hope I can explain it right; I have an admin panel which will be fully ajax driven. It uses jquery to bind all internal (everything that uses domain.com/admin///* ) and instead of following the link it gets the page via ajax.
Problem
Lets say I have a table of news in which i want to dynamically delete one, it links to page which deletes the page. This link has the event to get the page dynamically linked to it, (because all the links are binded).
I want a good way to get feedback from the global ajax function handling the grabbing of the page and fadeout the row in the table. And thus a good way to reuse this.
$.ajaxcomplete works, but it KEEPS doing whatever i define, no way to reset it.

Initialize Facebook like button post page load and script execution

So I have a like button on my page which loads fine when the script is executed in the bottom of the page. The problem is that I have an Ajax based popout which renders some HTML that also has the like button. How can I initialize that?
I've tried putting same script, but it doesn't get executed.
Is there a way to explicitly call any method to initialize the button?

FB.XFBML.parse() will do the trick

Dynamic content and loading of JQuery scripts several times

I am having a page that loads content dynamically. Depending on which menu item the user clicks, different tables are dynamically loaded and presented using jquery.
One column of each table is having an update linke used to update the content that specific row is representing. When clicking that link a JQuery UI Modal Dialog is presented with a form loaded from a server in which the user should update the content and post back.
This is how I understand it, please correct me if I am wrong. I need to load the jquery script at the same time as I load the dynamic content in order to bind the events between the javascript functions and the elements that is being loaded.
Assuming my assumption is correct I do load the content and the same JQuery UI Dialog scripts each time the user selects a different table. I load the content and jquery files from different javascript functions loaded together with the main index file.
The consequence is unpredictable behaviour (probably predictable using the same use case). When loading the table more than once and updating something so the modal dialog is presented, the dialog is not presented anymore after the first or second usage, as one example.
Could it be a problem that the jquery script is loaded more than once? If it is, what's the principle or patterna I should use for this kind of application. If all above is false assumption, still, what's the principle or patterns for designing this kind of solution where different kind of dynamic content is loaded at several places (all presented within the same index file) and all need the same jquery files.

Take a look a jQuery $.live() and $.delegate():
http://api.jquery.com/live/
http://api.jquery.com/delegate/
These will allow you to bind events to dynamically loaded content.

If I understand you correctly, you are asking how to bind events on dynamically generated content. You do not, in fact, have to load new script at the same time as new content in order to be able to hook events to said content.
What you want is the jQuery 'live' handler. You can specify the target of the binding using standard jQuery selectors. However, instead of the following syntax:
$('.foo').click(function(){ });
You would use
$('.foo').live('click', (function(){ });
The way this works is through event bubbling, where an event invoked on a child element (such as an input box) 'bubbles' up through all parent nodes. In this case, jQuery just watches the whole document for event bubbles, and then matches it against your specific selector conditions.

If I understand you correctly:
1) Multiple tables with an update link on each rows to update their content.
2) Update button opens a modal box with a form.
3) Form is posted and data is retrieved after being processed by the server to feed the concerned table row.
If the flow described above is correct, I don't see why you should load jQuery or jQuery ui more than once.
You should do something like
1) Load the page with all the scripts required.
2) Set up and ajax call with the jquery .ajax() method (doc)
3) Use the ajax call to submit the form data to the server and retrieve the results
4) Use the success callback of .ajax() to feed the row with the updated data. Within the success method you should be able to retrieve the context (a.k.a. the link you clicked) and identify the actual row you clicked.
I hope I make sense.
If by any chance you need to create new rows then you should consider checking the .live() and .delegate() method of jQuery.
Good luck.