Question

I have an ajax request to load a table with filtered information.

For example:
Select an employee, hit “GO” to only see results for that employee.

The data filters properly.
The PHP shows in the file the ajax loads:

echo "<td><a href=\"creditcard.php?type=Edit&cc_id=".$cc_id."\" />Edit</a></td>";

After it loads the data, the DOM shows:

<td><a href="creditcard.php?type=Edit&cc_id=8"></a>Edit</td>

My AJAX call looks like:

$('#go').live('click', function(e){
        e.preventDefault();
        $(this).hide();
        $(".Results").hide();
        $(".loading").html("<p>Loading...</p>");
        var employee = $('.employee').val();
        var cardtype = $('.cardtype').val();
        var startdate = $('.startdate').val();
        var enddate = $('.enddate').val();
        dataString = "ajax_employee="+employee+"&ajax_cardtype="+cardtype+"&ajax_startdate="+startdate+"&ajax_enddate="+enddate;
        $.ajax({
            type: "POST",
            url: "includes/creditcardsearch.php",
            data: dataString,
            success: function(result){
                $('.Results').html(result);
            },
            complete: function() {
                $(".loading").html('');
                $('.Results').fadeIn('slow');
                $("#go").show();
            }
        });
    });

Does anybody have any idea why it’s doing this?

Answer 1

You have a self closing anchor tag

.$cc_id."\" />Edit</a>  
            ^----    Need to remove this Forward Slash

Change it to

.$cc_id."\" >Edit</a>

Because of the Extra closing tag , it interprets as the end of the element and pushing the text outside of the Anchor Tag