Using jQuery .on() rather than .onClick on dynamically generated buttons

Last week, I was beating my head over why the .click() event wasn't working with a dynamically generated button. My setup was that the buttons were given the class 'do_this' and the javascript looked like:

$('.do_this').click(function(){ /* insert code here */ }; 

At first I thought maybe it was because the code wasn't inside $(document).ready(), so I put it inside one. Didn't work. Then I tried assigning the attribute and value 'onClick="runThisFunction()"' to the button instead. Still no go. (I also thought maybe I should define the Javascript functions after the buttons were generated, so I did just that. I'm not sure why it didn't work, though. It could be because the JS that rendered the buttons happened through a .post call.)

Then my co-worker pointed me to the jQuery .on() method. Surprise, surprise: it worked! The code looks like this now:

$(document).on("click", '.add_contact', function(event) { /* insert code here */ });

The jQuery documentation goes on to explain why .on() works and none of my previous attempts did:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

See? I put everything inside document so the class was already rendered when the Javascript bound the class to the click event.

So with that in mind, happy coding!

Bringing up a jQuery dialogue before going to a controller

Currently, I'm using CodeIgniter/Bonfire for a website that does your basic CRUD operations. One of the functionalities the user wanted was a confirmation dialogue that the user really wanted to delete an item, which corresponds to an entry in the database. My problem was that, while I knew how to bring up jquery dialogue boxes, I wasn't sure how to redirect the dialogue to the controller that would actually delete that item from the database. My solution was to use the "id" attribute of my delete button.

While iterating through the items returned from the table, print out the name of the item and a delete button beside it. The delete button is really an anchor tag styled to look like a button.

< a class='btn delete' id='".site_url()."modulename/controllername/function_name/{$item->id}'>Delete< /a>

Notice that I didn't use the href attribute. What I would've put in href, I instead put in id. If I hadn't, I wouldn't be able to call the jquery dialogue because the page would instead go to the href link.

Whenever this anchor tag is clicked, this piece of javascript would be run:

$('a.delete').click(function() {
    var dest = $(this).attr('id');
    $('#confirm_delete').css("display", "block").dialog({
          height: 150,
          width: 350,
              modal: true,
              buttons:
              {
            Yes: function(){
              window.location = dest;
            },
            No: function(){
              $(this).dialog('close');
      }}}).dialog('open');});

It's basic jquery, but the key is the assignment of the anchor tag's id attribute. The above code says: when an anchor tag with class 'delete' is clicked, grab that anchor tag's ID attribute and store it in variable "dest". Then look for an html element with the id "confirm_delete" and display it in a dialogue with the following height, width, and buttons: Yes and No.

Just so you know, the div with id = confirm_delete is somewhere on the page with this code:

< div id="confirm_delete" style="display: none;" 
title="Remove item">
Are you sure you want to remove this item?
</ div>

If the user clicks on the "Yes" button, then the user will be redirected to the controller that will actually delete the item. If he chooses "No", then the dialogue just closes. 

Uploading a custom header image to the twentyeleven theme in Wordpress

This is more of a note to myself.

Right now, I am tasked with customizing the twentyeleven theme into another theme , and it involves turning off the rotating header images. After unsuccessfully doing a walkthrough of the associated code (that begins in header.php with a call to header_image()), I found the functions.php file under wp-content/themes/. In the twentyeleven_setup() function, I found a call to register_default_headers, which takes in an associative array. I only need one header image, so I deleted all but one key-value pair, renamed the key to something that made sense, and pointed the 'url' key to the photo filename. Now, although I haven't deleted any of the other header images from the directory structure, the code will only pick up the one header image I registered.

Self-note: error concerning NetFx40_IIS_schema_update.xml

So a while ago, while trying to restart IIS, I got an annoying error that said C:\Windows\System32\inetsrv\config\schema\NetFx40_IIS_schema_update.xml wasn't a well-formed xml file. Fine. I checked it, and it was indeed malformed--it contained only nulls.

Fix this by deleting the goshdarn file.