I have a table with a button in each line. Each line has its own specific id. Is there a function in PHP that allows me to specify exactly which button is pressed? I mean when I click first button it should notify me that it was a button within a line with id='1', etc.
#edit
function usunKontakt() {
var temp = $(this).parent().parent().children(":first-child").text();
console.log("Javascript: "+temp);
}
$("button.usun").click(usunKontakt);
That's exactly what I want to do in PHP, what I made in jQuery. Is this possible in PHP?
OK you have a couple problems with your concept.
First
PHP is a server side language, which means that it's functions occur a long before the button is actually pressed.
Second the 'id' attribute is used as the Elements identifier, so it's should be unique and should NOT be a number or either start with a number.
I strongly recommend you to read this post: naming convetions for html's ids
and this:
valid id attribute
Now, when you say that 'me' at:
when I click first button it should notify me
You refer me => as User
OR
me => as Server?
If you edit your question to be more specific, it would be easier to help you)
Try this jquery inside a button function
$(this).parents(".parent-id/class").find(".content id/class ").show();
// PHP
// use different names for each buttons
if(isset($_POST['buttonname']))
{
function;
}
Would something like this work?
$('button').click(function() {
console.log($(this).parent().siblings().filter(':first').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>
<button>test</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button>test</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button>test</button>
</td>
</tr>
</table>
Depends on your table structure, but you could search for the first TD of each TR and catch its html contents.
Related
When we click on the candidate get details from mysql db. If i click first candidate I want to see the first candidate details, if I click 2nd I will see 2nd candidate details. Please share code with me how to get details with jquery, php and mysql? I want to listing candidates. When we click on the candidate I want to see the details of the candidate on the right side window.
Create a php script to read details from MySQL database
After retrieving data from MySQL use Json or xml & use echo to respond with details
In the On click event handler of UI item, make an Ajax call & send the candidate identifier to your php script then parse the response sent
Update the UI components based on the data received.
You can try this way:-
Take a class as header to the header rows, and use nextUntil to fetch all rows beneath the clicked header until the next header.
JS
$('.header').click(function(){
$(this).nextUntil('tr.header').slideToggle(1000);
});
Html
<table border="0">
<tr class="header">
<td colspan="2">Header</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
DEMO
Another Example:
$('.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()"
});
DEMO
You can also use promise to toggle the span icon/text after the toggle is complete in-case of animated toggle.
$('.header').click(function () {
var $this = $(this);
$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
$this.find('span').text(function (_, value) {
return value == '-' ? '+' : '-'
});
});
});
Or just with a css pseudo element to represent the sign of expansion/collapse, and just toggle a class on the header.
CSS:-
.header .sign:after{
content:"+";
display:inline-block;
}
.header.expand .sign:after{
content:"-";
}
JS:-
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
DEMO
I have the following setup:
The main web project consists of a large(ish) PHP script with a HTML table as its central part. The last table row is intended to be able to add copies of itself. For this purpose I put it into a separate Smarty template file:
<table>
<tr>
<td>key row 1</td>
<td>still row 1</td>
<td>another row 1 <div>with some Div here</div></td>
</tr>
{include "new-row.tpl"}
</table>
new-row.tpl (more or less):
{strip}
<tr>
<td onBlur="newRow()">key row x</td>
<td>still row x</td>
<td>another row x <div>with some Div here</div></td>
</tr>
{/strip}
newRow():
function newRow() {
$.post(
"/add-new-row.php", // only displays the new-row.tpl
{
param: "doit"
},
function(data) {
alert(data);
$("table tr:last").after(data);
}
);
}
Inspecting what's happening with Firebug's network monitor shows me that data actually gets the right response (the complete <tr>), but suddenly the whole table structure disappears from data when trying to alert it, leaving only the content alive.
I found out that jQuery seems to parse the AJAX-retrieved HTML code. As it doesn't contain a <table> tag, jQuery discards all table structure elements before passing them. I have to explicitly state that my dataType is text; when I do so, everything is fine.
Is this expected behavior or can I, somehow, tell jQuery to take my valid HTML excerpt as a valid HTML excerpt even if it's only a bare table row?
Thanks!
I'm basically trying to use a simple method of editing table stored inside a mySQL database, but don't want to go through a different editing page, so my theory is :
Show all data inside a HTML table as usual would as followed.
<table class="table table-bordered sortable">
<thead>
<tr>
<th>Marchant</th>
<th>URL</th>
<th>Status</th>
<th>Sold</th>
<th>Deals</th>
<th>Sites</th>
<th>Found</th>
<th>Seen</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td></td>
<td></td>
<td>Sold here</td>
<td>Deals here</td>
<td>Sites here</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
I want to be able to edit the data on the fly, simply by clicking on the value displayed and changing it.
The question is how would i go about by doing this, is it even possible ?
If you're using jQuery check out edit-in-place plugins (jEditable is a good one).
The idea behind this is to set up a click event listener on the table cell, in which you append an editable textarea/form with the contents of the TD.
On change or submit the data is sent trough an ajax request to the server, which updates the DB and eventually returns back sanitized data (you update the TD contents with it).
Yes, its possible.
It's mostly frontend.
Here is example of creating input after you click on a cell. (jQuery)
// once page is loaded
$(document).ready(function() {
// adding an event when the user clicks on <td>
$('td').click(function() {
// create input for editing
var editarea = document.createElement('input');
editarea.setAttribute('type', 'text');
// put current value in it
editarea.setAttribute('value', $(this).html());
// rewrite current value with edit area
$(this).html(editarea);
// set focus to newly created input
$(editarea).focus();
});
});
After this you can add event to newly created input. (for example when user hits Enter)
Then you do AJAX request and send new values to a .php script.
You also need to add id to a newly created element so you know exactly what cell is needed to be changed after data is sent via AJAX.
Also, don't forget to validate data before putting to MySQL.
So if everything went good or not you return value back, and according to the value you write JavaScript code to to remove element from a cell / put edited value or popup a message.
Hope this helps.
I'm trying to load a web page content little by little as the user scrolls since the content is huge, and the user is usually only interested in the first part(s) of it.
The page consists of a big table. Everytime the user scrolls to the bottom of the page, I get a few more rows using ajax and append it to the table. Or, I want it to work that way...
My scrollingevent works as it should. The ajax request is sent as it's supposed to, and I get the data as intended. The problem starts when I want to append this data to the table.
Let's say my answer to the ajax request (called 'data' in my script) is a string like this:
'<tr class="tasklist" id="r11">
<td class="titlecell">Some kind of string title</td>
<td>Some kind of string</td>
</tr>
<tr class="tasklist" id="r12">
<td class="titlecell">Some other kind of string title</td>
<td>Some other kind of string</td>
</tr>'
Then I try to use .after(data) to append those rows to my table. Only on web page, those rows fore some strange reason are inserted in the table like this:
'<tr>
<td class="titlecell"></td>
<td></td>
</tr>
<tr class="tasklist" id="r11"></tr>
<tr>
<td class="titlecell"></td>
<td></td>
</tr>
<tr class="tasklist" id="r12"></tr>'
No cell content at all, and cells are inserted in extra rows, leaving the "original" rows empty. Not really what I wanted right? But why? Any of you web oracles who can put me back on my track again by explaining what I'm doing wrong or what a better (working) solution should look like, I'd be really really grateful!
This is my javascript function as it looks right now:
SPECIAL.loadMyTaskList = function() {
// to avoid multiple simultaneous function calls
if ($('div #loader').html().trim() == '') {
var last = $("#mytasklist .tasklist:last").attr("id");
last = last.substring(1); // row id is on format r[number]
$('div #loader').html('<img src="images/loading.gif" alt="Wait..."> Loading more tasks');
$.get('includes/mytasklist.php?from='+last+'&nbr=10&ajax=1', function(data) {
if (data=='')
// all data is already loaded
$(window).unbind('scroll');
else
// append to table #mytasklist, after
// the last row (with class tasklist)
$("#mytasklist .tasklist:last").after(data);
// if browser window is so large, that the first
// post(s) of data fits without creating a scrollbar
if (!BASIC.pageHasScrollbar())
SPECIAL.loadMyTaskList();
$('div #loader').empty();
});
}
}
try this code, instead of after use append-
$("#mytasklist").append(data);
if you are having tbody in your table then try this-
$("#mytasklist > tbody").append(data);
I finaly found the answer to the problem myself. It wasn't a problem with the code above. The problem was that my jquery file was corrupt (but still valid code, so firebug didn't catch it). I suspect that a not so very thought through search-n-replace was the culprit
I write a web site with jquery and lot of ajax request to get data for table and ask data modifications with PHP/MySql on server side.
Currently, I use id attribute to store the id of the field of the table (which is an autoincrement int value).
And it works fine.
BUT I have recently learned that id should be unique (and start with a letter...).
AND I have different tables that could have the same id value (for different sql table)
Then I am not html (nor xhtml) compliant...
How could I correct my code ?
By using .data() function of jQuery ?
An hidden html element with the id as value (<span class="id">3</span>) ?
Other solution ?
Additional informations:
I have wrote a widget to manage my tables.
To add a new row, I do:
row = $('<div class="row" id="'+item.id+'"/>');
[...] // I add fields to my row
row.appendTo(tableData);// tableData is the html element where rows are
When a field element is changed, I trigger an event to the table that will ask the modification to the server with the right id:
$(e.target).closest(".row").attr("id")
If you are able to use jQuery 1.4.3 or greater look at using the html 5 data-* attributes. jQuery 1.4.3 will automatically use those data- attributes and place them in the .data() collection on the element.
Example:
<table>
<tr data-rowId="1">
</tr>
</table>
$("tr:first").data("rowId") would print 1
This method would also allow you to store json objects as well.
<table>
<tr data-row='{"Id" : 1, "Name": "Smith"}'>
</tr>
</table>
And than in your data()
var row = $("tr:first").data("row")
You can reference row.Id and row.Name
You can prefix your id with the table name :
<div id="mytable_1234"></div>
It's easy to extract the table name and the id from the field and this is HTML compliant.
var values = $(element).attr('id').split('_');
// values[0] is the table name and values[1] is the id.
You can use any other separator if you're already using underscores in your table names.
you can also use jQuery metadata .....
Its awesome to store data in html
Instead of using id use data-id and use the .data('id') (on that element) to retrieve it with jQuery.
I think... I understand your question - multiple data tables, all with autoincrement ids?
My solution would be pre-appending the ID with a letter (like you said) to differentiate it.
Example would be a dataset for 'cars' I would do:
<table>
<tr id="cars_1">
...
</tr>
<tr id="cars_2">
...
</tr>
<tr id="cars_3">
...
</tr>
</table>
Later if you have another table, bikes, you would do:
<table>
<tr id="bike_1">
...
</tr>
<tr id="bike_2">
...
</tr>
<tr id="bike_3">
...
</tr>
</table>
Your end result would be unique ID's while keeping the ID db value in mind, so you would do a simple check (if cars, then do this, etc), then to seperate the prefix (cars from the id 1, you would use something like the PHP expolode() fn).
Hope that clarifies it, and that I understood your question.