Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Realtime check for available shortlink #379

Closed
wants to merge 7 commits into from
Closed

Realtime check for available shortlink #379

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9242d21
Realtime check available shortlink
tdtgit Oct 26, 2017
d03be9a
Remove unused code from .check-btn
tdtgit Oct 26, 2017
a419f86
Change `textstatus` to `textStatus`
tdtgit Oct 26, 2017
489c878
Merge branch 'master' into realtime-check
tdtgit Oct 27, 2017
e8cdb30
Change to typeWatch jQuery plugin
tdtgit Oct 28, 2017
b6f3120
Fix for better Codacy review
tdtgit Oct 28, 2017
10deac3
Merge branch 'master' into realtime-check
overint Mar 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 0 additions & 4 deletions public/css/index.css
View file
Open in desktop
Expand Up @@ -16,10 +16,6 @@
margin-top: 20px;
}

.check-btn {
margin-bottom: 30px;
}

#link-availability-status {
margin-bottom: 20px;
}
Expand Down
54 changes: 29 additions & 25 deletions public/js/index.js
View file
Open in desktop
Expand Up @@ -11,32 +11,36 @@ $(function() {
slide = 0;
}
});
$('#check-link-availability').click(function() {
var custom_link = $('.custom-url-field').val();
var request = $.ajax({
url: "/api/v2/link_avail_check",
type: "POST",
data: {
link_ending: custom_link
},
dataType: "html"
});
$('#link-availability-status').html('<span><i class="fa fa-spinner"></i> Loading</span>');
request.done(function(msg) {
if (msg == 'unavailable') {
$('#link-availability-status').html(' <span style="color:red"><i class="fa fa-ban"></i> Already in use</span>');
} else if (msg == 'available') {
$('#link-availability-status').html('<span style="color:green"><i class="fa fa-check"></i> Available</span>');
} else if (msg == 'invalid') {
$('#link-availability-status').html('<span style="color:orange"><i class="fa fa-exclamation-triangle"></i> Invalid Custom URL Ending</span>');
} else {
$('#link-availability-status').html(' <span style="color:red"><i class="fa fa-exclamation-circle"></i> An error occured. Try again</span>' + msg);
}
});
var timeoutId;
$('.custom-url-field').keyup(function (){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should wait until the user has finished typing before checking if it is available.
I've used the typewatch jquery plugin before for this purpose.

Copy link
Contributor Author

@tdtgit tdtgit Oct 28, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay I will update this PR soon.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated @overint

if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
var custom_link = $('.custom-url-field').val();
var request = $.ajax({
url: "/api/v2/link_avail_check",
type: "POST",
data: {
link_ending: custom_link
},
dataType: "html"
});
$('#link-availability-status').html('<span><i class="fa fa-spinner"></i> Loading</span>');
request.done(function(msg) {
if (msg == 'unavailable') {
$('#link-availability-status').html(' <span style="color:red"><i class="fa fa-ban"></i> Already in use</span>');
} else if (msg == 'available') {
$('#link-availability-status').html('<span style="color:green"><i class="fa fa-check"></i> Available</span>');
} else if (msg == 'invalid') {
$('#link-availability-status').html('<span style="color:orange"><i class="fa fa-exclamation-triangle"></i> Invalid Custom URL Ending</span>');
} else {
$('#link-availability-status').html(' <span style="color:red"><i class="fa fa-exclamation-circle"></i> An error occured. Try again</span>' + msg);
}
});

request.fail(function(jqXHR, textStatus) {
$('#link-availability-status').html(' <span style="color:red"><i class="fa fa-exclamation-circle"></i> An error occured. Try again</span>' + textstatus);
});
request.fail(function(jqXHR, textStatus) {
$('#link-availability-status').html(' <span style="color:red"><i class="fa fa-exclamation-circle"></i> An error occured. Try again</span>' + textStatus);
});
}, 200);
});
min = 1;
max = 2;
Expand Down
1 change: 0 additions & 1 deletion resources/views/index.blade.php
View file
Open in desktop
Expand Up @@ -32,7 +32,6 @@ class='form-control long-link-input' placeholder='http://' name='link-url' />
<input type='text' autocomplete="off" class='form-control custom-url-field' name='custom-ending' />
</div>
<div>
<a href='#' class='btn btn-success btn-xs check-btn' id='check-link-availability'>Check Availability</a>
<div id='link-availability-status'></div>
</div>
</div>
Expand Down