I'm currently building a table with Tabulator where I have a column "Link". Only some rows contain a URL and some don't (emtpy cell). I now want to have a clickable link which shows the text "Link".
I can either get
- the entire URL as clickable link shown in the cell or
- show "Link" in all rows, even if there is no link available (which leads to "undefined" destination) or
- have the URL as plain text
My 'link' column is defined as follows:
{title:"Link", field:"link", formatter:"link", formatterParams:{target:"_blank",}},
The data I geht from my MySQL database is handled as follows:
if($row->link != "") {
echo "link:\"" . $row->link . "\", \n";
}
It does not work (for me) to build a link in the echo part (it will be plain text later):
echo "link:\"Link\", \n";
Does someone know, how to set it up?
You would need to use a Custom Formatter to do this.
You could use the built in Link Formatter Code as a starting point, and just add a bit more logic to handle your usage case
#illuminarch: sorry, cannot add a comment to your question: Yes, but if I use a label - a string representing the lable this label will also be shown in cells where no URL is available.
Related
I'm making a linked cell in Tabulator. I formatted the cell content as
formatterParams: {
labelField: "id",
url: "localhost:8080/taskEditor/value,
target: "_blank",
},
I tried with a function, but the url was not generated correctly. It only gave me localhost:8080/value.
I would like to know how I can program a url as in the code above, where value is replaced by a string id. The value is in fact the value in the cell. How can I get the cell value and turn the text into a hyperlink, clicking on which, the user is able to see more detail of clicked value.
I'm doing this in vue.js environment.
Thanks!
Not sure if I understand your question correctly, but try this:
Instead of using the "formatterParams", create the link using the "formatter".
First create a function like the one below:
function link(cell, formatterParams){
var url = cell.getValue();
return "<a href='/taskEditor/"+url+"'>"+url+"</a>";
}
then generate the column with the code below:
{title:"ID", field:"id", formatter:link, hozAlign:"center"},
Example here:
jsfiddle
I am using datatables with mysql and php to display records and I have a column called 'Notes' which may contain 1 or more newlines, ( chr(10) ).
I am using
while( $row=mysqli_fetch_assoc($records) ){......
to fill the table and
$('#example tbody').on( 'click', 'tr', function ()......
and
Notes = $('td', this).eq(6).text();
to get the value of 'notes' (and others) in the clicked row for populating an edit dialog.
All working fine.
I have been asked if it's possible to display only the first line of the notes column in the table which I have done using 'strpos' and 'substr' and it's OK
Unfortunately because the edit dialog gets it's data from the table I'm now only getting the first line.....
I'm guessing I need to collect the entire field before I chop off the back bit and then use this collection (maybe in an array ??) to populate the edit dialog.
I'm afraid I'm still a bit 'green' here and not sure of the best approach or how to fill and then access the array.
Thanks for any help.
Additional ....Additional ....Additional ....
Thanks Barmar, this looks like a nice clean fix but I'm not there yet.....
I have added the CSS and the following code snippets..
** ListNotes = $('td:nth-child(6) .expanded', this).text();
and inside the php table 'while loop'
$findme = chr(10);
$pos = strpos($row['ListNotes'], $findme);
$lft = substr($row['ListNotes'], 0, $pos);
....
echo "<td><span class='abbreviated'>".$lft."</span><span class='expanded'>".$row['ListNotes']."</span></td>";
and the table is displayed as expected.
I put a break in Firebug after the line marked ** and 'ListNotes' is an empty string ("") ???
I was hoping it would contain the whole string including any chr(10)'s.
Have I done something wrong?
Put the full text in a hidden span:
<td><span class="abbreviated">First line...</span><span class="expanded">First line<br>Second line<br>Third line</span></td>
with CSS:
.expanded {
display: none;
}
When you edit, get the notes to expand from the .expanded span:
var text = $('td:nth-child(6) .expanded', this).text();
After the edit, store the abbreviated and expanded result back into the appropriate spans:
$('td:nth-child(6) .expanded', this).text(edited_text);
$('td:nth-child(6) .abbreviated', this).text(abbreviated_text);
I meant to answer my own question a while ago but forgot. Here's how I solved it.
In the table display I had 1 displayed column with the truncated string and 1 hidden column with the complete string. I used the hidden column for the edit dialog. Simple and effective.
My sign up form was previously working well. However, I had to add an acceptance page or terms and conditions before sign up can be successful. I thought it would be better to include it in sign up page rather than after sign up (before being presented with member's homepage). Problem is, it's having a lot of issues. It's not working properly.
Here's my code in view page: (i added this at the bottom of all fields before sign up button)
Please proceed only if you accept our <a target="blank" href="<?php site_url("in/terms_and_conditions");?>">terms and conditions</a>.
<input type='checkbox' name='terms' value='checked' id='terms' required autofocus/><br/>
Right now, it seems to work fine (codeigniter built in validation prompts up a message telling the user to click before he can proceed). Issue is 1. the link ("in/terms_and_conditions") does not show properly. Whenever the corresponding text is clicked, instead of showing the proper page, it just opens up a new sign up page.
Second issue is the presence of errors as follows:
Message: Undefined index: c_terms in model Line Number: 24
Line 24 is this:
'terms'=> $post_obj['c_terms']
I tried to add this to my array. Was it actually correct?
The second error shown is:
Column 'terms' cannot be null
INSERT INTO `client` (`first_name`, `last_name`, `email_address`, `password`, `address`, `tagline`, `profile`, `interests`, `billing_mode`, `terms`) VALUES ('dsfhkds', 'hfdskhflk', 'test#yahoo.com', '123456', 'fsdkfhsdk', 'sdkfhsdkf', 'sdklhfslkdhflsdhf', 'kdslhflks', 'Escrow', NULL)
What I did to my original table is I added column which I named "terms", set it to text type and no default value.
Please help me fix this.
Thanks!
Issue 1:
Did you create the page "in/terms_and_conditions" ? make sure?
Controller Name: in
Action Name : terms_and_conditions
Issue 2:
You have named checkbox as "terms". then, you should get the posted value as follows
'terms'=> $post_obj['terms']
Issue 3:
Set "terms" column default value as "NULL"
I see three problems:
You're not echoing the result of the site_url function. Just put echo in front of it.
If $post_obj is your '$_POSTarray you have to use thename` attribute of the HTML input as the key:
'terms' => $post_obj['terms']
Your problem is that you're not setting any text to be saved in terms. Add it to the second parameter of $this->db->insert('table', $data) like this: $data['terms'] = '...'
I'm trying to retrieve a list of users from a simple MySQL database table, e.g., called TableA, which looks something like: Username(varchar), Level(tinyint), DateCreated(datetime).
On an html page I have a search input box, say - and underneath it I have a div, say to display the results. I have it so that when I start typing a word (to look for a username), jQuery makes makes an ajax request to a php file which queries the TableA for the usernames.
The jQuery part looks like:
$("#search_bar").keyup(function()
{
var user = $(this).val();
$.post('get_user.php', user_name : user, function(data)
{
$("#result_box").html();
});
}
The php script, get_user.php, again is a simple script which looks something like
<?php
$user = $_POST['user_name'];
//connect db,
$query = mysqli_query (select Username from TableA where Username like '$user%');
//IMPORTANT PART HERE, I create a <DIV> or can be <P> and display it back
while ($row = mysqli_fetch_array($query))
{
echo "<div id="user_info" username='".$row['Username']."'>".$row['Username']."</div>
//I have the username as an attribute so I can make another .post request and get detailed user info.
}
?>
Now, previously using jQuery, every result that is being returned as a is being dumped in the result_box div ($("#result_box").html();). The problem I have with this is that if I have 3 users, say Mick, Mike and Mila and I start searching by typing 'M', the query returns all three (that's fine), however, when I click on a name, say the last one returned would be Mila, this will trigger another jQuery function which say for now just prints the name of the selected in a popup box - it however picks up the attribute of the first name, Mick, from the the first div that appeared there and not the one I clicked on. It's strange. If the search returns only a single entry then that's fine - however with multiple entries, regardless of which one I click, jQuery picks up only the first one.
I suspect its because the divs all have the same ID, and since they are being 'dynamically' created - jQuery just picks up the attribute (e.g., $("#user_info").attr('username') ) of the very first one or only one created?
Any help would be appreciated.
Thanks
You should use jQuery data()
You should create the div like :
<div class="userLink" data-username="$row['username']"></div>
And acces it from jQuery like
$('.userLink').on('click',function(e) {
var username = $(this).data('username');
}
And the attribute ID must be UNIQUE.
First off, you need to fix the issue of multiple DOM objects with the same id. Perhaps you can just use a class name. But, that probably won't fix your click issue. The click issue should be fixed by using the this reference that comes with the click event. This will tell you exactly which items was clicked on so even if there are multiple items, you can know which one was clicked on and can reference the attributes on that particular object with code like this:
$(this).attr("username");
FYI, you perhaps should use the HTML5 convention of data attributes. So, instead of an attribute of username="xxx", you would use data-username="xxx". Then, you can use:
$(this).data("username");
You can combine all these changes with delegated event handling to have a click handler like this:
Your PHP (switch to a class name and data-username attribute):
//IMPORTANT PART HERE, I create a <DIV> or can be <P> and display it back
while ($row = mysqli_fetch_array($query))
{
echo "<div class="userInfo" data-username='".$row['Username']."'>".$row['Username']."</div>
//I have the username as an attribute so I can make another .post request and get detailed user info.
}
Your delegated event handling click handler in the page:
$("#result_box").on("click", ".userInfo", function(e) {
var username = $(this).data("username");
});
I would like to know how to add a color to a line in sharepoint 2007 list
if in one field there is a specific text contained ?
for example :
I have a list that have three fields:
list1
1.id
2.name
3.full description
now i want to show only the first and the second field to the user.
list1
id name
1 abc
2 edv
second thing, i want to give a color (let say red) to a row that contains in the hidden
field - "full description", a text with the word for example 'color'.
I found a javascript code that i can add to the aspx page :
(document).ready(function(){
$Text = $("td .ms-vb2:contains('color')");
$Text.parent().css("background-color", "red");
});
but it's only works if the the "full description" is shown.
can someone give me an idea ?
thanks,
gadym
Have you considered creating a data view with conditional formatting? See http://office.microsoft.com/en-au/sharepointdesigner/HA100996241033.aspx
That way you won't have to do this ugly javascript hacking :)
One idea could be to use a calculated column to search the other field for the prescence of your text string - then base the jQuery logic on that calcualted column.
However you mention a description field which is probably defined as "Multiple lines of Text" and these can't be used in calculated columns.
How about outputting the Description field but then using some jQuery to hide it from view with .hide()?
I can't give you the exact javascript to do this right now but if you need any inspiration then Christophe's blog is a great place to start.
From your question I understood that you could highlighted the row which comes a particular text (color) , but couldn't hide that column. In the blow code I have hided that column. You may need to change the column index.
<script>
$(document).ready(function(){ $Text = $("td .ms-vb2:contains('color')"); $Text.parent().css("background-color", "red");
var myelement = $Text.parent().parent();
$(myelement).find("td:nth-child(3)").hide();
$(myelement).find("th:nth-child(4)").hide();
});
</script>
Please let me know, is this helps you?