Show/Hide input inside cells of datatable table
Show/Hide input inside cells of datatable table
Hi everyone,
I'm facing the following issue.
I have a datatable that gets the data through ajax. It all works perfectly, but, at in the last column of each row, I want to display a button that, when clicked, will show a text input (it will be a $_POST to an external page).
Here is the code for the column I'm "rendering".
{
data: null,
searchable: false,
sortable: false,
targets: 6,
render: function(data, type, row, meta) {
return '<input type="image" src="images/auction.png" class ="myButton" width="22" height="22" title="Fai un\' offerta" /><input type="text" class="textInput" value="" hidden/>'
}
},
Now, I have this script to "show" or "hide" the input text
$(document).ready(function() {
$(".myButton").click(function() {
$(".textInput")
.hide()
.eq($(this).index('.myButton'))
.toggle()
});
$(document).mouseup(function(e)
{
var container = $(".textInput");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
});
As intendend, the input image is shown, but even if I click it doesn't show anything.
I know that it works because I've tried it here : https://jsfiddle.net/ya2Lw0vz/2/
I'm using <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
for loading jquery.
Why is it not working? Am I doing something wrong?
Maybe should I place it in a specific point in my code?
As for now, the structure of my scripts are the following:
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type ="text/javascript" src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
(function($) {
$(document).ready(function() {
.... table information here...
]});
$(document).ready(function() {
$(".myButton").click(function() {
$(".textInput")
.hide()
.eq($(this).index('.myButton'))
.toggle()
});
$(document).mouseup(function(e)
{
var container = $(".textInput");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
});
})
})(jQuery);;
Thank you to whoever will try to help me.
Angelo
Answers
See if this example of using jQuery delegated events helps. Otherwise please update the test case to show the issue so we can help debug.
Kevin
Ok maybe I figured it out.
Basically the ajax code is not letting me define my function.
By searching online it seems that I need to use the
fnPreDrawCallback
.I did not try with the problem discussed in the first post because I was searching for a work around to the jquery qtip feature that wasn't working (basically I need to open another page in a modal-like way to send a value to my database).
This modal-like window that opens in the same page where it's called it's working perfectly in the other pages of my site where I use both this qtip function and the datatable but without AJAX call.
As the AJAX call from datatable seems to cancel my qtip function defined OUTSIDE the definition of the datatable itself, I tried to use (by looking online) the
fnPreDrawCallback
to define my qtip function.At the first try I was happy. It worked PERFECTLY FINE!
But soon I found another issue.
Basically, as soon as I change some values and "redraw" my table (I have a range for certain properties, and when I change that value the datatable redraw itself live) I get this error:
So, my function, that at fresh start in my page is working perfectly good, gets lost in the way after the table is redrawn.
For better understanding I will post now my full datatable function, hoping that someone will find a way to solve this:
Hoping that someone will help me,
I thank you all for your time and efforts.
Angelo
I've never used qtip. Looks like you are trying to retrieve the qtip text via Ajax. Take a look at this thread. Sound like fetching the text via ajax is not supported by qtip. Maybe you need to rearrange the ajax call used by qtip similar to what bindrid posted.
My guess is this error is caused by the ajax call you have in the
text
function of the qtip initializer in line 63. Since its an async request and qtip is not waiting for the response to continue initializing the error occurs. Try initializing a qtip element without Datatables and get that to work first. Qtip seems to be no longer maintained.See the qtip docs.
The
preDrawCallback
is used to clean up events before the draw. UsedrawCallback
to apply the events. Looks like you are trying to apply the events in both callbacks which won't work. See the docs for more details.For us to help debug the code we will actually need to see a running example showing the issue. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi Kevin,
thank you for your time.
making a test case is something I would like to avoid, because it's a lot difficult for me to fully replicate this case.
But I found a workaround (even though it's really bad and I don't like it).
As I told in the previous post, as soon as I refresh the page the qtip is working fine.
But as soon as I redraw the table it stops working.
And the reason is (as far as I understood) that the qtip.js file is not loaded.
And the awful solution I found is to fully include the text of the file inside the drawCallback function.
So at each draw I know that the qtip functions are loaded.
And it works now.
But I don't like as a solution, first of all because I would like to keep my code... smaller
Is there maybe a way to include a js file inside the drawCallback function without copying and pasting the whole js code in it?
Thank you.
Hos are you redrawing the table?
There is something wrong with your page if you need to include the text of qtip.js inside the
drawCallback
function. This would insert a duplicate qtip.js instance each timedrawCallback
is executed. In order to help we will need to see the page so we can see exactly what you have.I took Bindrid's example code and put it into this test case:
http://live.datatables.net/xefewuto/1/edit
NOTE: The mouseover ajax function call returns all the data. It is expected that only one row of data, pertaining to the mouseover row, is returned in production.
The example doesn't use
drawCallback
. It relies on jQuery Delegated event to create a single event for all elements that contain the classnamedetails
.Looks like fine tuning of the qtip tool can be made as it can sometimes leave artifacts in the test case. Will leave this part to you as its qtip that needs to remove the old display info.
Feel free to update my test case to show any Datatables related issues.
Kevin