Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with jQuery when fetching data using .load()

I have a table that when a row is clicked it sends the first 6 characters of that row (an ID) to a PHP page and loads the subsequent data into a div further down the page. The issue it seems is that once I click a row to load the div, The majority of the jQuery events stop working (.hover, .sortElements) these are attached to the original table. Is there anyone that would know a 'fix' or work around for this issue or is there something I am just missing.

<SCRIPT type='text/javascript'>
$(document).ready(function(){

$(".panel").hide();
$(".itemjobbutton").click(function(){
    $(".panel").slideToggle("200");
    return false;
});
var inverse = false;
$("#jobTable th").click(function(){
            var header = $(this),
                index = header.index();

            header
                .closest('table')
                .find('td')
                .filter(function(){
                    return $(this).index() === index;
                })
                .sortElements(function(a, b){

                    a = $(a).text();
                    b = $(b).text();

                    return (
                        isNaN(a) || isNaN(b) ?
                            a > b : +a > +b
                        ) ?
                            inverse ? -1 : 1 :
                            inverse ? 1 : -1;

                }, function(){
                    return this.parentNode;
                });

            inverse = !inverse;

        });

$('#jobTable tr').click(function(){
if($(this).index() != 0) {
    var thistext = $(this).text().substring(0,6);
    $("#joblistingDetail").load('jobview.php' , {jobID: thistext}).hide().slideDown('100');
    $("#jobTable tr").css("background", "#fff");
    $(this).closest('tr').css('background-color', '#C3D9FF');
}
});


});

$('#jobTable tr').hover(

function() {
    $(this).addClass('hover');
},
function() {
    $(this).removeClass('hover')
}
);

like image 974
craighandley Avatar asked Mar 15 '26 03:03

craighandley


1 Answers

Your jobview.php is more than likely including it's own version of jquery.js that is overriding the one on the parent page. Either remove it from jobview.php, or modify your .load to only pull in html from within a given selector such as

$("#joblistingDetail").load('jobview.php #target')

where #target is a selector selecting a specific container to pull in.

like image 102
Kevin B Avatar answered Mar 17 '26 16:03

Kevin B



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!