We Keep Coding

Editing data with jQuery in modal won't work

I'm currently working on something to store matches/events in a database. I like to note that this is my first use of jQuery. Everything is pretty much done, expect this problem.
I use PHP to create a list of teams. When a 'team' is selected, the matches of that team are loaded into div "display". Every match has a id, title, date and time field.
<?php
// show_overview.php
$event_info = mysqli_query($conn, "SELECT e.match_id, e.title, e.date, e.starttime
FROM matches AS e
WHERE e.team_id = '$team' AND e.date >= CURDATE()
ORDER BY e.date asc;");
foreach($event_info as $row) {
$events[] = array('match_id' => $row['match_id'], 'title' => stripslashes($row['title']), 'date' => $row['date'], 'starttime' => $row['starttime']);
}
$data['events'] = $events;
echo json_encode($data);
?>
Here we have the body of the page. In the dropdown box you can select your team.
<!-- BEGIN MATCHES -->
<div class="form-group row">
<label for="team-matchlist" class="col-sm-8 col-md-7 col-form-label">Kies van welk team je de wedstrijden wilt zien:</label>
<div class="col-sm-2 col-md-3 mb-5">
<select class="form-control" id="team-matchlist" name="team-matchlist">
<?php
// Create a list of teams to select the matches. This is loaded in the header. The list is correctly showing.
// $teams = mysqli_query($conn,"SELECT * FROM teams ORDER BY team;");
if ($hierarchy_session >= 3):
while($team = mysqli_fetch_assoc($teams)):
echo '<option value="' . $team['team_id'] . '">' . $team['team'] . '</option>';
endwhile;
mysqli_data_seek($teams, 0);
else:
echo '<option value="' . $team_id_session . '">' . $teamname_session . '</option>';
endif;
?>
</select>
</div>
<!-- Here is the match data loaded -->
<div id="display" class="container"></div>
</div>
</div>
<!-- END MATCHES -->
In are the matches loaded. There are two buttons created for editing a match. It won't connect the data to the modal. I can't get my head around it. I think it's a binding problem, but I can't make it to work.
If I use php directly to export the data, it works. But when I load the data in jQuery. It won't load the data in the body of the modal.
I looked at bind, but I couldn't make that work. I hope someone can make me look in the right direction. I tried to make the code as little as possible.
$(document).ready(function() {
// BEGIN SHOW MATCHES
// Create a list of all the matches from database
// When a team is selected
$("#team-matchlist").change(function () {
var team = $(this).val();
$.ajax({
url: "show_overview.php",
type: "POST",
dataType: "json",
data: {
team: team
},
success: function(response) {
var i;
var display = document.getElementById("display");
if (response.events.length > 0) {
display.innerHTML = "";
var user_hierarchy = '<?php echo $hierarchy_session;?>';
var user_team = '<?php echo $team_id_session;?>';
for (i = 0; i<response.events.length; i++) {
display.innerHTML += (
"<form method='post' class='mb-5 text-md-right'>" +
"<div class='form-group row'>" +
"<label for='firstname' class='col-sm-4 col-md-3 col-form-label'>Titel</label>" +
"<div class='col-sm-8 col-md-9'>" +
"<input type='text' class='form-control' id='etitle-" + response.events[i].match_id + "' name='title' value='" + response.events[i].title + "'>" +
"</div>"+
"</div>"+
"<div class='form-group row'>" +
"<label for='lastname' class='col-sm-4 col-md-3 col-form-label'>Datum</label>" +
"<div class='col-sm-8 col-md-9'>" +
"<input type='date' class='form-control' id='edate-" + response.events[i].match_id + "' name='date' value='" + response.events[i].date + "'>" +
"</div>"+
"</div>"+
"<div class='form-group row'>" +
"<label for='lastname' class='col-sm-4 col-md-3 col-form-label'>Starttijd</label>" +
"<div class='col-sm-8 col-md-9'>" +
"<input type='time' class='form-control' id='estarttime-" + response.events[i].match_id + "' name='starttime' value='" + response.events[i].starttime + "'>" +
"</div>"+
"</div>"+
// Here is the button for editing the match
"<div class='form-group btn-group'>"+
"<button type='button' id='edit_match-" + response.events[i].match_id + "' class='btn btn-primary edit-match' data-toggle='modal' data-target='#modal-edit_match'>" +
"Wijzigen" +
"</button>" +
"</div>"+
"<hr/>"+
"</form>"
);
}
} else {
display.innerHTML = "Er zijn geen wedstrijden voor dit team.";
}
}
});
}).change();
// Show info for confirmation in modal
$('.edit-match').on("click", function() {
var itemID = $(this).attr("id");
var split = itemID.split("-");
var id = split[1];
var title = $("#etitle-"+id).val();
var date = $("#edate-"+id).val();
var starttime = $("#estarttime-"+id).val();
var elem_id = document.getElementById("edit_match");
var title_id = document.getElementById("modal-title-edit_match");
var body_id = document.getElementById("modal-body-edit_match");
var date = new Date(date + "T" + starttime);
const date_options = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'};
const time_options = { hour: 'numeric', minute: 'numeric' };
var datestring = date.toLocaleDateString('nl-NL', date_options);
var timestring = date.toLocaleTimeString('nl-NL', time_options);
title_id.innerHTML = "Wedstrijd wijzigen";
body_id.innerHTML = "Titel: " + title +
"<br>Datum: " + datestring +
"<br>Starttijd: " + timestring +
"<br><br>Weet u zeker dat u deze wedstrijd wilt wijzigen?";
$(".edit_match").attr("id", "edit_match-" + id);
});
});
</script>
The confirmation is not applied in the modal.
Below we have the modal. The modal is loaded. Only the javascript is not applied to the modal. It remains empty.
<!-- BEGIN MODALS -->
<!-- Modal after clicking on edit match -->
<div class="modal fade" id="modal-edit_match" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title-edit_match">Wedstrijd wijzigen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Sluiten">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modal-body-edit_match">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" name="edit_match" id="edit_match" class="btn btn-primary edit_match">Wijzigen</button>
</div>
</div>
</div>
</div>
<!-- END MODALS -->
Does anyone have any ideas?

AJAX in 000webhost

I am having problem with AJAX in 000webhost. The output for AJAX is not displaying. Also, there is no error in the Console when I inspected.
This is my website link:
https://cwp-geoworld.000webhostapp.com/
The AJAX part is working fine with localhost and it can display the list of continents in the sidebar as well as a table in the middle of the page when the sidebar is clicked.
Example of how it should look like is here:
https://drive.google.com/open?id=1Tn5hQXepA--o4LTqBc_DzjeZ17yz830Z
Here are the codes for the index.php which contains the AJAX code:
<?php
include("control.php");
//require_once( "classes/session.class.php" );
$username = Session::getInstance()->getProperty("username");
$userRole = Session::getInstance()->getProperty("userRole");
require_once( "classes/PDOConnection.class.php" );
//header('Content-type: application/json');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GeoWorld | Home</title>
<!--Icon at the tab-->
<link rel="icon" type="image/png" href="images/globe_icon.png"/>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="template/other_pages/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="template/other_pages/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="template/other_pages/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="template/other_pages/dist/css/AdminLTE.min.css">
<!-- Skins -->
<link rel="stylesheet" href="template/other_pages/dist/css/skins/skin-purple.css">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<!--WRAPPER-->
<div class="wrapper">
<!-- Main Header -->
<header class='main-header'>
<!-- Logo -->
<a href='index.php' class='logo'>
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class='logo-mini'><i class='fa fa-globe'></i><b>Geo</b></span>
<!-- logo for regular state and mobile devices -->
<span class='logo-lg'><b>Geo</b>World</span>
</a>
<!-- Header Navbar -->
<nav class='navbar navbar-static-top' role='navigation'>
<!-- Sidebar toggle button-->
<a href='#' class='sidebar-toggle' data-toggle='push-menu' role='button'>
<span class='sr-only'>Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!--Include Conditions for Navbar-->
<?php include ('include/navbar.php'); ?>
</ul>
</div>
</nav>
</header>
<!--Include Sidebar-->
<?php include ('include/sidebar.php'); ?>
<!-- CONTENT WRAPPER -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 align='center'>
Welcome to GeoWorld
</h1>
</section>
<!-- Main content -->
<section class="content container-fluid">
<!-- search form (Optional) -->
<div id="searchTextBox">
<div class="input-group">
<input type="text" id='search' name="search_country" maxlength=3 class="form-control" placeholder="Search for a country here...">
<span class="input-group-btn">
<button type="submit" id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</div><!-- /.search form -->
<br/>
<div class="searchResults"></div><br/>
<div class="box-body">
<div id="records"></div>
</div>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
</div><!-- ./wrapper -->
<!-- Modal for show more details about country -->
<div class="modal fade" id="countryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">More details about the country</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
<!-- Modal for show details about city -->
<div class="modal fade" id="cityModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">City details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
<!-- Modal to update HOS -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- Modal to upload flag -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Upload Flag</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
</body>
</html>
<!-- REQUIRED JS SCRIPTS -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- jQuery 3 -->
<script src="template/other_pages/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="template/other_pages/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="template/other_pages/dist/js/adminlte.min.js"></script>
<!--script for displaying continents and countries records-->
<script type="text/javascript">
$(document).ready(function(){
//$('#searchTextBox').hide();
$('.records').hide();
$("input[name='search_country']").on('keypress', function (e) {
var charCode = e.which;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8)
return true;
else
return false;
});
});
$(function()
{
$.getJSON( "showAllContinents.php", function(obj)
{
$.each(obj, function(key, value)
{
var sidebarOption = "";
//sidebarOption = '<input type="hidden" value="showAllContinents" name="action"/>';
sidebarOption += '<li>';
sidebarOption += '<a data-id="'+value.ID+'" class="sidebar-country">';
sidebarOption += value.Name;
sidebarOption += '</a>';
sidebarOption += '</li>';
$(".treeview-menu").append(sidebarOption);
});
});//end of $.getJSON function
$("#options_continent").change(function() {
getCountryRecords($(this).val());
});//end of option function
$(document).on('click', '.sidebar-country', function() {
getCountryRecords($(this).attr('data-id'));
});
//to show LifeExpectancy, GNP and HOS when button is clicked
$("#records").on("click", "#tbl_countries button#more_details",function()
{
$(".modal-body").empty();
var A3Code = $(this).val();
$(".records").show();
$.get(
'showCountryDetails.php',
{A3Code: A3Code},
function(data)
{
console.log(data);
//var result= $.parseJSON(data);
//console.log(result);
var string ='<table id="tbl_countries" class="table table-bordered table-hover"><tr><th>Life Expectancy</th><th>GNP</th><th>Head of State</th></tr>';
$.each( data, function( key, value )
{
$(".records").empty();
string += "<tr>"
+"<td>"+value['LifeExpectancy'] +"</td>"
+"<td>"+value['GNP']+"</td>"
+"<td>"+value['HeadOfState']+"</td>"
+"</tr>";
});
string += '</table>';
$(".modal-body").append(string);
} //end of function data
); //end of get
});//end of click button
//to show city details when button is clicked
$("#records").on("click", "#tbl_countries button#city_details",function()
{
$(".modal-body").empty();
var A3Code = $(this).val();
$(".records").show();
$.get(
'showCityDetails.php',
{A3Code: A3Code},
function(data)
{
var string ='<table id="tbl_countries" class="table table-bordered table-hover"><tr><th>City Name</th><th>District</th><th>Population</th><th>Latitude</th><th>Longitude</th></tr>';
$.each( data, function( key, value )
{
$(".records").empty();
string += "<tr>"
+"<td>"+value['name'] +"</td>"
+"<td>"+value['district']+"</td>"
+"<td>"+value['population']+"</td>"
+"<td>"+value['lat']+"</td>"
+"<td>"+value['lng']+"</td>"
+"</tr>";
});
string += '</table>';
//$(".records").append(string);
$(".modal-body").append(string);
} //end of function data
); //end of get
});//end of click button
//to update HOS modal box
$("#records").on("click", "button#update_HOS",function()
{
$(".modal-body").empty();
var A3Code = $(this).val();
$(".records").show();
$.get(
'showCountryDetails.php',
{A3Code: A3Code},
function(data)
{
console.log(data);
var forms='';
$.each( data, function( key, value )
{
forms +='<form id="updateForm" name="updateForm" action="updateHOS.php" method="post">';
forms +='<div class="form-group">';
forms +='<input type="hidden" id="A3Code" name="A3Code" value='+value["A3Code"]+'>';
forms +='<label class="control-label">HOS:</label>';
forms +='<input type="text" class="form-control" id="hos" name="hos" value='+value['HeadOfState']+'>';
forms +='</div>';
forms += '<div class="form-group">';
forms += '<input type="submit" class="btn-success" id="updateBtn" name="updateBtn" value="Update">';
forms +='</div>';
forms +='</form>';
});
$(".modal-body").append(forms);
} //end of function data
); //end of get
});//end of click button */
//to show upload flag modal box
$("#records").on("click", "button#upload_flag",function()
{
$("#uploadModal .modal-body").empty();
var A3Code = $(this).val();
$(".records").show();
$.get(
'showCountryDetails.php',
{A3Code: A3Code},
function(data)
{
console.log(data);
var uploadForm='';
$.each( data, function( key, value )
{
uploadForm +='<form id="uploadFlagForm" name="uploadFlagForm" action="upload_flag.php" method="post" enctype="multipart/form-data">';
uploadForm +='<div class="form-group" align="center">';
uploadForm +='<input type="hidden" id="A3Code" name="A3Code" value='+value["A3Code"]+'>';
uploadForm +='<input type="file" name="fileToUpload" id="fileToUpload">';
uploadForm +='</div>';
uploadForm += '<div class="form-group" align="center">';
uploadForm += '<button type="submit" class="btn btn-primary" id="uploadBtn" name="uploadBtn">Upload Flag</button>';
uploadForm +='</div>';
uploadForm +='</form>';
});
$("#uploadModal .modal-body").append(uploadForm);
} //end of function data
); //end of get
});//end of click button
//To get country records
function getCountryRecords(id) {
$.ajax
({
url: 'showCountryInfo.php',
type: 'post',
data: {ID:id},
success:function(response)
{
var userRole = "<?php echo $userRole; ?>";
var string = "";
//string += '<input type="hidden" value="showCountryInfo" name="action"/>';
string += '<table id="tbl_countries" class="table table-bordered table-hover">';
string += '<tr>';
string += '<th>Flag</th>';
string += '<th>Country Name</th>';
string += '<th width=200px>Region</th>';
string += '<th>Surface Area</th>';
string += '<th>Population</th>';
string += '<th width=150px>Independent Year</th>';
string += '<th width=100px>City Details</th>';
if (userRole === "admin")
{
string += '<th width=100px>More Details</th>';
string += '<th width=100px>Update Details</td>';
string += '<th width=100px>Upload Flag</td>';
}
string += '</tr>';
/* from result create a string of data and append to the div */
$.each( response, function( key, value )
{
//var base64URL = "";
$("#records").empty();
string += "<tr>";
//string += "<td><img src='"+value['image']+"'/></td>";
//string += "<td><img src='data:image/png;base64, "+base64URL+"'/></td>";
string += "<td>"+"<button class='btn btn-block btn-default btn-sm' id='btnView' name='btnView' type='submit' data-id='" + value['A3Code'] + "'>View</button>" + "</td>";
//string += "<td>"+"<button class='btn btn-block btn-default btn-sm' id='btnView' name='btnView' type='submit' value='" + value['A3Code'] + "'>View</button>" + "</td>";
string += "<td>"+value['Name']+"</td>";
string += "<td>"+value['Region']+"</td>";
string += "<td>"+value['SurfaceArea']+"</td>";
string += "<td>"+value['Population']+"</td>";
string += "<td>"+value['IndepYear']+"</td>";
string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
if (userRole === "admin")
{
string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-edit'></i></button>" + "</td>";
string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-flag'></i></button>" + "</td>";
}
string += "</tr>";
});
string += '</table>';
$("#records").append(string);
}
});
}
/*$(document).on('click', '#btnView', function(){
window.location.href = "view_flag.php";
});*/
$(document).on('click', '#btnView', function(){
var value = $(this).attr('data-id');
window.location.href = "view_flag.php?A3Code=" + value;
});
/*//For view flag function
$("#btnView").on('click', function(e) {
window.location.href = "view_flag.php";
});*/
/*$("#view_flag").on("click",function()
{
window.location.href = "view_flag.php";
});*/
//For search country function
$("#search-btn").on("click", function ()
{
if(document.getElementById("search").value.length < 3)
{
alert("The characters MUST NOT be less than 3!");
return false;
}
$("#records").empty();
$(".records").empty();
$('.searchResults').empty();
var searchCountry = $("#search").val();
$.get(
'searchCountryInfo.php',
{id: searchCountry}, //left->sql id ,right->script id
function (data)
{
if (!$.trim(data)){
alert("No country with that name is found!");
return false;
}
var userRole = "<?php echo $userRole; ?>";
var string = "";
//string += '<input type="hidden" value="searchCountryInfo" name="action"/>';
string += '<table id="tbl_countries" class="table table-bordered table-hover">';
string += '<tr>';
string += '<th>Flag</th>';
string += '<th>Country Name</th>';
string += '<th width=200px>Region</th>';
string += '<th>Surface Area</th>';
string += '<th>Population</th>';
string += '<th width=150px>Independent Year</th>';
string += '<th width=100px>City Details</th>';
if (userRole === "admin")
{
string += '<th width=100px>More Details</th>';
string += '<th width=100px>Update Details</td>';
string += '<th width=100px>Upload Flag</td>';
}
string += '</tr>';
// var base64URL = getBase64(data[0]['image']);
// console.log(base64URL);
/* from result create a string of data and append to the div */
$.each( data, function( key, value )
{
$("#records").empty();
string += "<tr>";
//string += "<td>"+"<img src='data:image/png;base64,base64_encode("+value['image']+")"+"'/>"+"</td>";
//string += "<td>"+"<img src='data:image/jpeg;base64, "+base64URL+"'/></td>";
string += "<td>"+"<button class='btn btn-block btn-default btn-sm' id='btnView' name='btnView' type='submit' data-id='" + value['A3Code'] + "'>View</button>" + "</td>"; string += "<td>"+value['Name']+"</td>";
string += "<td>"+value['Region']+"</td>";
string += "<td>"+value['SurfaceArea']+"</td>";
string += "<td>"+value['Population']+"</td>";
string += "<td>"+value['IndepYear']+"</td>";
string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
if (userRole === "admin")
{
string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-edit'></i></button>" + "</td>";
string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-flag'></i></button>" + "</td>";
}
string += "</tr>";
});
string += '</table>';
$("#records").append(string);
}
);
}); // end of search function
}); //end of big function
</script>
Your help will be really appreciated. Thank you.

How to add multiple image in opencart 2.3

I have creating a option call small. In that option i want to add multiple image. My query is how can i assign a name for hidden text
Here i have already did one functionality in addOptionValue function create button
function addOptionValue(option_row)
{
some code here
html += ' <td class="text-right" id="multi-image'+ option_value_row +'"><img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /><input type="hidden" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][image_option][' + option_value_row + '][inner_image]" value="" id="input-image' + option_value_row + '" /><button id="add-image'+option_value_row+'" type="button" onclick="addOptionImage('+option_value_row+');" data-toggle="tooltip" title="<?php echo $button_option_value_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>';
}
<script>
var image_row = <?php echo $image_row; ?>;
function addOptionImage(image_row)
{
var html = '<img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" />';
html +='<input type="hidden" name="product_option[' + image_row + '][product_option_value][' + image_row + '][image_option][' + image_row + '][inner_image]" value="" id="input-image' + image_value_row + '" />';
$('#multi-image'+image_row+'').append(html);
image_row++;
}
</script>
Here how can i store this multiple images? please help me in this.

I have creating a same module in Opencart 2.3.
Please see my following code:
<script>
var image_row = <?php echo $image_row; ?>;
var image_rows = "";
function addOptionImage(option_value_row,image_row)
{
var child = $(".multi_image"+image_row).length;
var html = '<div class="row text-center"><img src="<?php echo $placeholder; ?>" alt="" title="" style="width: 50px;" data-placeholder="<?php echo $placeholder; ?>" /> ';
html +='<input type="hidden" name="product_option[' + option_value_row + '][product_option_value][' + image_row + '][image_option][' + child + '][inner_image]" value="" id="input-image'+ image_row +'' + image_row + '' + child + '" class="multi_image'+image_row+'" />';
html += '<button type="button" onclick="$(this).tooltip(\'destroy\');$(\'#thumb-image'+ image_row +''+ image_row +'' + child + '\').remove();$(\'#input-image'+ image_row +''+ image_row +'' + child + '\').remove();$(\'#btn-remove'+ image_row +''+ image_row +'' + child + '\').remove();" data-toggle="tooltip" rel="tooltip" title="Remove" class="btn btn-danger" id="btn-remove'+ image_row +'' + image_row +''+ child + '"><i class="fa fa-minus-circle"></i></button></div>';
$('#multi-image'+image_row+'').append(html);
// console.log(image_row);
image_row++;
image_rows++;
}
//console.log(image_rows);
</script>
And use imploded and explode to store the image value in database.

On dropdown search not able to generate pop

#{
ViewBag.Title = "iifl_conference";
Layout = "/Views/Shared/_ConferenceLayout.cshtml";
}
#model IIFLWeb.Models.Parents.EventsParent
#section Conference
{
<div class="search-ac-list">
#Html.DropDownList("ddlSpeaker", Model.lstSpeakerData, "Select Speaker", new { #onchange = "GetSearchedSpeakerData(this)", #class = "select2" })
</div>
}
The Main issue is that I am not able to generate pop up in search
function GetSearchedSpeakerData(val) {
var selectedSpeaker = val.value;
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: {"name": selectedSpeaker },
success: function (result) {
var SpeakData = '';
$.each(result, function (i, val) {
var SpeakerName = '';
SpeakData += ' <li>';
SpeakData += '<a href="#SpeakerPopup" onclick="GetSelectedSpeakerData(\'' + val.Name + '\');" data-effect="mfp-zoom-in" id="SpeakerDetails" class="open-popup-link popup-block">';
SpeakData += '<div class="height240">';
SpeakData += '<div class="circle-img">';
if(val.Name=="Panel Discussions")
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="Panel Discussions "/>';
}
else
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="'+val.Name+'"/>';
}
SpeakData += '</div>';
SpeakData += '<h4>'+val.Title +'</h4>';
SpeakData += '<label class="speaker-date">';
SpeakData += +val.TimeSlot + ", " + val.Venue + " at "+val.SpeakerDate ;
SpeakData += ' </label>';
SpeakData += '</div>';
SpeakData += '<div class="speaker-bx">';
SpeakData += '<h3 id="SpeakerName">' + val.Name + '</h3>';
SpeakData += '<h4>' + val.Designation + '</h4>';
SpeakData += '</div>';
SpeakData += '</a>';
SpeakData += '</li>';
});
$("#UlProfileList ").empty();
$("#UlProfileList").append(SpeakData);
}
});
}
I am getting name from dropdownlist and from Ajax function name called GetSearchedSpeakerData(val) and I get that particular div
Now OnClick of that particular Div Need to generate Popup, for that I am using another Ajax function name called GetSelectedSpeakerData(val) , This function is create so that on select of the particular div I get "name" value on that name value is and popup is created form ajax function GetSelectedSpeakerData(val)..
function GetSelectedSpeakerData(val) {
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: { "name": val },
success: function (result) {
var SpeakData = '';
var Speaktopic='';
var Speaktab='';
$.each(result, function (i, val) {
var SpeakerName = '' ;
SpeakData += ' <div class="col-sm-3">';
SpeakData += ' <div class="circle-img">';
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/'+ val.ImageUrl+ ' " alt=" '+val.Name+ '"/>';
SpeakData += '</div>';
SpeakData += '</div>';
SpeakData += '<div class="col-sm-9">';
if(val.Name=="Panel Discussions")
{
SpeakData += '<h3>Panel Discussion</h3>';
}
else
{
SpeakData += '<h3>'+val.Name+'</h3>';
}
SpeakData += '<h5>'+val.Designation+'</h5>';
SpeakData += '<h4>' + val.Title + '</h4>';
if(#Html.Raw(Json.Encode(ViewBag.IsVenue)) == true)
{
SpeakData += '<label class="speaker-date"> ( ' + val.SpeakerDate + ", " + val.TimeSlot + " at " + val.Venue + ')</label>';
}
SpeakData +='</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane active" id="Tab1-1">' + val.Description + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-2">' + val.CompanyDesc + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-3">';
Speaktopic += '<h4>' + val.Title + '</h4>';
Speaktopic += val.Topic +'</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-4">';
Speaktopic += '<video controls class="VideoPlayer">';
Speaktopic +='<source src="http://www.iiflcap.com/IPad/Conference/Videos/2017/'+val.VideoUrl+'" type="video/mp4"></video></div>';
if (val.Description != "")
{
Speaktab += '<li role="presentation" class="active">';
Speaktab +=' Profile';
Speaktab +=' </li>';
}
if (val.CompanyDesc != "")
{
Speaktab +='<li role="presentation" >';
Speaktab +=' Company';
Speaktab +=' </li>';
}
if(val.Topic != "")
{
Speaktab +=' <li role="presentation">';
Speaktab +='Topic</li>';
Speaktab +='</li>';
}
if(val.VideoUrl != "")
{
Speaktab +=' <li role="presentation">';
Speaktab += 'Video</li>';
Speaktab += '</li>';
}
});
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
}
});
}
I can see on the brower the popup div called div is named as #SpeakerPopup
But I cannot see the Popup up
<div id="SpeakerPopup" class="white-popup mfp-with-anim mfp-hide">
<div id = "Details" class="row">
<div class="col-sm-3">
<div class="circle-img">
<img src="resources/images/speakers/1.jpg"/>
</div>
</div>
<div class="col-sm-9">
<h3>Dr. Jim Walker</h3>
<h5>Renowned economist, Founder and Managing Director, Asianomic</h5>
<h4>"World War Three"</h4>
<label class="speaker-date">(Tuesday, 21 February, 8:30am at Golconda)</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul id="Menutabs" class="nav nav-tabs Border-0 popuptabs" role="tablist">
<li role="presentation">Profile</li>
<li role="presentation" class="active">Company</li>
<li role="presentation">Topic</li>
<li role="presentation">Video</li>
</ul>
<div id="Tabcontent" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Tab1-1">
<p>hello </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-2">
<p>HEllo</p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-3">
<h4>"World War Three"</h4>
<p>hi </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-4">tttddd
</div>
</div>
</div>
</div>
</div>

This is purely css issue. I see mfp-hide class on popup - div#SpeakerPopup which basically might be having some property display:none in CSS. So what I would suggest is, Just add $("#SpeakerPopup").show() at the end of GetSelectedSpeakerData(val) ajax-success. Also you can just replace below lines
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
with just
$("#Details").html(SpeakData);
$("#Tabcontent").html(Speaktopic);
$("#Menutabs").html(Speaktab);
and at the end of these you can add $("#SpeakerPopup").show().
PS - Seems like you've been using twitter-bootstrap framework for responsive design. If so, you can try using bootstrap-modals to achieve this elegantly.
Hope this helps.

How to implement checkValidity() in forms?

I don't know why checkValidity() method is not checking if my input is true or false. My program said that checkValidity() is not a function... My program was working but the checkValidity() debug my program.
I tried to make a program that adds data in tables and checks that the input is valid or invalid. Every time you click the process button, data gets added to a table and the reset will erase the input and clears the table.
My professor familiarize me in using the checkValidity() method to ensure the input is valid. I don't know if my program has an error or the browser does not support the checkValidity method?
I use latest version of Chrome. Can Everyone check my code if there's an error and teach me how to implement checkValidity method?
<!DOCTYPE html>
<html lang="en">
<head><title>Sales Person</title>
<!-- Latest compiled CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<form name="myform" onsubmit="validateForm return false;">
<div class="row">
<div class="form-group">
<label for="name">Sales Person:</label>
<input type="text" id = "name" placeholder="Enter Your Name" required><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 1:</label>
<input type="number" id = "product1" placeholder="Enter Product 1"><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 2:</label>
<input type="number" id = "product2" placeholder="Enter Product 2" ><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 3:</label>
<input type="number" id = "product3" placeholder="Enter Product 3" ><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 4:</label>
<input type="number" id = "product4" placeholder="Enter Product 4" ><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 5:</label>
<input type="number" id = "product5" placeholder="Enter Product 5" ><br/>
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="submit" class="btn btn-default" onclick="Process()" value="Submit">
</div>
<div class="col-md-3">
<input type="reset" class="btn btn-default" onclick="erase()" value="Reset">
</div>
</form>
</div>
<div class="col-md-8" id="sales_table">
</div>
</div>
</div>
<script>
"use strict";
var table = "";
var table_header = "";
var table_body = "";
var table_footer = "";
table_header += "<table class= table table-bordered>";
table_header += "<tr>";
table_header += "<th class='text-center'>Name</th>";
table_header += "<th class='text-center'>Product 1</th>";
table_header += "<th class='text-center'>Product 2</th>";
table_header += "<th class='text-center'>Product 3</th>";
table_header += "<th class='text-center'>Product 4</th>";
table_header += "<th class='text-center'>Product 5</th>";
table_header += "<th class='text-center'>Total Sale Product</th>";
table_header += "<th class='text-center'>Commissions</th>";
table_header += "<tr>";
table_footer += "</table>";
function Process()
{
var sales_table = document.getElementById("sales_table").value;
var name=document.getElementById("name").value;
var product1=parseInt(document.getElementById("product1").value);
var product2=parseInt(document.getElementById("product2").value);
var product3=parseInt(document.getElementById("product3").value);
var product4=parseInt(document.getElementById("product4").value);
var product5=parseInt(document.getElementById("product5").value);
var sales_table = document.getElementById("sales_table");
var total;
var commissions;
if(isValid(name,product1,product2,product3,product4,product5)){
total = product1+product2+product3+product4+product5;
commissions = total * .30;
table_body += "<tr>";
table_body += "<td>"+name+"</td>";
table_body += "<td class='text-center'>" + product1.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product2.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product3.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product4.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product5.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + total.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + commissions.toFixed(2) + "</td>";
table_body += "</tr>";
table = table_header + table_body + table_footer;
sales_table.innerHTML = table;
}
}
function isValid (name,product1,product2,product3,product4,product5) {
try{
if(name.checkValidity==false){
throw name.validationMessage
}
if(product1.checkValidity==false){
throw product1.validationMessage
}
if(product2.checkValidity==false){
throw product2.validationMessage
}
if(product3.checkValidity==false){
throw product3.validationMessage
}
if(product4.checkValidity==false){
throw product4.validationMessage
}
if(product5.checkValidity==false){
throw product5.validationMessage
}
}
catch(err){
alert(err);
return false;
}
return true;
}
function erase()
{
document.getElementById("name").value="";
document.getElementById("product1").value="";
document.getElementById("product2").value="";
document.getElementById("product3").value="";
document.getElementById("product4").value="";
document.getElementById("product5").value="";
document.getElementById("sales_table").innerHTML="";
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

It looks like checkValidity is a method added in the HTML5 specification for input fields: Constraints validation.
You need to keep the reference of the input element, not the value itself:
var name=document.getElementById("name");
var product1=document.getElementById("product1");
var product2=document.getElementById("product2");
var product3=document.getElementById("product3");
var product4=document.getElementById("product4");
var product5=document.getElementById("product5");
Then, you can invoke the checkValidity method later on in your isValid function ;)
if (!name.checkValidity()) {
throw name.validationMessage;
}
// etc.
And you need to adapt the content of your if statement:
total = parseInt(product1.value) + parseInt(product2.value) + parseInt(product3.value) + parseInt(product4.value) + parseInt(product5.value);
commissions = total * .30;
table_body += "<tr>";
table_body += "<td>"+name.value+"</td>";
table_body += "<td class='text-center'>" + parseInt(product1.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product2.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product3.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product4.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product5.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + total.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + commissions.toFixed(2) + "</td>";
table_body += "</tr>";

checkValidity is a method.
Normaly you call methods with () at the end like> method().
e.g. for product3 product3.checkValidity()==false