I'm using qtip2 to display a tool tip from a link in a table, and i call it on mouse enter. The issue is the tool tip is not displaying but the the alert works and i cant figure out why the tool tip wont show. Thank you for any help.
$('#tblOrder tr td a').on('mouseenter',function(){
alert('');
var id = $('#tblOrder tr[id*="row"]').attr('id').substr(3);
$(".proper a").qtip({
content: {
text: 'Loading.....',
ajax: {
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
success: function(data, status){
this.set('content.text', data);
},
error: function(xhr){
console.log(xhr.responseText);
console.log($('#tblOrder tr[id*="row"]').attr('id').substr(3));
}
}
},
show: {
effect: function() {
$(this).slideDown();
}
},
hide: {
effect: function() {
$(this).slideUp();
}
}
});
});
I have created a jsfiddle to go with this here
Here you are http://jsfiddle.net/f0sbo0vd/3/
$(document).on('mouseenter', '#tblOrder tr a', function(event) {
$(".proper a").qtip({
content: {
text: 'Loading.....',
ajax: {
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
success: function (data, status) {
this.set('content.text', data);
},
error: function (xhr) {
console.log(xhr.responseText);
}
}
},
show: {
event: event.type,
ready: true,
effect: function () {
$(this).slideDown();
}
},
hide: {
effect: function () {
$(this).slideUp();
}
}
}, event);
});
EDIT
To show qtip on the link use this http://jsfiddle.net/f0sbo0vd/5/
Just change
$(".proper a").qtip({ ... });
to
$(this).qtip({ ... });
Related
I am using jQuery DataTables on a site that features the regular searchbox and some preset buttons that sort the table by column when pressed. The code does indeed sort the table when the button resets, but it immediately resets within 1/2 second. Here is my code:
//CATEGORY BUTTONS
$("#Term").on('click', function (event) {
dataTable.column(2).search('Term').draw();
});
I've searched around and looked at many forums. This should be correct, but the result always instantly resets the form. I've removed the search box functionality to see if that was interfering and causing the issue, but the issue remained. It just blinks the results up really fast and then resets it all to showing the entire list again. Could this be a thing with Internet Explorer (this machine has no access to any other browsers)?
Here is the full code:
$(document).ready(function () {
//USES API FOR DYNAMIC SEARCHING
//RENDERS TABLE
var dataTable = $("#videos").DataTable({
"paging": false,
bjQueryUI: true,
ajax: {
url: "/api/videos",
dataSrc: ""
},
columns: [
{
width: "70%",
data: "title",
render: function (data, type, video) {
var videoTitle = video.title.toUpperCase();
return "<VideoItem><a href='" + "../" + video.url + "'>" + "<spacerTop>" + videoTitle + "</spacerTop></a></VideoItem>";
}
},
{
width: "10%",
visible: false,
data: "description",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "categoryName",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "meta",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "date",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "categoryID",
render: function (data) {
return data;
}
}
]
});
//CONTROLS DELETE BUTTON ACTION
$("#videos").on("click", ".js-delete", function () {
var button = $(this);
bootbox.confirm("Are your sure you want to delete this video?", function (result) {
if (result) {
$.ajax({
url: "/api/videos/" + button.attr("data-video-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove();
}
});
}
});
});
//MAKES SEARCH BOX ON TOP INTERACT WITH DATATABLE
$(".search-box-input").keyup(function () {
dataTable.search(this.value).draw();
});
//CATEGORY BUTTONS
$("#Term").on('click', function (event) {
dataTable.column(2).search('Term').draw();
});
});
I have the following js code:
$("#add_station").on('click', function () {
$(this).closest('form').submit(function () {
alert("working!");
$.ajax({
url: advoke.base_url + "/new-vendor-user/station/ajax",
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: new FormData(this),
beforeSend: function () {
$('.info').hide().find('ul').empty();
$('.success_message').hide().find('ul').empty();
$('.db_error').hide().find('ul').empty();
},
success: function (data) {
if (!data.success) {
$.each(data.error, function (index, val) {
$('.info').find('ul').append('<li>' + val + '</li>');
});
$('.info').slideDown();
setTimeout(function () {
$(".info").hide();
}, 5000);
} else {
$('.success_message').slideDown();
$('#add_station').remove();
$("#station").append(data.new_station);
setTimeout(function () {
$(".success_message").hide();
}, 5000);
} //success
},
error: function () {
//db error
$('.db_error').append('<li>Something went wrong, please try again!</li>');
$('.db_error').slideDown();
//Hide error message after 5 seconds
setTimeout(function () {
$(".db_error").hide();
}, 5000);
} //error
});
});
return false;
});
When I click the button with the id add_station it alerts on click function after $($this).closest('form').submit(function(){...) it doesn't work as you can see I've put an alert 'works' after submit function.I get no errors on the console and I can't figure what the problem is. Also, the button that is clicked is inside a form.
I need to use $($this).closest('form').submit(function(){...) inside because after ajax success a new form will be generated with add station button that will use this code.
You should block the default submit trigger by using
e.preventDefault();
$(this).closest('form').submit(function (e) {
e.preventDefault();
<!--rest of the code-->
})
add a separately submit handler
$("#add_station").on('click', function () {
$(this).closest('form').submit();
});
$("form").on("submit", function (e) {
e.preventDefault();
alert("working!");
$.ajax({
url: advoke.base_url + "/new-vendor-user/station/ajax",
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: new FormData(this),
beforeSend: function () {
$('.info').hide().find('ul').empty();
$('.success_message').hide().find('ul').empty();
$('.db_error').hide().find('ul').empty();
},
success: function (data) {
if (!data.success) {
$.each(data.error, function (index, val) {
$('.info').find('ul').append('<li>' + val + '</li>');
});
$('.info').slideDown();
setTimeout(function () {
$(".info").hide();
}, 5000);
} else {
$('.success_message').slideDown();
$('#add_station').remove();
$("#station").append(data.new_station);
setTimeout(function () {
$(".success_message").hide();
}, 5000);
} //success
},
error: function () {
//db error
$('.db_error').append('<li>Something went wrong, please try again!</li>');
$('.db_error').slideDown();
//Hide error message after 5 seconds
setTimeout(function () {
$(".db_error").hide();
}, 5000);
} //error
});
});
after ajax success a new form will be generated with add station
button that will use this code
If you generate a new button you have to bind the click again after it is placed to the dom.
I am working on this snippet of code, but I can't figure out why the ajax request is firing up twice when I click the selected button:
$('#passwd-nuova').blur(function() {
var response = $('#passwd-nuova').validate({
'classeform': 'form-utenti',
'empty': 'passwd-nuova'
});
if (!response.empty) {
$('#reset').addClass('btn-disabled');
} else {
$('#reset').removeClass('btn-disabled');
/*
* RESET PASSWORD PANNELLO
*/
$('#reset').on('click', function() {
var new_passwd = $('input[name=passwd-nuova]').val();
var selezionato = $(this).loadID({
'nometabella': 'utenti',
'abbr': 'utenti'
});
var send_email = $('#cb-email').prop('checked');
$.ajax({
cache: false,
type: "POST",
url: "/gutenti/",
dataType: "json",
data: {
'mod-passwd': true,
'idu': selezionato,
'new-passwd': new_passwd,
'send-email': send_email
},
success: function(response) {
var tab = $("#datatable_utenti").dataTable();
$('#modal-reset').modal('hide');
tab.fnDraw();
$(window).scrollTop(0);
$(document).genAlert({
tipo: 'success',
msg: 'modifica completata con successo',
time: 800
});
$('input').each(function() {
$(this).val('');
});
$("#datatable_utenti tbody").compileForm({
'abbr': 'utenti',
'nometabellaDB': 'admin_utenti',
'nometabella': 'utenti'
});
$(document).stato(profile, 'base');
return;
},
error: function() {
console.log("errore async");
$('#modal-reset').modal('hide');
$(window).scrollTop(0);
$(document).genAlert({
tipo: 'error',
msg: 'qualcosa è andato storto, riprova',
time: 800
});
}
});
return;
});
}
});
I've tried to disable the button after the call, and also to return nothing to exit from the function, but nothing has worked.
Your $('#passwd-nuova').blur handler binds the $('#reset').click' handler multiple times.
I'm glad my comment helped you out ;)
I have called the function inside the blur funciton. However; The function is going to be called also when you click the #reset button. I hope it works.
$('#passwd-nuova').blur(function() {
var response = $('#passwd-nuova').validate({
'classeform': 'form-utenti',
'empty': 'passwd-nuova'
});
if (!response.empty) {
$('#reset').addClass('btn-disabled');
} else {
$('#reset').removeClass('btn-disabled');
/*
* RESET PASSWORD PANNELLO
*/
$('#reset').click();
}
});
$('#reset').on('click', function() {
var new_passwd = $('input[name=passwd-nuova]').val();
var selezionato = $(this).loadID({
'nometabella': 'utenti',
'abbr': 'utenti'
});
var send_email = $('#cb-email').prop('checked');
$.ajax({
cache: false,
type: "POST",
url: "/gutenti/",
dataType: "json",
data: {
'mod-passwd': true,
'idu': selezionato,
'new-passwd': new_passwd,
'send-email': send_email
},
success: function(response) {
var tab = $("#datatable_utenti").dataTable();
$('#modal-reset').modal('hide');
tab.fnDraw();
$(window).scrollTop(0);
$(document).genAlert({
tipo: 'success',
msg: 'modifica completata con successo',
time: 800
});
$('input').each(function() {
$(this).val('');
});
$("#datatable_utenti tbody").compileForm({
'abbr': 'utenti',
'nometabellaDB': 'admin_utenti',
'nometabella': 'utenti'
});
$(document).stato(profile, 'base');
return;
},
error: function() {
console.log("errore async");
$('#modal-reset').modal('hide');
$(window).scrollTop(0);
$(document).genAlert({
tipo: 'error',
msg: 'qualcosa è andato storto, riprova',
time: 800
});
}
});
return;
});
I guess that this line:
$('#reset').on('click', function() {
........
runs more than once(on each blur).
You can bind an event more than once with no problem.
Check if this solves your problem:
$('#reset').off('click').on('click',function(){ .....
If it does, then try to move the "event attachment" to a different place.
Jquery - 'on' and 'off'
Try unbind / bind the click callback:
var callback = function () { ... }
$('#reset').unbind('click', callback);
$('#reset').bind('click', callback);
If you attach the click event twice, it will get called two times.
I have this Javascript and I want to click ok and call detel method in my controller,
but its not working and I don't know why.
I need to but two values in this submit:
id and name.
Also I don't know what url it should be because the method doesn't change. I'm in delete right now but in get method.
Here is the code:
<script type="text/javascript">
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Ok": function () {
$.ajax({
type: "POST",
url: "",
data: { name: ViewBag.ProductName, id: ViewBag.ProductID },
success: function () {
alert("succes");
$("#result").html('submitted successfully');
},
error: function () {
alert("failure");
$("#result").html("there is error with submit");
}
})
$(this).dialog("close");
},
Anuluj: function () {
$(this).dialog("close");
}
}
});
});
</script>
Try this
<script type="text/javascript">
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Ok": function () {
$.ajax({
type: "POST",
url: "/ControllerName/ActionName",
data: { name: '#ViewBag.ProductName', id: '#ViewBag.ProductID' },
success: function () {
alert("succes");
$("#result").html('submitted successfully');
},
error: function () {
alert("failure");
$("#result").html("there is error with submit");
}
})
$(this).dialog("close");
},
Anuluj: function () {
$(this).dialog("close");
}
}
});
});
I get a an alert: Object XMLHttpRequest. This happens when I click Add Recipient on my dialog. The code below POSts the new values to the database. It opens a dialog or form and the action of the form is to add or insert a new value to the database. I pasted the code below because I think thats likely the source of the error.
Below is the javascript for my code:
$(function () {
$('#dialog-form-add').dialog({
autoOpen: false,
modal: true,
height: 425,
width: 475,
buttons: {
'Add Recipient': function () {
$.ajax({
type: "POST",
url: $("#add-recipient-form").attr('action'),
data: $("#add-recipient-form").serialize(),
dataType: "text/plain",
success: function (response) {
$('#dialog-form-add').dialog('close');
$("#grid").load('/Default/ #grid', function () {
$('tbody > tr:first')
.effect("highlight", {}, 2000);
});
},
error: function (response) {
alert(response);
$('#dialog-form').dialog('close');
}
});
},
Cancel: function () {
$('#dialog-form-add').dialog('close');
}
}
});
$('#requestdate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#add-recipient')
.button().click(function () {
$('#dialog-form-add').dialog('open');
});
});