We Keep Coding

Editable table without using jquery plugins

I want to create a table with editable contents(using an "edit" button on each row), without the use of Bootstrap, or any other plugin.
I want to only use HTML,PHP,AJAX,JavaScript. Is this kind of task possible, and if so, can someone post some sample code or example?
SQL results work fine.
$sql_query = "SELECT User.user_id,User.name,User.surname,User.username,User.password,Role.role_name FROM User INNER JOIN Role ON User.role_id = Role.role_id";
$result = mysqli_query($conn, $sql_query);
$role_name = 'role_name';
while($rows = mysqli_fetch_array($result))
{ echo "<tr>";
echo "<td> $rows[$user_id]</td>";
echo "<td> $rows[$name]</td>";
echo "<td> $rows[$surname]</td>";
echo "<td> $rows[$username]</td>";
echo "<td> $rows[$password]</td>";
echo "<td> $rows[$role_name]</td>";
?>
<div id = "edit">
<td> <button type='button' id="<?php $rows[$user_id];?>" onclick="submit_id()"> Edit </button> </td>
</div>
<?php
}
echo "</table>"; ?>
<script>
function submit_id() {
var user_id = user_id.val();
$.ajax({
url:'reedit.php',
type: 'GET',
data: (user_id);
})
}
</script>
I want to have each edit button, to change only the row that it is aligned to.

I saw that you had jQuery at least..
I think this will help you a LOT:
<?php
$sql_query = "SELECT User.user_id,User.name,User.surname,User.username,User.password,Role.role_name FROM User INNER JOIN Role ON User.role_id = Role.role_id";
$result = mysqli_query($conn, $sql_query);
if(!$result) {
die(mysqli_error($conn));
}
$table_html = "<table id=\"usersTable\">";
while($rows = mysqli_fetch_array($result)) {
$table_html .= "<tr>";
$table_html .= "<td>" . $rows["user_id"] . "</td>";
$table_html .= "<td>" . $rows["name"] . "</td>";
$table_html .= "<td>" . $rows["surname"] . "</td>";
$table_html .= "<td>" . $rows["username"] . "</td>";
$table_html .= "<td>" . $rows["password"] . "</td>";
$table_html .= "<td>" . $rows["role_name"] . "</td>";
$table_html .= "<td><button type=\"button\" class=\"editBnt\">Edit</button></td>";
$table_html .= "</tr>";
}
$table_html .= "</table>";
echo $table_html;
?>
<script>
$(function() {
$("#usersTable").on("dblclick", "td td:not(:first-child) td:not(:last-child)", function() {
$(this).html("<input type=\"text\" class=\"form-control dynamicInput\" value=\""+$(this).text()+"\"></input>").children("input").focus();
$(this).on("change blur", "input.dynamicInput", function() {
$(this).parent("td").text($(this).val());
});
});
$("#usersTable").on("click", "button.editBnt", function() {
var row = $(this).parent().parent(),
user_data = {
user_id: row[0].cells[0].innerText,
name: row[0].cells[1].innerText,
surname: row[0].cells[2].innerText,
username: row[0].cells[3].innerText,
password: row[0].cells[4].innerText,
role_name: row[0].cells[5].innerText
};
alert("You can now save the data or do what ever you want here.. check your console.");
console.log(user_data);
});
});
</script>

you can use the content-editable attribute to make your cells editable
something like:
var rows = document.querySelectorAll("tr");
row.foreach(function() {
this.addEventListener('click', function() {
this.setAttribute('contenteditable','contenteditable');
});
});
You will want to put the click listener on your button instead of the row

Javascript form submit change action with attr attributes

I want to change the attribute action from my form in the goal to get the next page dynamically. In javascript, my variable action get the right 'value' but the page does not load still. It works fine if I return manually the right 'value', but it does not work when I use jQuery('#select_program').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(), to make it dynamically.
Here is my form (in php):
public function form_creation() {
$html = '<form id="search_projects" action="';
$html .= esc_url(get_bloginfo('url'));
$html .= '/" method="post">';
$html .= '<select id="select_langue" name="lg123" onchange="change_select(0, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('Language', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<select id="select_program" name="pg123" onchange="change_select(1, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('Program', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<select id="select_country" name="dst123" onchange="change_select(2, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('Country', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<select id="select_city" name="city123" onchange="change_select(3, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('City', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<input type="hidden" name="data123" value="';
$html .= htmlspecialchars(json_encode($this->backend_select_category));
$html .= '"/>';
$html .= '<button id="submit_project_list" type="submit">';
$html .= '<i class="fa fa-search" aria-hidden="true"></i>';
$html .= __('Search', 'mon-plugin');
$html .= '</button>';
$html .= '</form>';
return $html;
}
Here is my javascript:
jQuery('#search_projects').submit(function() {
var selection_value = [
jQuery('#select_langue').val(),
jQuery('#select_program').val(),
jQuery('#select_country').val(),
jQuery('#select_city').val()
];
var selection_display = [
jQuery('#select_langue').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(),
jQuery('#select_program').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(),
jQuery('#select_country').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(),
jQuery('#select_city').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase()
];
jQuery(this).attr('action', function() {
if (selection_value[1] !== 'nd') {
var action = selection_display[1];
if (selection_value[2] !== 'nd') {
action += selection_display[2];
if (selection_value[3] !== 'nd') {
action += selection_display[3];
}
}
} else {
var action = 'search_program';
}
return action;
});
});
Thank you for your help !

I solved the problem.
I realize when I do not change any select, the page changes like it should. But when I change just one select, the page does not load anymore.
I don't know why, but the problem comes from my hidden input in php. If I remove it, everything works.
Great.. but how can I send my data through this form to the other page so ?
Thank you in advance for your help !

Checking radios in pagination

I have some radio buttons generated dynamically and are already paginated. Am checking to see if all are checked but this works only for the first page of pagination but fails to work for the next pages.
When i disable the pagination this works so it only checks for the radio buttons in the first page of the pagination but not all checkboxes how do i imlplement to check for all checkboxes regardless of which page they are in pagination
This is my code which works for first page of pagination
$("input:radio").change(function() {
var all_answered = true;
$("input:radio").each(function(){
var name = $(this).attr("name");
if($("input:radio[name="+name+"]:checked").length == 0)
{
all_answered = false;
}
});
if(all_answered==true ){
alert("all checked");
}else {
alert("not all checked");
}
});
This is my php code that generates the radios:
<?php
$n=1;
foreach ($checks as $m => $check) {
$radioyes ="";
$radiono ="";
$item ="";
$radioyes .= '<input type="radio" name="'. $m.'" class="selected one" value="'.$m.'" >';
$radiono .= '<input type="radio" name="'. $m .'" class="not_selected one" value="'.$m.'">';
echo "<tr id='" . $m . "'>";
echo "<td>" . $n . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$radioyes."</td>";
echo "<td>".$radiono."</td>";
echo "<td>".$textinbox."</td>";
echo "</tr>";
$n++;
}
?>
I hve checked on This link but doesnt work.

You have to use '.on('change'...) for dynamically generated inputs
E.g :
$(document).on('change', 'input:radio', function() {
// Does some stuff
});

How to create a javascript widget to load recent posts from my wordpress site and display in other sites?

I have a WordPress site. I want to allow others to place a web widget in their website which grabs recent posts from my site and display title with a link to its page for each of my recent posts. I know that this is possible through using iframe. But this has no positive effect on my website SEO. I found a solution here to use JavaScript for similar purpose. But it used Python and JSON to load HTML from the original site in the main() function. I am not familiar with JSON and Python. Is there any solution that I can return my recent posts using PHP and put it in the main function?

I use SimplePie to get RSS feeds. This is the function I use.
function start_rss(){
$urls = array(
0 => 'http://ogmarketreport.com',
1 => 'http://petroriveroil.com/feed/'
);
$numberOfPosts = 10;
foreach ($urls as $key => $value) {
$url = $value;
$feed = new SimplePie();
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/cache/');
$feed->set_feed_url($url);
$feed->set_stupidly_fast(true);
$feed->init();
$feed->handle_content_type();
$blog_title = $feed->get_title();
$blog_title_url = '<div class="row" style="width: 100%; display: block;"><h2><?php $title; ?></h2></div>';
$blog_desc = $feed->get_description();
$html = "";
$x = $feed->get_items(0, $numberOfPosts);
$html .= '<div class="container" style="width: 100%; display: block;"><h2><a target="_blank" href="' .$feed->get_permalink() . '">' . $feed->get_title() . '</a></h2></div>';
if (count($x) == 0 ) {
$html .= '<article class="rss col-md-12">';
$html .= '<p class="danger">No Recent Posts.</p>';
$html .= '</article>';
} else {
foreach ($x as $item) {
$html .= '<article class="rss col-md-12">';
$html .= '<h4 class="title">';
$html .= '' .$item->get_title() . '' ;
$html .= '</h4>';
$html .= '<p>';
$html .= $item->get_description();
$html .= '</p>';
$html .= '<p><small>';
$html .= "Posted on ";
$html .= $item->get_date('j F Y | g:i a');
$html .= '</small></p>';
$html .= '</article>';
}
}
print_r($html);
}

jQuery ajax call to php process form page not returning success or error

I have a contact page with a HTML Form.
I use jQuery to validate the fields. Then use jQuery's .ajax() method to send the information to the php file that processes and sends out the email via the mail() method.
Inside the PHP File i have an IF statement that checks to see if a POST variable is set that way I can put all form processing on one page for multiple forms through out the website.
I get all variables and do another form field validation with PHP. Then I build out the HTML Email and it's headers.
If the PHP Validation is successful I then send the email via the mail() method. Then I check if the mail() method was successful and if so I send another "auto reply" email.
Inside of the IF statements that check to see if the mail() method was successful I echo a success or error message with json_encode().
When the user clicks the submit button on the form I have it set to return false so it stays on the same page and have a message displayed upon send success.
Both emails send successfully from the form. Except my .ajax() method does not receive the success or error message from the php files' json_encode().
I removed the return false in the jQuery .click and have tried a standard PHP echo inside the php IF statement that checks if the post isset() and I couldn't get it to print to the browser. nor does the json_encode print to the browser. However, when I put the PHP echo outside of the IF statement it printed just fine. Which confuses me because it obviously goes inside that if statement to send the email but won't echo. What am I doing wrong?
jQuery
$("#contactFormSubmit").click(function(){
// validate and process form here
// NAME VALIDATION
var name = $("input#nameField").val();
if (name == "") {
$("input#nameField").focus();
$("input#nameField").css("border","1px solid red");
alert("nameFieldError");
return false;
}
// EMAIL VALIDATION
var formEmail = $("input#emailField").val();
if (formEmail == "" || !validateEmail(formEmail)) {
$("input#emailField").focus();
$("input#emailField").css("border","1px solid red");
alert("emailFieldError");
return false;
}
// PHONE VALIDATION
var phone = $("input#phoneField").val();
var phoneReg = "/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/";
if (phone == "" || !isValidUSPhoneFormat(phone)) {
//alert("phone is wrong");
$("input#phoneField").focus();
$("input#phoneField").css("border","1px solid red");
alert("phoneFieldError");
return false;
}
var message = $("textarea#messageField").val();
var subject = $("#subjectField").val();
var dataString = 'name='+ name + '&email=' + formEmail + '&phone=' + phone + '&subject=' + subject + '&message=' + message + '&submitContactForm=1';
$.ajax({
type: "POST",
url: "process-form.php",
data: dataString,
dataType:"json",
success: function(response) {
if(response.status === "success") {
alert("success");
// do something with response.status or other data on success
} else if(response.status === "error") {
alert("error");
// do something with response.status or other data on error
}
},
error: function(xhr,errmsg) { alert(errmsg); }
});
return false;
});
PHP File
<?php
include "includes/functions.php";
if(isset($_POST['submitContactForm'])) {
$nextEventDay = getDay();
$eventToShow = "";
$dayToShow = "";
$dateToShow = "";
if ($nextEventDay == "Sunday" || $nextEventDay == "Monday" || $nextEventDay == "Tuesday" || $nextEventDay == "Wednesday" ||$nextEventDay == "Thursday" || $nextEventDay != "Friday" || $nextEventDay != "Saturday") {
$eventToShow = "thurEvent";
$dayToShow = "THU";
$dateToShow = getNextThursdayDate();
}
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$messageBody = $_POST['message'];
$sendTo = "xxxx#xxxx.com";
$confirmTo = $email;
//HTML EMAIL
$headers = "From: " . $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
//COMPANY EMAIL
$message5 = '<html><style type="text/css">table, td, tr, th{border:none !important;border-color:#111 !important;border-collapse:collapse;}a{color:#c92626 !important;}.title{color:#aaa;}</style><body style="background-color: #111;color:#ddd;border:2px solid #333;">';
$message5 .= '<table rules="all" style="background-color:#111;border:none !important;width:100%;" cellpadding="10" border="0">';
$message5 .= '<tr style="border:none;"><td style="border:none;padding:20px 0px !important;"><img src="images/logo.jpg" alt="Nightclub" style="display:block;margin:0 auto;min-width:260px;max-width:300px;width:50%;" width="260" /></td></tr>';
$message5 .= "<tr style='border:none;'><td style='border:none;'><img src='/images/" . $eventToShow . "-email-next-event.jpg' width='260' style='min-width:260px;max-width:1024px;width:100%;display:block;margin: 0 auto;' /></td></tr>";
$message5 .= "<tr style='border:none;background-color:#161616;'><td style='border:none;' class='title'><strong style='color:#aaa;'>Name:</strong> " . strip_tags($name) . "</td></tr>";
$message5 .= "<tr style='border:none;'><td style='border:none;' class='title' ><strong style='color:#aaa;'>Email:</strong> <span style='color:#c92626 !important;'>" . strip_tags($email) . "</span></td></tr>";
$message5 .= "<tr style='border:none;background-color:#161616;' ><td style='border:none;' class='title'><strong style='color:#aaa;'>Phone:</strong> <span style='color:#c92626 !important;'>" . strip_tags($phone) . "</span></td></tr>";
$message5 .= "<tr style='border:none;'><td style='border:none;' class='title'><strong style='color:#aaa;'>Subject:</strong> " . strip_tags($subject) . "</td></tr>";
$message5 .= "<tr style='border:none;background-color:#161616;' ><td style='border:none;' class='title'><strong style='color:#aaa;'>Message:</strong> " . strip_tags($messageBody) . "</td></tr>";
$message5 .= "<tr style='border:none;'><td style='border:none;'></td></tr>";
$message5 .= "</table>";
$message5 .= "</body></html>";
//CLIENT EMAIL
$areply = '<html><style type="text/css">table, td, tr, th {border:none !important;border-color:#111 !important;border-collapse:collapse;}a {color:#c92626 !important;}.title{color:#aaa;}#date a{color:#fff !important;text-decoration:none;}</style><body style="background-color: #111;color:#ddd;border:2px solid #333;">';
$areply .= "<table rules='all' style='background-color:#111;border:none !important;width:100%;' cellpadding='10' border='0'>";
$areply .= "<tr style='border:none;'><td style='border:none;padding:20px 0px !important;'><img src='images/logo.jpg' alt='Nightclub Ann Arbor' style='display:block;margin:0 auto;min-width:260px;max-width:300px;width:50%;' width='260' /></td></tr>";
$areply .= "<tr style='border:none;'><td style='border:none;'><img src='images/" . $eventToShow . "-email-next-event.jpg' width='260' style='min-width:260px;max-width:1024px;width:100%;display:block;margin: 0 auto;' /></td></tr>";
$areply .= "<tr style='border:none; background:#151515;'><td style='border:none;text-align:justify;background-color:#161616;'><div style='float:left;display:inline-block;background-color:#000;margin:0px 10px 10px 0px;font-size:197%; padding: 25px 30px;'><p id='date' style='margin:0;color:#fff !important;'> \r\n <strong>" . $dateToShow ."</strong></p><p style='margin:0;color:#c92626 !important;'>" . $dayToShow ."</p></div><p style='margin-top:10px;margin-right:15px;'>Thank you for contacting us at Nightclub . We look forward to assisting you. Below is the information that we recieved and we will be contacting you as soon as possible. Thank you again, and we look forward to speaking with you. If you have any additional questions please contact us at our website (<a href='' style='color:#c92626'></a>), give us a call <span style='color:#c92626 !important;'></span>, or send us an Email <span style='color:#c92626 !important;'></span></p></td></tr>";
$areply .= "<tr style='border:none;'><td style='border:none;' class='title'><strong style='color:#aaa;'>Name: </strong>" . strip_tags($name) . "</td></tr>";
$areply .= "<tr style='border:none; background-color:#161616 !important;' ><td style='border:none !important;background-color:#161616 !important;' class='title'><strong style='color:#aaa;'>Email:</strong> <span style='color:#c92626 !important;'>" . strip_tags($email) . "</span></td></tr>";
$areply .= "<tr style='border:none;'><td style='border:none;' class='title'><strong style='color:#aaa;'>Phone:</strong> <span style='color:#c92626 !important;'>" . strip_tags($phone) . "</span></td></tr>";
$areply .= "<tr style='border:none;background-color:#161616;' ><td style='border:none;' class='title'><strong style='color:#aaa;'>Subject:</strong> " . strip_tags($subject) . "</td></tr>";
$areply .= "<tr style='border:none;'><td style='border:none;' class='title'><strong style='color:#aaa;'>Message:</strong> " . strip_tags($messageBody) . "</td></tr>";
$areply .= "<tr style='border:none;'><td style='border:none;'></td></tr>";
$areply .= "</table>";
$areply .= "</body></html>";
$subject2 = "Thank you for your expressed interest ()";
$noreply = "xxx#xxx.com";
$headers2 = "From: " . $noreply . "\r\n";
$headers2 .= "MIME-Version: 1.0\r\n";
$headers2 .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (empty($name) || empty($email) || empty($phone) || !preg_match('/^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[#][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$/',$email) || !preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$phone)) {
echo json_encode(array(
'status' => 'error'
//'message'=> 'error message'
));
} else {
$send = mail($sendTo, $subject, $message5, $headers);
}
if($send){
echo json_encode(array(
'status' => 'success'
//'message'=> 'success message'
));
$send2 = mail($email, $subject2, $areply, $headers2);
} else {
echo json_encode(array(
'status' => 'error'
//'message'=> 'success message'
));
}
}
?>
UPDATE
I added the error call back to the jQuery ajax() method and found I was receiving the error I also removed everything from my PHP file except for the:
echo json_encode(array(
'status' => 'success'
//'message'=> 'success message'
));
And I still get the error message from the jQuery ajax() method. So it must be in my jQuery code... I think.

Ok, so thanks to the advice from #PatrickEvans and #MartyMcKeever above, I solved it by looking at the firebug console to find out that one of my custom PHP functions was missing a required argument. This was causing a parse error which was then making my jQuery throw an error but still allow the PHP to process the email.
If you look at the above PHP code there is a method that says $nextEventDay = getDay();
It should have been $nextEventDay = getDay("today");. This was causing all the problems
give #MartyMcKeever's comment an up vote.