CODEWITHSUNDEEP
jqueryajax
Dan w
Dan w

Reputation: 151

allow more than one ajax form submission

Basically, this is loading more results from the database and putting them on the page. Problem is, once the form submits once, it doesn't seem to allow the submission a 2nd, 3rd, etc. time.

html:

<div class="network-load-more">
    <div class="load-form">
        <form class="network-load-more-form" method="POST" action="javascript:void(0)">
            <input type="hidden" name="load_number" value="1">
            <input type="submit" value="LOAD MORE">
        </form>
    </div>
</div>

js:

$(".network-load-more-form").submit(function(submit) {
    submit.preventDefault();
    $.ajax({
       type: "POST",
       url: "/dev/new/scripts/network_updates_load_more.php",
       data: $(this).serialize(),
       datatype: 'json',
       cache: false,
       success: function(forminfo){
        $.each(forminfo.network_videos, function(name,value) {
            $(".network-videos").append('<div class="network-video-row"><div class="network-user-avatar"><img src="' + value.profile_url + '" width="77px" height="auto"><br/>' + value.first_name +'</div><div class="network-user-video-thumb"><img src="' + value.video_url + '" width="77px" height="auto"></div><div class="network-video-title">' + value.video_title + '<div class="network-video-date">' + value.upload_date + '</div></div></div>').fadeIn(1000);
        });
        $(".load-form").remove();
        $(".network-load-more").append('<div class="load-form"><div class="network-load-more"><form class="network-load-more-form" method="POST" action="javascript:void(0)"><input type="hidden" name="load_number" value="' + forminfo.new_loader + '"><input type="submit" value="LOAD MORE"></form></div></div>');
       },
       error: function(){
        alert("failed to load more");
       }
     });
 });

network_updates_load_more.php:

<?php
header('Content-Type: application/json');
require('config.php');
require('checklogin.php');

$load_number = $_POST['load_number'];
$new_load_number = ($load_number + 1);

$loader = (($load_number*10) + 1);

$mysqlicon = mysqli_connect($db_host, $db_username, $db_password, $db_name);
$videos_array = array(
    'new_loader' => $new_load_number,
    'network_videos' => array()
);

//network videos
$get_network_videos = mysqli_query($mysqlicon, "SELECT videoTopics.ID, videoTopics.userID, videoTopics.uploadDate, videoTopics.videoURL, videoTopics.videoTitle, videoTopics.numberPlays, users.firstName, users.profileVideoURL FROM videoTopics JOIN users ON users.id=videoTopics.userID WHERE broadcastType='Public' ORDER BY uploadDate DESC LIMIT $loader,10");
while ($network_videos_row = mysqli_fetch_array($get_network_videos)) {

    $videos = array(
        'video_id' => $network_videos_row['ID'],
        'network_user_id' => $network_videos_row['userID'],
        'upload_date' => date("F j, Y, g:i a", strtotime($network_videos_row['uploadDate'])),
        'video_url' => $network_videos_row['videoURL'],
        'video_title' => stripslashes($network_videos_row['videoTitle']),
        'number_plays' => $network_videos_row['numberPlays'],
        'first_name' => $network_videos_row['firstName'],
        'profile_url' => $network_videos_row['profileVideoURL'],
        'new_load_number' => $new_load_number
    );

    array_push($videos_array['network_videos'], $videos);
}

echo json_encode($videos_array);

mysqli_close($mysqlicon);
?>

Upvotes: 0

Views: 113

Answers (2)

Łukasz
Łukasz

Reputation: 331

After ajax you remove and append form again so you need delegeted event.

Replace:

$(".network-load-more-form").submit(function(submit) {

with

$("body").on("submit", ".network-load-more-form", function(submit) {

Edit:

You can replace $("body") with $(".network-load-more") for better performance.

Upvotes: 2

Uptown Apps
Uptown Apps

Reputation: 707

I don't know what the rest of your HTML/JS looks like, but this looks suspicious to me.

$(".load-form").remove();

Upvotes: 1

Related Questions