JavaScript to open PHP file without Colorbox?

Question

I'm a newbie in JavaScript. I have managed to write this script which opens 3 pages using Colorbox. Now I want the one with the id iframe2 not to open with Colorbox but to simply open the respective PHP file without Colorbox.

<script>

$(document).ready(function()
        {
            $(".iframe").colorbox({iframe:true, width:"700px", height:"80%"});
            $(".iframe2").colorbox({iframe:true, width:"700px", height:"90%"});
            $(".iframe3").colorbox({iframe:true, width:"300px", height:"20%", onLoad: function() {
                $('#cboxClose').remove();
            }});


        });

</script>

<script type="text/javascript" language="javascript" class="init">
    $(document).ready(function() {
        var table = $('#example').DataTable( {
            "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": "<input type='image' src='delete.png' id='button' >"
            },

            {
                "targets": -2,
                "data": null,
                "defaultContent": "<input type='image' src='edit.png' id='button' >"
            },

            {
                "targets": -3,
                "data": null,
                "defaultContent": "<input type='image' src='edit.png' id='button'>"
            }



             ],
            "order": [[ 0, "desc" ]]
        } );



        $('#example tbody').on( 'click', 'input', function () { 
            var data = table.row( $(this).parents('tr') ).data();
            $.post( "record.php", { name: data[0] } );
            $(".iframe").colorbox({href:"session_edit.php?ID="+data[0]});

            $(".iframe2").colorbox({href:"record_dt.php?ID="+data[0]});

            $(".iframe3").colorbox({href:"delete.php?ID="+data[0]});

        });


    } );
    </script> 

How can I adjust iframe2 call to open "record_dt.php?ID="+data[0] without Colorbox? Of course I still need data[0] since this is a value derived from datatable.

Answer 1

First, stop it from being associated with Colorbox by removing these two separate lines:

$(".iframe2").colorbox({href:"record_dt.php?ID="+data[0]});
$(".iframe2").colorbox({iframe:true, width:"700px", height:"90%"});

Then add a click even to iframe2 that takes you to the desired page:

$(".iframe2").click(function() {
    location.href = "record_dt.php?ID="+data[0];
});

If iframe2 is a link, you could do this to set it's href attribute when the DOM is ready instead:

$(".iframe2").attr("href", "record_dt.php?ID="+data[0]);