Develop Reference

How to make my page aware of a button that didn't exist on page load

I have an .aspx page and a separate .js file that contains all of my JavaScript and jQuery. The page also has a UserControl that doesn't exist on page load and that only appears when a certain button is clicked. And the UserControl contains, among other things, a JavaScript button.
The problem I'm having is connecting the newly-created JavaScript button that didn't exist on page load to my .js file.
At first I tried adding a jQuery select to get the button that lives inside the UserControl to the document.ready() that's in my existing .js file like this:
$(".TheClassOnMyUserControlButton").click(function () {
// do stuff here
}
But I couldn't get it to respond to anything I tried. So I put my jQuery inside a <script> tag in the UserControl page itself and the button suddenly started responding.
I have since come to understand that the reason the jQuery select wasn't working from the .js file is because the button didn't exist on page load and you can't select a thing that doesn't exist, and that makes sense now.
So my pseudo-newbie developer brain started trying to figure out how I could refresh the document.ready() in my .js file once the UserControl was on the page so that it would become aware of the newly-created UserControl and its buttons.
I asked another developer that I work with about it and they said to try bind.jquery without explaining how.
Googling that led me here as usual and I saw in the jQuery documentation that their bind() method has been deprecated and they suggest using on() instead.
I think I understand what the other developer meant and I know what I want to do, but I'm getting a little fuzzy on the details and I'm not exactly sure how to use on() to achieve what I'm trying to do.
I know I could just leave the <script> tag inside the UserControl, but I'd like to keep all my JavaScript and jQuery in one place if I can.
Does anyone have any suggestions or things I could try?
I appreciate any help anyone can offer.
Thanks

You have many options to bind an event to a button.
1.) simply write a function and bind it to the button on the event you want. For example:
<script>function doStuff(){
....
}
</script>
<button onclick="doStuff()">Do Something</button>
2.) You have to bind your function at the moment you have created the button. For example:
$('#Container').append('.button');
$('.button').on('event',doStuff);
For a more in depth answer i have to see your code

You can bind jQuery methods or events using the "on" method by looking at the entire document and then in the "on" method specifying the correct selector. Hope that makes sense. You can check the example below.
$(document).on("click", ".className", function (){ /*code here*/ });

Create the button beforehand and hide it. Then, show that button/section/panel on the event of other actions.
C# code behind
control.Visible = false;
control.Visible = true;
or
Jquery/bootstrap front end
$('#myElementID').addClass('hidden');
$('#myElementID').removeClass('hidden');

Cross-browser JavaScript to alert on DOM being modified within a DIV?

I am a basic JavaScript hacker and not an advanced programmer and I would appreciate some pointers.
I am after a JavaScript (or JQuery) function that can monitor the DOM and alter if the content within a specified DIV has been changed. I want this new content captured in a variable for further processing (but for now should be echoed to console.log or alert to demonstrate success).
The DIV is content that will be updated by a separate AJAX process or may contain an iFrame, neither of which I will have full control over. The content may be updated multiple times and on an infrequent and unstructured basis. The contents of the DIV may also change format and could contain any sort of content.
I believe I need a JS event to handle this (rather than any sort of interval based check) and I have been looking at the DOMsubtreeModified function, but not only can't I make it work consistently, it appears that this is not reliable across browsers and I need this to work regardless of the client.
Am I barking up the wrong tree? Is this possible in a cross-browser way? Should I continue to hack on DOMSubtreeModified to try and get it working or is there a better method?

DOMSubtreeModified is the right event.
This might help you, I created it after reading your question. I think it does what you want it to do.
<div class="change_event_box">
1234
</div>
<script>
$(document).ready(function() {
$('.change_event_box').bind("DOMSubtreeModified",function(){
alert('changed');
});
setTimeout(function() {
$('.change_event_box').text("4321");
}, 5000);
});
</script>
http://jsfiddle.net/F4FMk/

Custom View Engine to solve the Javascript/PartialView Issue?

I have seen many questions raised around PartialViews and Javascript: the problem is a PartialView that requires Javascript, e.g. a view that renders a jqGrid:
The partial View needs a <div id="myGrid"></div>
and then some script:
<script>
$(document).ready(function(){
$('#myGrid').jqGrid( { // config params go here
});
}
</script>
The issue is how to include the PartialView without littering the page with inline tags and multiple $(document).ready tags.
We would also like to club the results from multiple RenderPartial calls into a single document.Ready() call.
And lastly we have the issue of the Javascript library files such as JQuery and JQGrid.js which should ideally be included at the bottom of the page (right before the $.ready block) and ideally only included when the appropriate PartialViews are used on the page.
In scouring the WWW it does not appear that anyone has solved this issue. A potential way might be to implement a custom View Engine. I was wondering if anyone had any alternative suggestions I may have missed?

This is a good question and it is something my team struggled with when JQuery was first released. One colleague wrote a page base class that combined all of the document ready calls into one, but it was a complete waste of time and our client's money.
There is no need to combine the $(document).ready() calls into one as they will all be called, one after the other in the order that they appear on the page. this is due to the multi-cast delegate nature of the method and it won't have a significant affect on performance. You might find your page slightly more maintainable, but maintainability is seldom an issue with jQuery as it has such concise syntax.
Could you expand on the reasons for wanting to combine them? I find a lot of developers are perfectionists and want their markup to be absolutely perfect. Rather, I find that when it is good enough for the client, when it performs adequately and displays properly, then my time is better spent delivering the next requirement. I have wasted a lot of time in the past formatting HTML that no-one will ever look at.
Any script that you want to appear at the bottom of the page should go inside the ClientScriptManager.RegisterStartupScript Method as it renders at the bottom of the page.
http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx
Edit Just noticed that your question was specific to ASP.NET MVC. My answer is more of an ASP.NET answer but in terms of the rendered html, most of my comments are still relevant. Multiple document.ready functions are not a problem.
The standard jQuery approach is to write a single script that will add behaviour to multiple elements. So, add a class to the divs that you want to contain a grid and call a function on each one:
<script language="text/javascript">
$(document).ready(function(){
$('.myGridClass').each(function(){
$(this).jqGrid( {
// config params can be determined from
//attributes added to the div element
var url = $(this).attr("data-url");
});
});
}
</script>
You only need to add this script once on your page and in your partial views you just have:
<div class="myGridClass" data-url="http://whatever-url-to-be-used"></div>
Notice the data-url attribute. This is HTML5 syntax, which will fail HTML 4 validation. It will still work in HTML 4 browsers. It only matters if you have to run your pages through html validators. And I can see you already know about HTML5

Not pretty but as regards your last point can you not send the appropriate tags as a ViewData dictionary in the action that returns the partial?

How to not use JavaScript with in the elements events attributes but still load via AJAX

I am currently loading HTMl content via AJAX.
I have code for things on different elements onclick attributes (and other event attributes).
It does work, but I am starting to find that the code is getting rather large, and hard to read. I have also read that it is considered bad practice to have the event code 'inline' like this and that I should really do by element.onclick = foobar and have foobar defined somewhere else.
I understand how with a static page it is fairly easy to do this, just have a script tag at the bottom of the page and once the page is loaded have it executed. This can then attach any and all events as you need them.
But how can I get this sort of affect when loading content via AJAX. There is also the slight case that the content loaded can very depending on what is in the database, some times certain sections of HTML, such as tables of results, will not even be displayed there will be something else entirely.
I can post some samples of code if any body needs them, but I have no idea what sort of things would help people with this one. I will point out, that I am using Jquery already so if it has some helpful little functions that would be rather sweet!
Small code sample
This is a sample of code that is loaded via an AJAX request
<input type="submit" name="login" value="login" onclick="
if(check_login(this.form)){
Window_manager.windows[1].load_xml('login/display.php?username=' + this.form.username.value + '&password=' + this.form.password.value);
} else {
return false;
}">
I know this is small sample, but this is the sort of thing I am on about. How can I have this code attached when the content is loaded?

jQuery .live() method is probably what you are looking for. It will attach click event to newly created HTML elements, so you don't need to call your .click() with every reload of your update-panel.

You can get cleaner HTML code by making the event bindings in javascript. All you need are ways to identify the DOM objects for your HTML elements, like IDs.
If you have a link that has an ID "fooLink" you can do this in your JavaScript:
docuemnt.getElementById('foo').onclick = function () {
//do your stuff here
}
This will have the same effect as binding the event in the "onclick" attribute if the link element in your HTML code.
That way, you can produce much cleaner HTML that is easier to read and maintain.

Simple questions about ajax - Help me understand

I need a little help understanding something. I am using the colorbox plugin to load an external an external html snippet (which works fine). But none of my jquery selectors see the newly loaded html. Is that right (I think it is)? and if so how do I work around that.
Thanks

When you set any properties/bind events in your $(document).ready(function() { ... }) they are executed on page load. So it is all applied to the DOM elements that are present initially.
But when you call the AJAX request and insert some elements into your document, the jquery statements are not executed again (because document.ready doesn't fire). Some solutions to overcome this are:
execute the inside of the document.ready function or the relevant part of it after you insert the new elements.
if the only thing you need are event handlers that should be bound the the new elements you may use live events.