I have been trying to apply this to my app for some time now with no success and have noticed the same thing on the Job Application Default Template too and I am not sure on a solution.
When a Logged in used applies for a Job and goes back to the main search screen, I would like the “Apply” button to recognise that the logged in user has already applied and changes the button to reflect this. Is there a way to do this?
Likewise, if the applicant “deletes/removes” the application from the “my applications” table, then the button returns to the normal “Apply” button, allowing them to apply again if they wish.
@tim.young is right and you certainly would need JS for this, but I think you’ll also require a pipe to pull and see if the user applied to this job already.
I made a video in another post showing a similar concept. You can see that here.
I’ll continue that video and apply it to your concept:
Here’s the JS code I used:
TB.render('component_3', function (data) {
setTimeout(function() {
$('#x_element_page_7_3 tr').each(function() {
var voted = $(this).find(".total").text();
if (voted == 1) {
$(this).find(".link a").text("Voted");
//$(this).css("background-color", "yellow");
}
});
},1)
});
Thanks very much for this @moe, I have tried to “retro-fit” this to my app but not successfully yet. I need to work back and make sure I am getting the correct table and fields. I will be doing this tonight, so hopefully I will report back with success
@moe This has worked perfectly with a sample set and I have even got it working so that you can even add the same item more than once (I am actually using it for a collection management tool). I can now add an item to “my collection”. The button changes from “Add to collection” to “add again” and also highlighted the table row to a new Hex colour (thanks to that nice little note your left in the JS.
I had to alter the count of “==1” in the JS to “>0” and that allowed the button to stay as “add again” for any count of 1 or more.
Now comes the fun bit…trying to get this mapped back and replicated into my live app.
Glad to hear you got it working with sample data. I shoudl have shared the app I built directly with you so you can see/copy it directly too.
Let me know if you come across any issues getting this implemented in your live app. I’d be more than happy to assist further.
I know Tadabase is a ‘no code’ platform, but sometimes we gotta get our hands just slightly dirty with code. It’s somewhat impossible to build features for every scenario but as these features and requests come in we try and see how we can do this in the future without requiring as much code.
@Moe, so this is why I just love Tadabase and the amazing crew supporting us.
I am a complete novice with ZERO coding skills and this is my first go at creating an app. Thanks to everything you have just shown, I have managed to succesfully now integrate this into the live app and it is working EXACTLY as I wanted it to. The image shows how items not added to the collection have the “+ My Collection” button and the row is not highlighted. Anything that has been added to the collection (the voted for scenario), has the button changed to “add another” and the row highlighted in green.
This has saved me from a number of sleepless nights indeed. Thanks Moe
@moe, now comes the fun part…How do I do this in a List View component? I can’t see a css class field on any of the fields when using List View. Am I missing something completely obvious (wouldn’t surprise me!!).
@moe, is it possible to have the css class function added to the fields in the list component the way it is in the table component? Or is that only limited to tables? I am getting bald spots trying to replicate the above in the list component (I have chosen to use the list view for mobile devices but still need to try and replicate the above solution if at all possible?). Sorry to keep hiding behind the excuse but I truly am a novice and just need a hand in getting this to replicate.
Hi @moe, sorry to be a pain as I know you guys have a million things going on, but is there any chance for a little help on this one? I have been trying other ways to replicate this function but I am crashing into dead ends with my skillset. If I can get this function working in list view then I can finally get some people to Beta test the app for me.
We have a big update coming out shortly which has taken up our resources. I’m sure we will add the card classes to cards right away. For now, can you email me directly with link to your app and/or share it with me directly? I’d be more than happy to assist. Likely not this minute, but for sure over the weekend. Let me know where and what the expected outcome is and I’ll tweak it accordingly.
Very Grateful indeed! I will get it to you on Monday because there is no way I am ever making you work on a weekend!!! There is nothing more important than being rewarded with the freedom of two days away from us crazy bunch of loons.
Thank you for adding the CSS Class to the List view. I am not sure what I am doing wrong but have replicated the JS and the Pipes and have updated all the correct elements and components but I just can’t seem to get the List view to update the background color or change the button text the way it is doing in the table view.
Is there any chance you could give it a try in the “topics and votes” scenario by using the list view and see if you are able to get it working? It is most likely just me being thick again.
Here is my amended JS:
TB.render(‘component_57’, function (data) {
setTimeout(function() {
$(’#x_element_page_199_56 tr’).each(function() {
var collection = $(this).find(".total").text();
TB.render('component_57', function (data) {
setTimeout(function() {
$('#x_element_page_199_57 .t-list-row').each(function() {
var collection = $(this).find(".total af-data-table-field").text();
//console.log("Total: " + collection);
if (collection > 0) {
$(this).find(".collection-button a").text("Add Another");
$(this).css("background-color", "#DAF7A6");
//To set the background of just one row, use this instead:
//$(this).find(".collection-button").css("background-color", "#DAF7A6");
}
});
},1)
});