How to use Notify js? - javascript

I'm trying to give a success notification from my jQuery to the client...... this is how my script looks like.....
$('#submit').click(function () {
$.ajax({
type: "POST",
url: "../Home/Index",
data: $('#form').serialize(),
success: function(data){
$('#message').notify("Access Granted");
},
error:function(){
alert("Error!!!!");
}
});
return false;
});
But the notify part wont work in this..... it wont even give me an error... nothing happens.........
I have included the jQuery and Notifyjs scripts as well in my page....

Related

jquery:ajax not firing in document getready

I have added jquery in head section and below code are in body section.
Problem is this isn't working.
Even alert is not showing. I am not getting any error in firebug.
I want to execute ajax on page load. I am not sure my approach is good.
Please advise. Below are the js code.
<script type="text/javascript">
$('document').ready(function(){
alert('Test');
$.ajax({
type: 'post',
url: 'profile_exec.php',
cache: false,
dataType: 'json',
data: uid,
beforeSend: function() {
$("#validation-errors").hide().empty();
},
success: function(data) {
var applied_counts = data.applied_count;
alert(applied_counts);
},
error: function(xhr, textStatus, thrownError) {
alert('Something went to wrong.Please Try again later...');
}
});
return false;
});
</script>
As you can see this should work fine:
$('document').ready(function(){
alert('ready');
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
}).then(function(data){
console.log(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
since even the alert is not showing, check your html code. Maybe swap your jQuery with the google CDN served jQuery.
Maybe you have conflict or noConflict somewhere else. Check this out: jQuery.noConflict
Try this code:
jQuery(document).ready(function(){alert('test')})

jQuery load() does not work either Chrome or Firefox

I am newbie to jQuery... I intend to load html from another location. When I try to load something bigger, I don't get any error (except 'error') or anything, nothing happens instead. Here is my code:
$(function () {
var text;
$("a").on('click', function (e) {
$.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'html'
}).done(function (loadedData) {
text = $(loadedData).match(/\d{3}/g);
$.ajax({
url: '#Url.Action("MvcMethod", "Home")',
type: 'POST',
dataType: 'html',
data: {
fulltext: text,
filter: ''
}
})
.done(function (tagData) {
$("#target").html(tagData);
});
});
e.preventDefault();
});
});
I have a link, full path for a file. The file is exists of course. When I click on it, I would like to pass its content to an MVC action method.
What's wrong, help me pls.
Thanks.
UPDATE: the link maybe points OUT OF domain!

Javascript/Jquery stops working after Ajax call

I have an ajax call that works great the first time the form is submitted after that all javascript on the page seems to break. As well as the form won't submit with ajax again.
Here is my ajax call:
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
},
});
event.preventDefault();
});
I'm getting no errors in my console. Any ideas what might be causing this?
I solved the issue, the main page content was changing. Which was causing the javascript to unload. So I need to use Jquery .on/.live and then it works. For what ever reason this worked fine on one server and not on another.
Use as below: No Need to define event.preventDefault();
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
},
});
return false;
});
Remove disabled after submitting the form. And remove the , mentioned by #JustinRusso.
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
}
});
event.preventDefault();
});

Cannot use alert() in a jQuery method

When using jQuery to make an AJAX call, for the time being I want to just want to have a popup box (using alert()) showing me the response text.
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
var $button = $(this);
$.ajax({ url: 'getdata.php',
data: // <parameters>
type: 'get',
dataType: 'json',
success: function(output) {
// do something
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
The response text prints out fine. However, the alert() dialog is nowhere to be found.
Please help this poor noob.
Here is a jsfiddle with something very close to your code, working, the alert box pops up.
http://jsfiddle.net/pN869/
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
console.log("clicked");
var $button = $(this);
$.ajax({ url: 'getdata.php',
type: 'get',
dataType: 'json',
success: function(output) {
console.log("success");
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
Clean the browser cache. There will likely be branded the option of not showing more alert.
Testing in different browsers.
I hope that is helpful.

Display loading while retrieving data using Ajax method

I am using ajax, sometimes it takes time to load all the data from my database therefore I need to find a way to display (Loading...) While the data is not yet complete. Below is my sample code, and I am looking for some event while the data is still in process.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$('#para').html(data);
}
});
It is very simple..
before you call the ajax start your loading image..& after the success hide the image
for eg :
$.fancybox.showLoading();
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$.fancybox.hideLoading();
$('#para').html(data);
}
});
here
$.fancybox.showLoading()
is my function in which I have the property of displaying the loader,
This will be internally called whenever an ajax call is made.
$.ajaxStart(function() {
$("img#loading").show();
});
$.ajaxComplete(function() {
$("img#loading").hide();
});
HTML
<img src="../images/loading.gif" alt="wait" id="loading"/>
<div id="loading">LOADING...</div>
var loading = $("#loading");
loading.hide();
function doAjax() {
loading.show();
$.ajax({
url: "/js/beautifier.js",
success: function (data) {
loading.hide();
}
});
}
doAjax();
on jsfiddle

Categories