Question

In my php page I got a jquery script to open a dialog window. The code is as

<script type="text/javascript">
            $(document).ready(function() {
                var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

                $('#data-specs a').each(function() {
                    var $dialog = $('<div></div>')
                        .append($loading.clone());

                    var $link = $(this).one('click', function() {
                        $dialog

                            .load($link.attr('href'))
                            .dialog({
                                title: '<?php echo $_GET["indQ"];?>',
                                modal: true,
                                width: 500,
                                height: 300,
                                minHeight: 300,
                                maxHeight: 600,
                                minWidth: 500,
                                maxWidth: 800
                                });

                            $link.click(function() {
                            $dialog.dialog('open');

                            return false;
                        });

                        return false;
                    });
                });

                $('#dav').val(getURLParameter('davQ'));

                $('#pathogen').val(getURLParameter('pathogenQ'));

                $('#topicF').val(getURLParameter('topicQ'));

                $('#ind').val(getURLParameter('indQ'));

                $('#subind').val(getURLParameter('subindQ'));

                $(".selfont").change(function (event) {
                        window.location = '?davQ=' + $('#dav').val() + '&pathogenQ=' + $('#pathogen').val() + '&topicQ=' + $('#topicF').val() + '&indQ=' + encodeURIComponent($('#ind').val()) + '&subindQ=' + encodeURIComponent($('#subind').val());
                });

                function getURLParameter(name) {
                         return decodeURIComponent((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]);
                }

            });
    </script>

The data is in a table with id=’data-specs’. And it works well. Recently I added a dropdown box with values to sort this table using an ajax script and it works too. But the problem is after this ajax call, when I click the link to open dialog window its getting opened in the parent window itself, if we press the browser back button and then click the link it will open the dialog window with no errors !! How can I make this correct even after the sort is done using ajax ? please gave me some solutions. My ajax code to sort is as shown below

function ajaxFunction(){

    //to keep selection in countryList - GP
    var ref = document.getElementById('countryRF');
    for(i=0; i<ref.options.length; i++)
    ref.options[i].selected = true;


    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            //document.myForm.time.value = ajaxRequest.responseText;
            document.getElementById("result").innerHTML=ajaxRequest.responseText

        }
    }

    var dav = document.getElementById('dav').value;
    var pathogen = document.getElementById('pathogen').value;
    var topicF = document.getElementById('topicF').value;
    var ind = document.getElementById('ind').value;
    var subind = document.getElementById('subind').value;
    var selObj = document.getElementById('countryRF');
    var cnty = loopSelected(selObj).join('~');  // join array into a string
    var sortby = document.getElementById('sortby').value;

    var queryString = "?dav=" + dav + "&pathogen=" + pathogen + "&topicF=" + topicF + "&ind=" + encodeURIComponent(ind) + "&subind=" + encodeURIComponent(subind) + "&cnty=" + encodeURIComponent(cnty) + "&sortby=" + sortby;
    ajaxRequest.open("GET", "sortbyD.php" + queryString, true);
    ajaxRequest.send(null);
    return false;
}

Please help me to slve this issue..

Answer 1

While the page is load first time the dialog box event are bound with element, After ajax you need to again bound the dialog box event with .bind() function