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?

INSERT data from append script

I have a problem.
here is my php & HTML:
<?php
if ($_POST['btn_tambah'] == 'tambah') {
$sub_lapangan = $_POST['sub_lapangan'];
$SQL = "SELECT AUTO_INCREMENT as IDLapangan FROM information_schema.tables WHERE TABLE_SCHEMA = 'ta' AND TABLE_NAME = 'lapangan';";
$res = mysql_query($SQL, $link);
$row = mysql_fetch_object($res);
$tambah1 = mysql_query("INSERT INTO sub_lapangan(nama,status,id_lapangan) VALUES('".$sub_lapangan."',1,$row->IDLapangan);");
}
?>
<HTML><BODY>
<div class="row">
<div class="form-group" id="sub_lapangan">
<div class="col-lg-3"><label>Nama Sub-Lapangan :</label></div>
<div class="col-lg-2">
<input type="text" name="sub_lapangan" class="form-control" required>
</div>
<div class="col-lg-1">
<a onclick="tambahSubBaru()" class ="btn btn-info"> <i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div id="sembunyisub">
</div>
</BODY></HTML>
Here is my script:
var count = 0;
function tambahSubBaru() {
count += 1;
if (count > 15) {
alert("Maksimal Untuk Tambah Sub Lapangan adalah 15 Sub Lapangan");
}
else {
$('#sembunyisub').append(
'<div class="row" id="barisbarusub' + count + '">'
+ '<div class="form-group">'
+ '<div class="col-lg-3">'
+ '</div>'
+ '<div class="col-lg-2">'
+ '<input id="subku' + count + '" type="text" class="form-control" name="sub_lapangan" required>'
+ '</div>'
+ '<div class="col-lg-1">'
+ '<a class ="btn btn-warning" onclick="hapusSub(' + count + ')"> <i class="fa fa-trash"></i></a>'
+ '</div>'
+ '</div>'
+ '</div>'
);
}
}
function hapusSub(row) {
$('#barisbarusub' + row).remove();
}
Here is the pic:
So the scenario is, when i click the "plus" button, it will show up the second textbox. I want to insert them into database. but when i try to insert, the SECOND textbox is succedded to insert in database. but the FIRST textbox doesn't insert to database.
How can i insert the FIRST textbox?
to show up the second textbox, i use .append in javascript.
help me please. I aprreciated the answer. many thank you. :)

You have to loop through your fields in PHP. Therefore you have to create an Array-input-element with [] after the name.
HTML:
<input type="text" name="sub_lapangan[]" class="form-control" required> <!-- Add [] to your field name for creating an Array-->
JS:
+ '<input id="subku' + count + '" type="text" class="form-control" name="sub_lapangan[]" required>' //The same in you dynamic input field
PHP: Loop through you fields (Array)
if ($_POST['btn_tambah'] == 'tambah') {
$sub_lapangan = $_POST['sub_lapangan'];
$SQL = "SELECT AUTO_INCREMENT as IDLapangan FROM information_schema.tables WHERE TABLE_SCHEMA = 'ta' AND TABLE_NAME = 'lapangan';";
$res = mysql_query($SQL, $link);
$row = mysql_fetch_object($res);
$fields = $_POST['sub_lapangan']; //Your Array
foreach($fields as $field => $value) {
$tambah1 = mysql_query("INSERT INTO sub_lapangan(nama,status,id_lapangan) VALUES('".$value."',1,$row->IDLapangan);");
}
}

Try this:
'INSERT INTO sub_lapangan(nama,status,id_lapangan) VALUES("'.$sub_lapangan.'","1","'.$row->IDLapangan.'")'

jquery multiple select list update failed

In my php project I have a multiple select dropdown and I'm using jquery.multiple.select.js.
My view part is
<div class="form-outer box">
<div class="span12 ">
<label>Partner</label>
<select class="span9 check_select " name="partner[]" id="partner" multiple="multiple" >
<!--<option value="-1">Select</option>-->
<?php foreach ($member as $memberpart) : ?>
<option value="<?php echo $memberpart->members_id; ?>">
<?php echo $memberpart->members_first_name; ?>
</option>
<?php endforeach; ?>
</select>
<a href="#paradd" class="btn" role="button" onclick="clear_message()" data-toggle="modal">
<i class="icon-plus pull-right" style="margin-top:5px;"></i>
</a>
</div>
</div>
Here I have a PLUS button (<a> tag) which opens a modal to add new partner. Now I want to update the multiple select dropdown when a new partner is added using the modal and I call a function when modal is closed as follows,
function bulid_select_box(select_box,path,doselect){
var base_url = $("meta[name=baseurl]").attr("content");
$.ajax({
url: base_url + path,
success: function(data) {
var json = jQuery.parseJSON(data);
$(select_box).find('option').remove();
$(select_box).append('<option value="-1">Select</option>');
var setselect = '';
if(doselect){
setselect = 'selected';
}
for(var i=0; i < json.length; i++){
if((json.length -1)== i){
$(select_box).append('<option ' + setselect + ' value="' + json[i].value + '">' + json[i].option + '</option>');
}else{
$(select_box).append('<option value="' + json[i].value + '">' + json[i].option + '</option>');
}
}
$(select_box).trigger("chosen:updated");
$(select_box).data('chosen').activate_action();
bulid_select_trigger(select_box);
}
});
}
When using this the new value does not get inserted in the list, but when I am inspecting the values shows in the <select> tag its style is display="none".
The actual list shows in a <div> with class=ms-drop with <li> tags.
I think the list is not updated when am using
$(select_box).trigger("chosen:updated");
What am to do to update the list?

If you are using this library the way to refresh the list is
$select.append($opt).multipleSelect("refresh");

Detecting if selected item is in a datalist

I have a bit of JQuery that I am trying to use to detect if the value that is in a data list select box is actually in the list, here is what i have.
<div class='form-row'>
<div class='col-xs-12 form-group required' style="margin-top: -2px; margin-bottom: 0px;">
<h2>
<label class='control-label' style="font-size: 20px;">
Product code
</label>
</h2>
<input required id="ItemSelect" list=jobs style='font-size:21px;height: 40px;' class='form-control' name="Code">
<datalist id="jobs">
<?php
foreach ($this->Products as $a) {
$inputValue = " " . htmlentities($a["Code"] . " | " . $a["Name"]) . " ";
echo '<option>' . $inputValue;
}
?>
</datalist>
</div>
$('#submit').on('click', function (e) {
var datalistval = $('#ItemSelect').val();
console.log(datalistval);
console.log($("#ItemSelect option[value='" + datalistval + "']").length)
if ($("#ItemSelect option[value='" + datalistval + "']").val() === undefined) {
console.log("not there");
} else {
console.log(" there");
}
});
currently with this if i enter a value that is not in the list it comes back as no there, but it also comes back as not there if i do select one out of the list.
Here out the outputs of the console.logs
console.log(datalistval); // X01A172 | Sub Assembly 2
console.log($("#ItemSelect option[value='" + datalistval + "']").length) // 0
not there

Website does not work when moving the files to another server?

![enter image description here][1]I'm trying to troubleshoot this problem. I created a basic asp page with Javascript in one server which works fine at the moment but when I move the asp page and all the related files to the new server it does not work. What my asp page does is ask for last or first name in text box and it has button which after it is press it returns all the matches with contact info. from Microsoft Access database.
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- JQuery Library used so that phone_dir.js can use JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title>Corporate Phone Directory</title>
</head>
<body bgcolor="#FFFFFF" link="#003399">
<br>
<br>
<div style="font-size: 16px; font-family: Arial; color:#D6D6D6;">
<table width="745" height="81" border="0" align="left" bordercolor="#003399">
<tr>
<td width="300" height="50" align="left" valign="top">
<div align="left" valign="bottom">
Search by either First or Last Name:
<br>
<br>
<input name="Search" type="text" id="Search" value="">
<input name="btnFind2" type="button" id="btnFind2" value="Find" onClick="searchphonedirectory()">
</div>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div style="font-size: 16px; font-family: Arial; color:#D6D6D6;" align="left" id='results'>
<!-- Your results will go here -->
</div>
</body>
</html>
Javascript :
$(document).ready(function()
{
$( "#Search" ).keypress(function()
{
if(event.keyCode==13)
{
$("#btnFind2").click();
}; // End of If key code = Enter function
});
});
function searchphonedirectory()
{
var searchentry = document.getElementById('search').value;
if (window.XMLHttpRequest)
{
xmlhttp2=new XMLHttpRequest();
}
else
{
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange=function()
{
if (xmlhttp2.readyState==4)
{
document.getElementById("results").innerHTML = xmlhttp2.responseText;
}
}
xmlhttp2.open("GET","phoneResults.asp?searchentry="+searchentry,true);
xmlhttp2.send();
};
Other Code which generates the results.
<!--#include file="ASPFiles/phoneDirectory.asp" -->
<%
response.expires=-1
err.clear
on error resume next
'*----------------------------------------------------------------
searchentry = request.querystring("searchentry")
'*----------------------------------------------------------------
sql = "SELECT PhoneDirectory.Name, PhoneDirectory.[Phone#], PhoneDirectory.OfficeExtension,
PhoneDirectory.[Mobile#] "
sql = sql +"FROM PhoneDirectory "
sql = sql +"WHERE (PhoneDirectory.LastName Like '" & searchentry & "%' OR
PhoneDirectory.FirstName Like '" & searchentry & "%' ) "
sql = sql + "ORDER BY LASTNAME,FIRSTNAME"
set rs=Server.CreateObject("ADODB.Recordset")
rs.Open sql,conn
'response.write(sql)
response.write("<table>")
response.write("<td width='22%' align='left' height='29'>Name</th>")
response.write("<td width='11%' align='left' >Phone</th>")
response.write("<td width='1%' align='left' >Ext</th>")
response.write("<td width='12%' align='left' >Mobile</th>")
response.write("</tr>")
do until rs.EOF
response.write("<tr>")
for each x in rs.Fields
response.write("<td align='left' >" & x.value & "</td>")
next
rs.MoveNext
response.write("</tr>")
loop
response.write("</table>")
%>
This one opens the database:
<%
' FileName="Connection_odbc_conn_dsn.htm"
' Type="ADO"
' DesigntimeType="ADO"
' HTTP="true"
' Catalog=""
' Schema=""
'Dim MM_phoneDirectory_STRING
'MM_phoneDirectory_STRING = "dsn=PhoneDB;"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
'TESTING DB
conn.Open(Server.Mappath("/webs/corporatenet2/databases/Phone_Directory.mdb"))
%>

First thing is you missed to mention the event" in keypress event and remove the searchphonedirectory() function from HTML input "onClick",
<input name="btnFind2" type="button" id="btnFind2" value="Find">
Add it to your javascript code like this.
$( "#Search" ).keypress(function(event)
{
if(event.keyCode==13)
{
searchphonedirectory();
}; // End of If key code = Enter function
}); //End of Search Keypress Function
hope it helps.

This may not be an answer, but it will certainly help you in the right direction, if the problem is ASP based.
On the root of your web server (\inetpub\wwwroot), create a folder called errors. In that folder create a file called error.asp and paste the following into it...
<%Option Explicit%>
<%
dim LOGON_USER
LOGON_USER = UCASE(Request.ServerVariables ("LOGON_USER"))
PATH = request.ServerVariables("PATH_TRANSLATED")
Const lngMaxFormBytes = 2000
Dim objASPError, blnErrorWritten, strServername, strServerIP, strRemoteIP
Dim strMethod, lngPos, datNow, strQueryString, strURL,PATH
Dim arrError,i
If Response.Buffer Then
Response.Clear
Response.Status = "500 Internal Server Error"
Response.ContentType = "text/html"
Response.Expires = 0
End If
Set objASPError = Server.GetLastError
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>eDischarge encountered an error...</title>
<meta http-equiv="Content-Type" content="text-html; charset=Windows-1252">
<link href="includes\stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
html {
font-family: Arial, Helvetica, sans-serif;
}
html body {
font-family: Arial, Helvetica, sans-serif;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #330000;
margin: 0;
padding: 0;
}
p {
font-size: 90%;
}
.errortitle {
font-family: Arial, Helvetica, sans-serif;
color: white;
font-size: 150%;
font-weight: bold;
width: 100%;
background-color: #770000;
padding: 1em;
}
.errorbody {
padding: 2em;
background: url(http://stas35/errors/images/error.gif) no-repeat top left;
}
.errormessage {
border-left: 10px solid #770000;
padding: 0 0 0 1em;
margin-left: 2em;
color: #770000;
}
.errorpadleft {
padding-left: 2em;
}
-->
</style>
</head>
<%
strError = strError & "<p><strong>Error Type:</strong></p>"
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(objASPError.Category) & "</p>"
If objASPError.ASPCode > "" Then
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(", " & objASPError.ASPCode) & "</p>"
end if
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(" (0x" & Hex(objASPError.Number) & ")" ) & "</p>"
If objASPError.ASPDescription > "" Then
strError = strError & Server.HTMLEncode(objASPError.ASPDescription) & "<br/>"
elseIF (objASPError.Description > "") Then
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(objASPError.Description) & "</p>"
end if
blnErrorWritten = False
' Only show the Source if it is available and the request is from the same machine as IIS
If objASPError.Source > "" Then
strServername = LCase(Request.ServerVariables("SERVER_NAME"))
strServerIP = Request.ServerVariables("LOCAL_ADDR")
strRemoteIP = Request.ServerVariables("REMOTE_ADDR")
If (strServername = "localhost" Or strServerIP = strRemoteIP) And objASPError.File <> "?" Then
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(objASPError.File)
If objASPError.Line > 0 Then
strError = strError & ", line " & objASPError.Line
end if
If objASPError.Column > 0 Then
strError = strError & ", column " & objASPError.Column
end if
strError = strError & "</p>"
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(objASPError.Source) & "</p>"
If objASPError.Column > 0 Then strError = strError & "<p class=""errorpadleft"">" & String((objASPError.Column - 1), "-") & "</p>"
blnErrorWritten = True
End If
End If
If Not blnErrorWritten And objASPError.File <> "?" Then
strError =strError & "<p class=""errorpadleft"">" & Server.HTMLEncode( objASPError.File)
If objASPError.Line > 0 Then
strError =strError & Server.HTMLEncode(", line " & objASPError.Line)
end if
If objASPError.Column > 0 Then
strError =strError & ", column " & objASPError.Column
end if
strError = strError & "</p>"
End If
strError = strError & "<p><strong>Browser Type:</strong></p>"
strError = strError & "<p class=""errorpadleft"">" & Server.HTMLEncode(Request.ServerVariables("HTTP_USER_AGENT")) & "</p>"
strMethod = Request.ServerVariables("REQUEST_METHOD")
If strMethod = "POST" Then
strError =strError & "<p class=""errorpadleft"">POST Data: (" & Request.TotalBytes & " bytes "
If lngPos > 1 Then strError =strError & "?" & Server.HTMLEncode(Left(Request.QueryString, (lngPos - 1)))
strError =strError & ")</p>"
arrError = split(Request.Form,"&")
For i = LBound(arrError) To UBound(arrError)
strError =strError & "<p>" & Server.HTMLEncode(arrError(i)) & "</p>"
Next
End If
strError = strError & _
"<p>" & _
"<strong>User Logon: </strong>" & LOGON_USER & "<br/>" & _
"<strong>User IP: </strong>" & Request.ServerVariables ("REMOTE_ADDR") & "<strong><br/>" & _
"Time: </strong>" & Now() & _
"</p>"
SendMail email_from,email_to,system_name &" 500-100 Error " & LOGON_USER,"<HTML>" & PATH & "<BR><BR>" & replace(strError,"%2F","/") & "</HTML>" ,2
%>
<body>
<div class="errortitle">Your system has encountered an error...</div>
<div class="errorbody">
<div class="errormessage"><%=strError%></div>
</div>
</body>
</html>
Now, in IIS, navigate to the Custom Erros section and scroll down to the 500 error. Edit... this error and select URL as the Message Type. In the URL box, beneath, type /errors/error.asp (remember that the folder should be on the root of your web server [this is usually <drive>\Inetpub\wwwroot] - if you choose to put it elsewhere then this won't work until you resolve the path).
Now try running your pages again and see if you get any ASP error messages. Your page should be redirected to the error.asp page if there is an error.
(Let me know if there are any errors with the code above - I had to mod it on the fly and haven't had chance to test it).