ajax html response can’t take effect on link with javascript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of ajax html response can’t take effect on link with javascript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I made a form for showing users informations about some presentations. I used ajax cause it should be loaded into a div container and not reloading each time while changing the year.

This is my JavaScript:

$("#select_coffee_talk_year").button().click(function() {
    var form = $('#coffee_talk_year');  
    var data = form.serialize();

    $.ajax({
        url: 'include/scripts/select_event.php',
        type: 'POST',
        data: data,
        dataType: 'html',
        success: function (select) {
            $("#coffee_talk").html(select);
            $("#coffee_talk").fadeIn();
        }   
    });
    return false;
});

This is my select_event.php:

if ('POST' == $_SERVER['REQUEST_METHOD']) {
    /*******************************/
    /** Erzaehlcafe auswählen
    /*******************************/
    if (isset($_POST['coffee_talk_year_submit'])) {
        $getID = array();
        $getDate = array();
        $getTheme = array();
        $getContributer = array();
        $getBegin = array();
        $getPlace = array();
        $getEntrance = array();
        $getFlyer = array();

        $sql = "SELECT 
                    ID,
                    Date,
                    Theme,
                    Contributer,
                    Begin,
                    Place,
                    Entrance,
                    Flyer
                FROM 
                    Coffee_talk
                WHERE
                    YEAR(Date) = '".mysqli_real_escape_string($db, $_POST['year_coffee_talk'])."'
                ORDER BY 
                    Date ASC
                ";

        if (!$result = $db->query($sql)) {
            return $db->error;
        }

        while ($row = $result->fetch_assoc()) {
            $getID[$i] = $row['ID'];
            $getDate[$i] = $row['Date'];
            $getTheme[$i] = $row['Theme'];
            $getContributer[$i] = $row['Contributer'];
            $getBegin[$i] = $row['Begin'];
            $getPlace[$i] = $row['Place'];
            $getEntrance[$i] = $row['Entrance'];
            $getFlyer[$i] = $row['Flyer'];
            $i++;
        }

        $result->close();

        /****************************/
        /**  Output der Tabelle
        /****************************/
        if ($getID[0] == '') {
            echo 'Kein Eintrag vorhanden';
        } else {
            //Kopf
            echo '<table id="table">    
                        <thead>
                            <tr id="table_head">
                                <th>Nr.</th>
                                <th>Datum</th>
                                <th>Thema</th>
                                <th>Referent</th>
                                <th>Begin</th>
                                <th>Ort</th>
                                <th>Eintritt</th>
                                <th>Flyer</th>
                                <th>Bearbeiten</th>
                            </tr>
                        </thead>
                        <tbody>';

            //Mittelteil
            $j = 0;
            for($i = 0; $i < count($getID); $i++) {
                $j = $i + 1;
                echo '<tr>
                    <td class="center">'.$j.'</td>
                    <td class="center">'.$getDate[$i].'</td>
                    <td class="center">'.$getTheme[$i].'</td>
                    <td class="center">'.$getContributer[$i].'</td>
                    <td class="center">'.$getBegin[$i].'</td>
                    <td class="center">'.$getPlace[$i].'</td>
                    <td class="center">'.$getEntrance[$i].'</td>';
                    if ($getFlyer[$i] == '') {
                        //Kein Bild vorhanden
                        echo '<td class="center">Kein Bild vorhanden</td>';
                    } else echo '<td class="center">'.$getFlyer[$i].'</td>';
                    echo '<td class="center">
                        <table id="icons">
                            <tr>
                                <td>
                                    <a href="#" data-event-id="'.$getID[$i].'" data-table="Coffee_talk" class="edit_event">
                                        <img src="images/edit.png" />
                                    </a>
                                </td>
                                <td>
                                    <a href="#" data-event-id="'.$getID[$i].'" data-table="Coffee_talk" class="delete_event">
                                        <img src="images/delete.png" />
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>';
            }

            //Ende
            echo '</tbody>
                    </table>';
        }
    }
}

As you can see my outpt is a table. I am using links to make an edit and delete function:

<a href="#" data-event-id="'.$getID[$i].'" data-table="Coffee_talk" class="edit_event">
    <img src="images/edit.png" />
</a>

and

<a href="#" data-event-id="'.$getID[$i].'" data-table="Coffee_talk" class="delete_event">
    <img src="images/delete.png" />
</a>

This is my html with the placeholder div:

<div>
    <p class="bold underline headline">Bereits eingetragen:</p>
    <form id="coffee_talk_year" action="include/scripts/select_event.php" method="post" accept-charset="utf-8"> 
        <select name="year_coffee_talk" id="year_coffee_talk">
            <option value="none" class="bold italic">Jahr</option>
            <?php
                for($i=2008; $i<=$year; $i++){
                    if ($i == $year) {
                        echo "<option value="".$i."" selected="$i">".$i."</option>n";
                    } else  echo "<option value="".$i."">".$i."</option>n";
                }   
            ?>
        </select>
        &nbsp;&nbsp;
        <button id="select_coffee_talk_year">anzeigen</button>
        <input type="hidden" name="coffee_talk_year_submit" value="true" />​​​​​​​​​​​​​​​​​
    </form>
    <br />
    <div id="coffee_talk"></div>
    <br />
    <button id="add_coffee_talk">hinzufügen</button>
</div>

Now I want to use this JavaScript to do a delete and edit function:

$(".delete_event").click(function() {
    alert('hallo');
    currentUserID = $(this).data("event-id");
    currentTable = $(this).data("table");
    $( "#dialog_delete_event" ).dialog( "open" );
});

$( '#dialog_delete_event' ).dialog({
    autoOpen: false,
    resizable: false,
    height: 170,
    modal: true,
    buttons: {
        'Ja': function() {
            document.location = "index.php?section=event_delete&id=" + currentUserID +"&table=" + currentTable;
            $( this ).dialog( 'close' );
        },
        'Nein': function() {
            $( this ).dialog( 'close' );
        }
    }
});

My problem is that the click_function (defined in the links) is not working. I Found out that the ajax form response is not written into the html code. Bet that this is the problem. What can I do to give the links a working click function?

Answer

im not sure due to your code’s size but this:

$(".delete_event").click(function() {

should be

$(".delete_event").live("click",function() {

because you dynamically create html; the “live” works with that.

We are here to answer your question about ajax html response can’t take effect on link with javascript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji