jQuery load() does not work either Chrome or Firefox - javascript

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!

Related

Unknown error using AJAX to stay in the same page

Following this previous link, I tried a new AJAX code, but still getting the same result (Data is inserted correctly, but can't stay in the same page).
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
});
e.preventDefault();
});
});
The form has an id="form1" and submit button inside this form is id="insert".
Any help is appreciated, need to fix this today.
The success function should be closed before closing AJAX function. You forgot to add a closing }:
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize() + "&insert=yes"); // add this
} //<--------------------------------------- You missed this
});
e.preventDefault();
});
});
You are sending the insert key as a parameter to post, but it doesn't work because you are not adding it while sending to AJAX. So add that and it works.

How to use Notify js?

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....

Ajax function working in IE but not Firefox

I have an ajax function is called when a form is completed. It is suppose to redirect to a certain page if there is a success for a failure. When I run the form in IE, it works perfectly but in Firefox, the page does not redirect at all. It just refreshes the page. Here is the ajax code:
$.ajax({
url: "someURL",
type: "POST",
dataType: "xml",
data: params,
success: function () { window.location = 'success_page.htm' },
failure: function () { window.location = 'error_page.htm' }
});
Well, there's a minor mistake in your code: you are missing some semicolons:
$.ajax({
url: "someURL",
type: "POST",
dataType: "xml",
data: params,
success: function () { window.location = 'success_page.htm'; },
failure: function () { window.location = 'error_page.htm'; }
});
If this still doesn't resolve your problem, then I would guess there is something wrong with your params variable. Could you show us the whole code?
try
window.location = '/error_page.htm'
Sometimes working with IE I had the same problem, I use window.location.href instead of window.location

Load content in div on page load

I currently have the following:
HTML:
<div class="content-class"></div>
JQuery Ajax:
$(document).ready(function() {
$(document).on("click", ".content-class", function(event) {
event.preventDefault();
var post = $(this);
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* some data */ },
success: function(data) {
// load content from php file into .content-class
});
});
});
How do I change that function so that it loads the content from the PHP file into .content-class without having to click it (so that it does it on page load)?
Thanks.
Just remove the click event listener and do the ajax straight away:
$(document).ready(function() {
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* some data */ },
success: function(data) {
// load content from php file into .content-class
$('.content-class').html(data);
});
});
as PSL said, just move the ajax call outside of click event handler:
$(document).ready(function() {
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* some data */ },
success: function(data) {
// load content from php file into .content-class
});
});

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.

Categories