I am using jQuery notify plugin. I include all the JS files in header. Now I am calling the $.notify function in another JS file where I am using AJAX, but there I cannot access the $.notify function.
My ajax file is here which I am including in header also:
$.ajax({
url:'index.php?page=ajax_insertdimension.php',
type:'post',
data:'code='+dcode+'&des='+ddesc,
success:function(msg){
$.notify({
title: 'Email Notification',
text: 'You received an e-mail from your boss. You should read it right now!',
image: "<img src='images/Mail.png'/>"
}, {
style: 'metro',
className: 'info',
autoHide: false,
clickToHide: true
});
addcols();
}
})
Sometimes for success method to work, you have to specify what data type "msg" argument is there in parameter for success function. This can be done by adding dataType parameter to post method as specified in documentation here jQuery.post()
$.ajax({
url:'index.php?page=ajax_insertdimension.php',
type:'post',
data:'code='+dcode+'&des='+ddesc,
success:function(msg){
$.notify({
title: 'Email Notification',
text: 'You received an e-mail from your boss. You should read it right now!',
image: "<img src='images/Mail.png'/>"
}, {
style: 'metro',
className: 'info',
autoHide: false,
clickToHide: true
});
addcols();
},dataType: "json"})
This should do the work for you. You can put a debugger in success function and test, whether your callback is even getting called or not.
Related
There isn't really a problem, I just know that the way I have my current Jquery plugin working that it is not the most efficient and I am hoping someone could point me in the right direction.
So, this is the behaviour of the plugin:
1. On click of a link with a certain class (there could be multiple links with the same class), options are passed to the plugin, some are hard coded but some are gathered from data-attributes.
2. A bootstrap modal is shown (blank modal).
3. Ajax post to external page with options from function posted.
5. Ajax success callback puts the new html content into the modal to display.
This is my current jquery plugin
(function($){
$.fn.custom_xedit = function( options ) {
var settings = $.extend({
type: this.attr("data-type"),
selectsource: this.attr("data-selectsource"),
mask: this.attr("data-mask"),
title: this.attr("data-title"),
pk: this.attr("data-pk"),
posturl: this.attr("data-posturl"),
originalvalue: this.attr("data-originalvalue"),
name: this.attr("data-name")
}, options );
this.addClass('xedit___el___active');
$('#xedit_modal').modal({
backdrop: 'static',
keyboard: false
});
$.ajax({
type: 'POST',
url: 'url',
data: {
'type': settings.type,
'selectsource': settings.selectsource,
'mask': settings.mask,
'title': settings.title,
'pk': settings.pk,
'posturl': settings.posturl,
'originalvalue': settings.originalvalue,
'name': settings.name
},
success: function(callback_modal){
$("#xedit_modal").html(callback_modal);
}
});
};
}( jQuery ));
And I currently call it by:
$('body').on("click", ".some_class", function () {
$(this).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});
});
It would be nice to be able to call it without surrounding it with a on click, but not sure how to do that (like below:)
$(.some_class).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});
I am using JQuery validation plugin "remote" method for Ajax based validation.
But I have to make some third party calls to verify data and it takes approx. 30 seconds.
So need to show some message to end user while data is getting processed by Ajax request. Can anyone help to achieve this?
You can see an example from below that i done:
jQuery Validate (Remote Method):
$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: {
url: 'your-url-or-path-here.php',
cache: false,
dataType: 'POST', // Post, Get, Json, etc
data: {
field: $('.element').val()
}
beforeSend: function () {
$('.loading').css('display','none').show();
},
complete: function () {
$('.loading').hide();
}
}
}
}
});
I'm trying to trigger a Bootstrap Growl message if $.post call fails. How I know if it fails? Because backend part (PHP script) returns this JSON:
{
"success":false,
"errors":{
"usuario":{
"captcha":[
"The captcha is not valid."
]
}
}
}
So I did this in jQuery:
$.post($form.attr('action'), $form.serialize(), function(result) {
// ... Process the result ...
}, 'json').fail(function(result) {
console.log("fail");
$.growl({
icon: "fa fa-paw",
title: "<strong>Error en datos</strong>",
message: "Los siguientes errores ocurrieron",
type: "danger",
allow_dismiss: true,
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
}
});
});
But none the message or the console.log() works so I don't know if the right is .fail() or .error() or all the time is success and then I need to verify if success at JSON comes with FALSE which means some error.
As a second little question, how I move inside the JSON looking for errors strings for show them as LI inside the message at Growl element?
The fail clause will be triggered if the response contains an http error, for example, a 400 or a 500. If the http response is 200 - ok, then you won't get a failure.
Try this code:
$.post($form.attr('action'), $form.serialize(), function(result) {
//code for success
if (result.success) {
//TODO
}
//code for failure
if (!result.success) {
console.log("fail");
$.growl({
icon: "fa fa-paw",
title: "<strong>Error en datos</strong>",
message: "Los siguientes errores ocurrieron",
type: "danger",
allow_dismiss: true,
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
}
});
}//if failed
},
'json');
I think you are confusing a captcha failure and an ajax call failure as the same thing, if I am interpreting your question correctly, that is.
The ajax call itself is succeeding, which is why you see none of the ajax failure output. The JSON returned by the SUCCESSFUL call contains information(success:"false") stating that the captcha entry failed to pass it's test. Does that make sense?
You will need to take the success attribute in the result JSON and apply appropriate actions depending on it being a success true or false.
When i have fire ajax on mouseover, user profile is not displaying but second time when i mouserover on it then it is displaying. I have use tooltip for displaying user profile.
Please correct my code
$(document).ready(function(){
$(".user_profile").bind("mouseover",function(){
id = $(this).attr('id')
user_id=id.split('_')[1];
$.ajax({
url: "/admin/inbox/user_profile",
data: {user_id : user_id},
success: function(data){
$("#"+id).qtip({
content:{
text: data,
title:{
text: "User Profile"
}
},
style: {name:'blue', tip:true}
});
}
});
});
});
Because $.ajax is asynchronous, the mouseover event returns before the qtip is created.
When the page loads, you could run $.ajax to pull back data for all the user profiles displayed in the page in advance, store this data in an array, and then create each qtip with data from the already populated array.
I have resolve this problem by
I have read the solution:
"Because $.ajax is asynchronous, the mouseover event returns before the qtip is created.
When the page loads, you could run $.ajax to pull back data for all the user profiles displayed in the page in advance, store this data in an array, and then create each qtip with data from the already populated array.
"
$(document).ready(function(){
var i=0,j=0;
$(".user_profile").each(function(){
id = $(this).attr('id')
user_id=id.split('_')[1];
my_user_ids[i++]=user_id;
my_ids[j++]=id;
});
$.each( my_ids, function(index, value){
$.ajax({
url:"/admin/inbox/user_profile",
data: {user_id : my_user_ids[index]},
success: function(data){
myArray[value]=data;
$("#"+my_ids[index]).qtip({
content:{
text: myArray[my_ids[index]],
title:{
text: "New User's Profile"
}
},
show: 'mouseover',
hide: 'mouseout',
style: {name:'blue', tip:true}
});
}
});
});
});
You do not need to bind mouseover: it's already done by qtip plugin. Using bind you generate a "conflict" on events at first mouseover event.
You shound resolve, simply, using jQuery .hover instead of bind:
$(document).ready(function() {
$(".user_profile").hover(function() {
{
id = $(this).attr('id')
user_id=id.split('_')[1];
$.ajax({
url: "/admin/inbox/user_profile",
data: {user_id : user_id},
success: function(data) {
$("#"+id).qtip({
content: {
text: data,
title: {
text: "User Profile"
}
},
style: {name:'blue', tip:true}
});
}
});
});
});
I have some problem to execute the following jquery validation program
email: {
required: true,
email: true,
remote: "emails.php"
},
.........
in jquery validation
$.ajax($.extend(true, {
url: param,
mode: "abort",
port: "validate" + element.name,
dataType: "json",
data: "email="+data,
The above codeing executed. but my problem is how to create the emails.php. Because i dont know how to get value from js file to emails.php. Pls replay me...
iam not completely sure what you would like to accomplish using this code:
$.ajax($.extend(true, {
url: param,
mode: "abort",
port: "validate" + element.name,
dataType: "json",
data: "email="+data,
Why extend? extend merges parameter2, 3, ... into parameter 1. So, jQuery basically tries to put all you parameters into the little true.
i tried to construct an example for $.ajax which fits your needs:
$.ajax({
url: "emails.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
for examples on creating the server side part, have a look into the demo section of the distributed zip file:
http://jquery.bassistance.de/validate/jquery.validate.zip
Use jQuery validation plugins.
$('form').validate();
Now add email validation method
$("#email").rules('add',{remote:'check_email.php',
messages: {remote: "Email address already exist"}});
In check_email.php
if($count>0) {
echo "false";die;
}else{
echo "true";die;
}
For more you can also follow this http://php-tutorial-guide.blogspot.in/2014/03/jquery-validation.html