PHP / JQuery / AJAX for Updating Database if Div is not visible - php

Question

I have a complex website setup so I'll just make an example a simple one.
Current Setup
I have two buttons.
<a id="one" href="#">Link 1</a>
<a id="two" href="#">Link 2</a>
And I have two divs
<div id="showOne" style="display:none">1</div>
<div id="showTwo" style="display:none">2</div>
This is my JQuery code
$('#one').click(function (e) {
$('#showOne').show();
});
$('#two').click(function (e) {
$('#showTwo').show();
});
What I'm Trying to Accomplish
Basically, I have a database table setup that has a row to count how many times was div(showOne) and div(showTwo) shown.
How would I work with AJAX to add one to the database row aka counter if display = block?
My Attempt
$('#one').is(":visible")
{
$.ajax({
type:"POST"
url: update.php
data: {type:link_one_shown}
success: function(data){
alert("Test");
}
})
When I do this, the rest of my JQuery code crashes. Not sure if this doesn't make sense or I just wrote something wrong.
Thank you in advance!

Answer 1

Three problems that I can see:
As Akam notes, you've mangled the if statement.
The data isn't correct -- link_one_shown should be either a variable (which you haven't defined?) or a string literal.
You're missing commas between the ajax function parameters.
Here's the modified code:
if ($('#showOne').is(":visible")) {
$.ajax({
type:"POST",
url: update.php,
data: { type: "link_one_shown" },
success: function(data){
alert("Test");
}
});
}

Answer 2

why not just move ajax call to function and invoke it when show the div, this avoids code repetition and makes it simpler.
$('#one').click(function (e) {
$('#showOne').show();
updateDB('link_one');
});
$('#two').click(function (e) {
$('#showTwo').show();
updateDB('link_two');
});
function updateDB(link)
{
$.ajax({
type:"POST"
url: update.php
data: {type:link}
success: function(data){
alert("Test");
}
});
}