What I see is NOT what I get

Question

(simplified) Scenario: a remote MySql DB and an HTML page with 2 buttons: SHOW and SELECT. The SHOW loads a single record and displays the fields in a form.

Everything is ok on this side.

The SELECT was made with a new approach for me:
I pass a parameter to a PHP function to query the DB and create an html file with the resuls.
This file is a series of <UL><LI><a id="1"...data..</LI></UL> to be inserted within a DIV.
One of the <LI> contains a link that, when clicked, calls the SHOW function. The record identification is made by mean of the ID associated to the anchor.

This procedure works fine; I get the new HTML segment (that I can check on the remote web server).
It is inserted (???) inside my DIV and the content is correctly displayed on screen, but... it does not exist.

Clicking on the links does not activate the SHOW procedure (actually, an Alert with the calling ID is never shown).
Looking to the html page source from Mozilla it still shows the previous content, without the new added (or replaced) code.

This is the reason for this post's title: I see something that really is not there.
Possibly, I should have AJAX to 'refresh' its visibility of the DOM, but and do not understand how.

This is the piece of JQuery script that I use to get the new content:

$("#select").click(function() { 
    $.ajax({ 
        url: "new_record_list.php",
        cache: false,
        success: 
            function(recNumber)
            {
                $("#selected").val(recNumber); //ok
                $("#recordList").load("list.txt"); //'list.txt is created by new_record_list.php
                alert($("#recordList").html()); //this is OK
            }
    });
});

Everything is ok, but where is the meat?

Answer 1

Since I'm unable to comment on your new post due to rep:

Remove the click event handler inside the loadRecord function.

The click event was already bound at the top of your script. What happens is that you click, activate the load record function which binds a new click handler, triggering the action on all the clicks following it.

The load record should look like this instead:

function loadRecord(){     
        ind = $(this).attr("id");
        $("#thisRecord").val(ind); //shows the clicked record

        $.get("show_record.php",{id:ind}, function(gotString) 
        {
            ptr=0; //used to fetch fields
            pos=0;
            lun = gotString.length;
            if (lun==0) {
                alert ("Empty string!");
                return false;
            };

// fetch received keys and values then fills the fields                                             
            while (ptr < lun) {
            ..... //not interesting here            
            }; //while

        });                                                                                 
        return false;   //required!

};

Also, you should replace

$(document).on('click', '.compLink', function() {
  loadRecord();
});

with

$(document).on('click', '.compLink', loadRecord);

And loadRecord will be passed the mouse event as an argument. $(this) will also refer to the link you clicked inside the loadrecord function. Otherwise you need to pass the element clicked into that function.

Answer 2

I followed the hints from Erin plus some other suggestion found on this forum and now the program ALMOST works.
Actually it does, but when a new set of records is loaded, to update the display (that is to call the loadRecord function) it is necessary to click twice on a link, the very first time only. All next clicks reacts immediately.

I try to post the entire script, for you experts to see what I hardly did:

<script type="text/javascript">
$(document).ready(function()
{
    $(document).foundation();

  var $scrollbar = $("#scrollbar1"); //other stuff
  $scrollbar.tinyscrollbar();

    //Erin suggestion + my understanding
    $(document).on('click', '.compLink', function() {
      loadRecord();
    });



/* =========== ADD Rows ============================== */
/* action called by hitting the "selectRow" button.
/* query the DB and get a list of rows (5 fields each)
/* that are then inserted into the '#recordList' DIV.
/* Each rows has format:
/* <UL><LI><A id="xxx" class="compLink" ...>item xxx</A></LI><LI>....</LI></UL>
*/

    $("#selectRow").on( "click",function()
     {
        $.ajax(
        { 
            url: "new_record_list.php",
            type: "GET",
            success: function(recNumber) //if ok, we get the number of records
            {
                $("#selectedRecords").val(recNumber);   //show how many records we got

                        $("#recordList").load("newRecords.txt"); //loads the remote text file into the DIV

                    }

            });

    }); 
/* ====================================================== */



/* =========== LOAD Record ============================== */
/* loads and displays an entire record from DB, 
/* based on the ID of clicked link with class="compLink"
/* in '#recordList' DIV.
/* Example: <a id="1" class="compLink" ...>
*/
 function loadRecord(){
    $(".compLink").click(function(event)  
        {           
            ind = $(this).attr("id");
            $("#thisRecord").val(ind); //shows the clicked record

            $.get("show_record.php",{id:ind}, function(gotString) 
            {
                ptr=0; //used to fetch fields
                pos=0;
                lun = gotString.length;
                if (lun==0) {
                    alert ("Empty string!");
                    return false;
                };

// fetch received keys and values then fills the fields                                             
                while (ptr < lun) {
                ..... //not interesting here            
                }; //while

            });                                                                                 
            return false;   //required!

        }); 
    };  
/* ====================================================== */




    return false;                              
});

</script>

I hope this is clear enough. Thanks

Answer 3

One issue I can see straight away is the AJAX call, it should be along the lines of:

$( "#select" ).on( "click", function ()
{
    $.ajax( {
        url: "new_record_list.php?record=MY_RECORD_VALUE",
        type: "GET",
        success: function ( response )
        {
            $( "#selected" ).val( response );
            $( "#recordList" ).html( function ()
            {
                $.ajax( {
                    url: "list.txt",
                    typ: "GET",
                    success: function ( response2 )
                    {
                        $( "#recordList" ).html( response2 );
                    }
                } );
            } );
            alert( $( "#recordList" ).val() );
        },
        beforeSend: function()
        {
            $( "#recordlist" ).html( "Loading..." );
            $( "#selected" ).val( "Loading..." );
        }
    } );
} );

This will give a better result from the $.ajax call that you have made.

The .load() method can be quite unreliable at times, hence why it is (IMO) better to make an ajax within an ajax, because that's what your doing with less control effectively.

Where you have done the function(recNumber) is kinda wrong I'm afraid, whats brought back from the AJAX call is the response, everything that would be shown should you be using it as an actual page, e.g. if you had:

    <table>
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
    </table>

    <input id="id_valued" value="2" />

Then this whole thing would be returned, not just the id_valued input field.

Answer 4

Most likely the listener you created did not attach to the new dom nodes. You can fix this by attaching a listener to a parent element that exists at page creation or even the document like so:

$(document).on('click', '.show', function() {
  //click event
});

Replace ".show" with the jquery selector for the links