Disable Inspect Element/Source Viewing by mouse click in a website

What if you want to disable source viewing in your site? Disable the right click method? Read on to find out how.

JSON encode auto sorting issue

JSON is used to send data as an object either be an array or string.

I used AJAX to pass on my data from server to client. My intention was to populate a drop down list with values dynamically. I had created my array list as show below:

$result = array( '5' => 'a', '2' => 'b', '3' => 'c', '4' => 'd', );
echo json_encode(array( 'result' => 'success', 'details' => $result ));

I was expecting to see my array as is, but I was confused when I checked my JSON result array was as shown below:

array { result: "success", details: [{ 2: "b", 3: "c", 4: "d", 5: "a" }] }

See the problem? My array values were automatically sorted out. I found out that this is a browser issue with Google Chrome. I checked this using Firefox and there was no problem. So what is the solution to this problem? There are two ways:

1. Don't use json_encode. I used this method because I realized I didn't really need to populate my dropdown list dynamically. I just needed static data for selection.
2. Sort it out before appending to its drop down element.

// data.details came from json_encode in the example above. 
//arrVals should be an array.
var arrVals = data.details();
arrVals.sort(function(a, b){
    if(a.val>b.val){
        return 1;
    }   
    else if (a.val==b.val){
        return 0;
    }
    else {
        return -1;
    }
});

Hopefully, Google Chrome will fix this bug so we won't encounter this again or performance will not be wasted.

Sources:
Sorting (dropdown) Select Options Using jQuery
Sort a select list box

JQuery Scroll to top plugin

I am using this template at work and I find this plugin to be cool and useful. It's a JQuery Scroll to Top Dynamic Plugin by Matt Varone! It is a good UX design especially when you have a lengthy website and it is very easy to use.

Fig 1: Screen shot 

STEP 1: DOWNLOAD FILE

You may download file by clicking this link or manually download it by visiting Matt Varone's website

STEP 2: INCLUDE JAVASCRIPT AND CSS FILES

STEP 3: ADD THE MAGIC WORDS

Easy right? Try it out!

Reference: UItoTop jQuery Plugin - Matt

Add ID to TR using Datatables

I find datatables for sorting of table very useful. (See datatables.net) It has live search and very flexible with customization. In my project, I tried to insert a new row by using the following sytax:

var myTable = $('#result_table').dataTable( );
var checkbox = 
var edit = Edit

$('#result_table').dataTable().fnAddData( [
     $('#add_division_name').val(),
     checkbox,
     edit
] );                          

But the problem is since the insertion is automated, I could not insert an ID for TR on the fly. So here's the solution I got:

// Get the settings of the table
var oSettings = $('#result_table').dataTable().fnSettings();       
// Count the rows, server side data
var rows = data.count;
// Insert the server side id
oSettings.aoData[rows].nTr.id = 'tr-' + data.id; 

I tried counting the hidden and shown rows so the counting of rows will be made front end by using the :hidden selector, but my codes doesn't seem to work. Looks like I have to stick to server side counting of rows.

Passing data to jquery ui-dialog

I've always thought that passing of data to a dialog box in jquery is impossible. The only way to do this would mean setting a value to global variable and accessing it when ready. This post proves me wrong while browsing at stackoverflow.

jQuery provides a method which store data for you, no need to use a dummy attribute or to find workaround to your problem. Bind the click event:

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

And your dialog:

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});