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
Related
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.
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.
Building off a previous question,
Is it possible to make a jquery button do two things at once?
Right now I have this:
<td>
<a href="#'.$row['abstractid'].'">
<button onClick="$(\'.hide\').toggle();">Read Abstract
</button>
</a>
</td>
This works (yay!) - it both jumps to and displays the div that is hidden with that database id number- but since those results are looped, it displays ALL of them. Now, it goes to the correct place on the page, but it still shows all the results instead of just that one result.
Could I make this button so onClick it not only toggles the hide but also sets the database ID number for the query to pull so it only displays one set of results- OR just only displays that one database ID set and leaves the others hidden? Would I have to set the table id as the database id and give that the class of hidden instead of putting it into a div?
Example:
right now it's:
<div id="'.$row['abstractid'].'" style="display:none;" class="hide">
<table>
stuff
</table>
But would I need to make it
<table id="'.$row['abstractid'].'" style="display:none;" class="hide">
instead? This makes sense to me in theory but I'd have to be a little creative with my CSS I think.
You could use onclick="function() {$(\'.hide\').toggle();$(\'.hide\').toggle();}"
However, I would not recommend that. My suggestion is:
<button class="read-abstract">Read Abstract</button>
Then
<script>
$(document).ready( function() {
$(".read-abstract").live( "click", function() {
// do stuff here
});
}
</script>
For more on unobtrusive Javascript: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Regarding showing and hiding values I always approach it as so:
HTML:
<button data-hide-id="1" class="read-abstract">Read Abstract</button>
<table id="table-1" class="hide">
<tr>
<td>Contents will show hide on click of read abstract</td>
</tr>
</table>
JS (in <head>):
<script type="text/javascript">
$(document).ready( function() {
$(".read-abstract").live( "click", function() {
$("#table-" + $(this).data("hide-id") ).toggle();
});
}
</script>
Working example: http://jsfiddle.net/sZREt/
You toggle all items with the class "hide" instead of only the specific one
You don't need to put a button into an anchor (I don't even know if it's allowed). If you need it to look like a button you can use CSS.
IDs have to start with a letter and not with a number. I guess your abstractid is a number, therefore I prepended abstr
If you give an element the class hide (which presumably hides it) then you don't really need the inline style.
Here is the updated code:
Read Abstract
<table id="abstr'.$row['abstractid'].'" class="hide">
I am generating an HTML table with PHP (using the codeigniter framework) and I'm trying to add a link that will open a jquery dialog with some information that is specific to that row. Sort of a 'More Info' type link that simply opens the dialog.
When I add the dialog div to that row and encapsulate the required information in it, it breaks the table (cannot have a div in the table).
Plus, it seems I would need to add an unknown amount of jquery dialog functions declared... I'm assuming some sort of a function is needed and the ID of the element that opens the dialog as well as the ID for the dialog would be passed to the function. But, it seems there should be something built into jQuery for something like this.
Am I missing something, and if so does anybody have any tips to get me pointed in the right direction?
Embed the information as metadata on the row, a la…
<tr data-foo="additional data here" data-bar="even more data">…</tr>
And in your javascript, a little magic called .live():
$('#your_table .show_dialog').live('click', function(){
var data_for_dialog = {
foo: $(this).closest('tr').attr('data-foo'),
bar: $(this).closest('tr').attr('data-bar')
}
show_dialog(data); // your own code to show the dialog
});
Where you have an <a> tag with the class "show_dialog". Note that this isn't very efficient if you have a lot of attributes or any of them contain data that needs to contain newlines. You could improve this by iterating over each attribute defined on that <tr> and automatically including the attributes starting with data-. That's out of the scope of this question though.
As far as showing the dialog, something like this would be sufficient:
function show_dialog(data) {
var $dialog = $('#dialog');
for(var attr in data) {
$dialog.find("." + attr).html(data[attr]);
}
$dialog.show();
}
<div id="dialog">
<p class="data-foo"></p>
<p class="data-bar"></p>
</div>
That's untested, but should illustrate what's happening well enough.
Note: You can define custom attributes in HTML5 so long as they are prefixed with "data-", hence that showing up everywhere above.
I agree with Tomalak's comment to use one box and change the content in it.
If you wanted to do what I think you are trying to do(without seeing your code) it seems that you might be putting the dialog div in the <table> tag instead of a <td> tag, that would be the first thing to check.
Secondly to open the dialog you can just reference the div next to the link:
<table>
<tr>
<td>
<span class="MoreInfo">More info</span>
<div>stuff for dialog</div>
</td>
</tr>
</table>
$(document).ready(function(){
$('.MoreInfo').next().dialog({ autoOpen: false })
$('.MoreInfo').click(function(){
$(this).next().dialog('open');
});
});
Edit: Sorry messed up the Jquery I am assuming you are using the JqueryUI Dialog