'Event (table content editable) and send to PHP file to update my database
I try to enable edit the table content and try to send the changes to PHP file to update my database. My JavaScript works only for display the alphabets to other propose but when try to add another event it does not work .. as http request ..etc
NOW I am asking about why the JavaScript onblur and on click events are not working. Please help me.
filter.php
<?php @ob_start();
session_start();
include('database.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src='scripts/alphabet.js'></script>
</head>
<body>
<div class="content-side">
<?php
include("filter2.php");
?>
<button id="button-1" title="save" type="button" disabled>Save</button>
</div>
<div class="filter-sid">
<form action="filter.php" method="GET" name="filter" id="filter">
<label>Type :</label><br>
<inputtype="radio"/><label for="res1">...</label>
<input type="radio" checked/><label>...</label><br>
<lable>Letters :</lable>
<br><br>
</form>
</div>
</body>
</html>
My JavaScript file alphabet.js:
$(window).load(function () {
$('td[contenteditable=true]').blur(function () {
$(this).parent('tr').find('button').removeAttr('disabled');
});
//When a button is clicked find the nearest contenteditable td //element(s) and push their
$('button').click(function () {
var contents = $(this).parents().find('td[contenteditable=true]');
var contentArray = [];
for (i = 0; i < contents.length; i++) {
contentArray[i] = contents[i].innerHTML;
}
alert("work :) ");
//$.post("test.php", contentArray);
});
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
var container = document.getElementById("filter");
for (var i = 0; i < 26; i++) {
//alert("letter= "+alphabet[i]);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "alphabet" + i;
checkbox.value = "" + alphabet[i];
checkbox.id = "alphabet" + i;
checkbox.className = "alphabet" + i;
var label = document.createElement('label');
label.htmlFor = "id" + alphabet[i];
label.appendChild(document.createTextNode('' + alphabet[i]));
var br = document.createElement("br");
container.appendChild(checkbox);
container.appendChild(label);
container.appendChild(br);
}
;
var br2 = document.createElement("br");
container.appendChild(br2);
var filterBtn = document.createElement('input');
filterBtn.type = "submit";
filterBtn.value = "Apply Filter";
filterBtn.setAttribute("id", "filterbtn");
filterBtn.setAttribute("classname", "filterbtn");
filterBtn.setAttribute("class", "filterbtn");
//filterBtn.setAttribute("onclick","view()");
container.appendChild(filterBtn);
container.appendChild(br2);
container.appendChild(br2);
});
The table display in filter2.php:
<?php
//Sanitize the POST values
$type= $_GET['res'];
$data=array();
$alpha=array();
$j=0;
$k=0;
$letter="";
$keywords="";
//for ($r=$checked ;$r>0 ;$r--)
//$alpha[$j++] =$_GET['myArray'+$r];
for($y=0;$y<26;$y++){
if(isset($_GET['alphabet'.$y])){
$alpha[$j]= $_GET['alphabet'.$y];
$keywords .="alphabet".$y."=".$alpha[$j++]."&";
}
}
$con=$j;
while ($con>0){
$letter .="Publisher_Name like '".$alpha[--$con]."%' AND ";
} //letter as string
$keywords .="res=".$_GET['res'];//to add to link for pagination
$per_page = 14;
if ($j>0)
$pages_query = mysql_query("SELECT COUNT('Publisher_Name') FROM Publishers where " . $letter . " is_reported=1"); //get the number of contents); //get the number of contents
else
$pages_query = mysql_query("SELECT COUNT('Publisher_Name') FROM Publishers where is_reported=1"); //get the number of contents
$pages = ceil(mysql_result($pages_query, 0) / $per_page); // get the number of pages
$page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1;
$start = ($page - 1) * $per_page; //get the starting content id of each page
if ($j>0)
$query = mysql_query("SELECT * FROM Publishers where " . $letter . " is_reported=1 LIMIT $start, $per_page");
else
$query = mysql_query("SELECT * FROM Publishers where is_reported=1 LIMIT $start, $per_page");
//echo content of each page
if (($query)) {
$info1 = mysql_fetch_array($query);
(($info1 == null)) {
?>
<div id="result" >
<?php
echo '<p id="error"> No results found .</p> ';
?>
</div>
<?php
}
else if ($info1 != null) {
?>
<div id="result">
<?php
echo' <table cellpadding="2" width="100%">';
echo '<tr >';
echo '<td id="tds">Name p</td>';
echo '</tr>';
do{
echo '<tr>';
echo "<td contenteditable='true'>" . $info1['nemep'] . "</td>";
echo '</tr>';
}while($info1 = mysql_fetch_array( $query )) ;
echo' </table>';
?>
</div>
<?php
}
}//if query
$prev = $page - 1;
$next = $page + 1;
if (!($page <= 1)) {
echo "<a href='filter.php?page=$prev&$keywords'>Prev</a> ";
}
if ($pages >= 1 && $page <= $pages) {
for ($x = 1; $x <= $pages; $x++) {
echo ($x == $page) ? '<strong><a href="filter.php?page=' . $x . '&'.$keywords.'">' . $x . '</a></strong> ' : '<a href="filter.php?page=' . $x . '&'.$keywords.'">' . $x . '</a> ';
}
}
if (!($page >= $pages)) {
echo "<a href='filter.php?page=$next&$keywords'>Next</a>";
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
