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 !

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);
}

Create HTML table from numbers elements of array [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have the variable $count that contains the total elements of my array.
I want to insert the html code to another variable that contains a table of as many lines as the lines of variable $count.
how can I do ?
<?php
$count=5;
$html="<table>
<tr>
<td></td>
<td></td>
</tr>
</table>"
?>

There are many possibilities to do this.
Use a loop:
$table = '<table>';
for ($i = 0; $i < $count; $i++) {
$table .= '<tr><td></td><td></td></tr>';
}
$table .= '</table>';
or you could use str_repeat
$table = '<table>';
$table .= str_repeat('<tr><td></td><td></td></tr>', $count);
$table .= '</table>';
or many others - depends on your needs

You can use this:
<?php
$count = 5;
?>
<table>
<?php for($i = 0; $i < $count; $i++) : ?>
<tr>
<td></td>
<td></td>
</tr>
<?php endfor; ?>
</table>

Not quite sure on the question (it's incredibly vague), but I'll try to help.
<?php
$count = 5;
$html = "<table>";
for($i=0;$i<$count;$i++){
$html .= "<tr><td>New Row!</td></tr>";
}
$html .= "</table>";
Use this for rows.
<?php
$count = 5;
$html = "<table><tr>";
for($i=0;$i<$count;$i++){
$html .= "<td>New column!</td>";
}
$html .= "</tr></table>";
Use this for columns.
Combine the two examples for a 100% dynamic table with dynamic rows and columns. If you've got an array, you'd be better off just using a foreach:
<?php
$array = array( array('Col1'=>'Val1', 'Col2'=>'Val2', 'Col3'=>'Val3'), array('Col1'=>'Test', 'Col2'=>'Test', 'Col3'=>'Test') );
$html = "<table>\n\t<tr>";
//Columns
foreach(array_key($array[0]) as $col){
$html .= "\n\t\t<td>{$col}</td>";
}
$html .= "\n\t</tr>";
//Rows
foreach($array as $row){
$html .= "\n\t<tr>";
foreach($row as $rowcol){
$html .= "\n\t\t<td>{$rowcol}</td>";
}
$html .= "\n</tr>";
}
$html .= "</table>";
Yes I'm a little OCD about the newlines and tabs.
If you can update your question with a use-case I can probably provide a better, more accurate example.

You can do it two ways. By using a foreach or a for/while cycle.
In my opinion you can go ahead and use the foreach to iterate your array().
<?php $array= array('blue', 1, 3, 'red', 'monkey'); ?>
<table>
<?php foreach($array as $value): ?>
<tr>
<td><?php echo $value ?></td>
</tr>';
<?php endforeach; ?>
</table>
?>
For me it's the cleaner way to iterate an array. If you just want to make multiple columns/rows on a table than use a for($i=0; $i<$count; i++) instead.

How to create mega dropdown menu dynamically using PHP?

I need to create mega drop down menu dynamically. I have created code but not able to display like this: http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html
I have studied other code but not helping me.
Below is my code:
$result = mysql_query("SELECT id, label, link, parent FROM menu ORDER BY parent, sort, label");
//Create a multidimensional array to conatin a list of items and parents
$menu = array(
'items' => array(),
'parents' => array()
);
//Builds the array lists with data from the menu table
while($items = mysql_fetch_assoc($result)) {
//Creates entry into items array with current menu item id ie. $menu['items'][1]
$menu['items'][$items['id']] = $items;
//Creates entry into parents array. Parents array contains a list of all items with children
$menu['parents'][$items['parent']][] = $items['id'];
}
//echo "<pre>"; print_r($menu);
//Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu) {
$html = "";
if(isset($menu['parents'][$parent])) {
$html .= "<ul id='mega-menu-9' class='mega-menu'>";
foreach($menu['parents'][$parent] as $itemId) {
if(!isset($menu['parents'][$itemId])) {
$html .= "<li><a href='Javascript: void(0);' class='arrow'><span><i class='fa fa-home'></i></span>".$menu['items'][$itemId]['label']."</a><li>";
}
if(isset($menu['parents'][$itemId])) {
$html .= "<li><a href='Javascript: void(0);' class='arrow'><span><i class='fa fa-home'></i></span>".$menu['items'][$itemId]['label']."</a>";
$html .= buildMenu($itemId, $menu);
$html .= "</li>";
}
}
$html .= "</ul> \n";
}
return $html;
}

Try this, it's working for me :)
$Testresult = mysql_query("select id,anchordescription,RootMenu,link from MenuTable");
$menu = array(
'menus' => array(),
'parent_menus' => array()
);
while ($row = mysql_fetch_assoc($Testresult))
{
$menu['menus'][$row['id']] = $row;
$menu['parent_menus'][$row['RootMenu']][] = $row['id'];
}
function buildMenu($parent, $menu)
{
$html = "";
if (isset($menu['parent_menus'][$parent]))
{
$html .= "<ul id='ulNav'>";
foreach ($menu['parent_menus'][$parent] as $menu_id)
{
if (!isset($menu['parent_menus'][$menu_id]))
{
$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['anchordescription'] . "</a></li>";
}
if (isset($menu['parent_menus'][$menu_id]))
{
$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['anchordescription'] . "</a>";
$html .= buildMenu($menu_id, $menu);
$html .= "</li>";
}
}
$html .= "</ul>";
}
return $html;
}

There is a huge amount of examples in the internet. Here is a nice step-by-step explanation of how to build a menu like the one that you want.
I also recommend you to look for jQuery plugins as there are a lot of working solutions there.