Hi My ajax call is not working in chrome and firefox but it is in Safari.
I am not able to figure it out as it is working on all browsers locally.
My site is recently had SSl certificate.Is that something causing problem?
I am not sure. For reference below is my Ajax function
<script type="text/javascript">
//<![CDATA[
$(function () {
$("#selectReport").hide();
$("select#countryId").change(function () {
var manu = $("#manufacturerId option:selected").text();
$("#Manufacturer").val(manu);
$("#selectReport").show();
});
$("select#reportId").change(function (e) {
e.preventDefault();
var country = $("#countryId option:selected").text();
$("#CountryName").val(country);
});
$("select#reportId").change(function (event) {
event.preventDefault();
var reportName = $("#reportId option:selected").text();
var manufacturer = $("#Manufacturer").val();
var countryName = $("#CountryName").val();
var theUrl = "/Reports/GetReport/" + reportName + "/" + manufacturer + "/" + countryName;
$.ajax({
url: theUrl,
type: 'get',
success: function (data) {
alert("I am success");
$('#ajaxOptionalFields').html(data);
},
error: function () {
alert("an error occured here");
}
});
});
});
//]]>
</script>
seems you didn't load the Jquery Lib,
http://jquery.com/download/ download Jquery lib and put it in your js folder and load it.. then it should understand what "$" is... in Jquery i always start script like:
$( document ).ready(function() {
//do sth here
});
Instead of copying link directly please copy relative paths so that it will be secured.
For example copy http://code.highcharts.com/highcharts.js in higncharts.js and point that to relative path.
Related
I load html content along with javascript (using getScript) on a page using the jquery load function with a callback. But I am encountering a strange situation in that the javascript that is being loaded isn't recognized either on the first try (it does work on the 2nd or subsequent try) or without an alert in place. I have read through similar situations and the suggested solution is to have a callback function for load. But I already have a callback function in place. Here is the code:
$("[id^=ajax_]").click(function(e){
var linkid = $(this).attr("id");
var arr = linkid.split("_");
var link = arr[1];
ajax_load_content_and_get_script(link);
});
function ajax_load_content_and_get_script(link) {
var url = "/" + link;
$("#pagecontent").load(url + "/ajax", function() {
//alert(); //works with this un-commented
$.getScript("/js/" + link + ".js");
});
}
As you could see above, the script that is being loaded (with getScript) is recognized and works fine if I have the alert statement uncommented. But without the alert, the script isn't recognized. I am already using a callback function for the load as seen above.
Thanks for your help with this.
look like this?
$("button").click(function(e){
var linkid = $(this).attr("id");
var arr = linkid.split("_");
var link = arr[1];
ajax_load_content_and_get_script(link);
});
function ajax_load_content_and_get_script(link) {
var url = "/" + link;
$.ajax({
url: url + "/ajax",
type: 'POST',
async:false
}).success(function(data){){
$("#pagecontent").html(data);
$.getScript("/js/" + link + ".js");
});
}
http://jsfiddle.net/aswzen/w4068ygL/3/
I'm loading data.js into my a.html page.
In my data.js, i am checking if a.html has jquery and loading it if not. Right after loading jquery i am making an ajax call but i am getting
$ is not defined
exception.
Here is my data.js
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://localhost:8001/jquery-min.js';
headTag.appendChild(jqTag);
}
var url = 'http://127.0.0.1:5000';
$.ajax({
url: url,
success: function(data) {
$("#" + containerId).html(data);
},
error: function(e) {
console.log(e.message);
}
});
From developer console, i can see jquery is loaded. I can see it in both Resources and head tag.
The jQuery (and $ thus) isn't loaded yet when you make the AJAX call since you only just added the script tag to your DOM. After that it starts the downloading. Instead you should bind the onload event of script tag and perform the actions after it has been loaded.
Example
jqTag.onload = function() {
var url = 'http://127.0.0.1:5000';
$.ajax({
url: url,
success: function(data) {
$("#" + containerId).html(data);
},
error: function(e) {
console.log(e.message);
}
});
}
jqTag.src = 'http://localhost:8001/jquery-min.js';
change this Line :
if(typeof jQuery=='undefined')
to
if(typeof jQuery== undefined ) {
To be specific, I want to disable a function from executing on successful ajax request. I do not know whether that's possible or if any workaround is there. Have a look at what I do:
<script>
$(document).ready(function() {
function load(){
...
...
}
});
$.ajax({
...
success: function(option){
disable load function // I want this functionality somehow
}
});
</script>
Can someone help? I need this because load function is a scrolling function which loads products on scrolling to end & on ajax request another file uses the same, so somehow I need this function disabled. Any help will be appreciated.
EDIT
I want this function working on first time page load but with a successful ajax request I want this function be stopped. I'm putting the whole code for you to get the clear idea.
<script>
$(document).ready(function() {
var track_load = 0;
var loading = false;
var total_groups = <?php echo $total_groups; ?>;
var cat_id= <?php echo $cat_id; ?>;
$('.autoload').load("xyz.php", {'group_no':track_load, 'cat_id':cat_id}, function() {track_load++;});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height())
{
if(track_load <= total_groups && loading==false)
{
loading = true; //prevent further ajax loading
$('.animation_image').show();
$.post('xyz.php',{'group_no': track_load, 'cat_id':cat_id}, function(data){
$(".autoload").append(data);
$('.animation_image').hide();
track_load++;
loading = false;
}).fail(function(xhr, ajaxOptions, thrownError) {
$('.animation_image').hide();
loading = false;
});
}
}
});
});
</script>
<script>
$(document).ready(function(){
$('#subcat').change(function(){
var val=$(this).val();
$(this).value= val;
$('#furcat').show();
if(val=='A'){
$('#furcat').html("<option selected='true' disabled='disabled'>Choose Further Category</option><option>B</option><option>C</option>");
var sub_cat=41;
}
$('.autoload').empty();
$('.animation_image').show();
$.ajax({
type: "POST",
url: "abc.php",
data: {sub_cat:sub_cat},
success: function(option){
$('.autoload').replaceWith(option);
$('.animation_image').hide();
}
});
});
});
</script>
And as I need the same scrolling function in upcoming data, I'm involving another php file which uses the same code as this & to remove double ajax request I need to disable this function.
You can create flag which you can set to 'true' on Document Ready and then set it to 'false' after successful ajax call.
<script>
var flag=true;
$(document).ready(function() {
flag = true;
function load(){
if(flag){
...
...
}
}
});
$.ajax({
...
success: function(option){
flag=false;
}
});
</script>
you can simply add the logic of flag variable. which will make sure that your load method will not execute after ajax success.
<script>
$(document).ready(function() {
var flag=false;
function load(){
if(!flag){
...
...
}
}
});
$.ajax({
...
success: function(option){
flag=true;
}
});
</script>
hope this helps you
You don't need any if-statements and additional variables.
Look at this code:
var load = function () {
...
};
$( document ).ready(function() {
$.ajax({
...
success: function () {
//"delete" the `load` function
load = '';
}
});
});
The load function is stored into a variable and when the ajax request was successful, that variable is cleared.
I am trying to load content from a new page using AJAX. The test website I am working on is dev.dog-company.com.
This is my code:
$('a[rel="load"]').click(function(){
//var siteurl = "";
var link = $(this).attr("href");
$(this).attr("href", '#');
$('#slider-wrapper').slideUp();
$('#content').wrap('<div id="wrap"></div>').css('opacity', '0.75').css('background-color', 'black');
$.ajax({
type: 'POST',
url: link,
success : function(data){
var response = $(data);
var head= response.find('head');
var slider = response.find('#slider-wrapper');
var content = response.find('#content');
$('#content').unwrap('<div id="wrap"></div>')
jQuery("head").html(head);
if(slider != null)
jQuery("#slider-wrapper").html(slider).slideDown();
jQuery("#content").html(content);
return false;
}
$(this).attr("href", link);
})
});
I am trying load the content on click but the page reload everytime without the click working. Also I am not sure if I need to be doing something else other than what I am doing to my code. The rel="load" is only on home, info->AboutUs & FAQ.
Your help is appreciated.
Update:
I still can't get it to work. This is my latest code. And the site is still running it. When i use the debugging for chrome it never goes through my code. is it the re="load" that is causing the problem?
Update:
My initial problem was not having the document ready. But not I think the way I am parsing the information isn't working. I tried find and filter both seem to not work correctly. Also how do I change the url in the browser after I it pushes the post.
Update
After a lot of messing around with it I got it to partially work. One thing I can't do it replace head. and then the data pushed in slider is there but it does not seem to work on the website. It doesn't slide down like I have it in the code.
$('document').ready(function() {
$('a[rel="load"]').click(function(e){
//var siteurl = "";
e.preventDefault();
var link = $(this).attr("href");
$('#slider-wrapper').slideUp();
$('#content').wrap('<div id="wrap-overlay"></div>');
/*$('#wrap').css({
'opacity': '0.75',
'background-color': 'black',
'z-index' : '10'
});*/
$.ajax({
//ajax setting
type: 'POST',
url: link,
dataType: 'html',
success : function(data){
//parse data
var response = $("<div>").html(data);
console.log(typeof(response));
console.log(response);
//var head = response.find('<head>').html();
slider = response.find('#slider-wrapper').html();
var content = response.find('#content').html();
console.log(content);
//console.log(head);
//console.log(slider);
//Post data
$('#content').unwrap();
//jQuery("head").empty().append(head);
if(slider != null){
jQuery("#slider-wrapper").empty().slideDown().append(slider);
}
jQuery("#content").empty().append(content);
return false;
}
})
});
});
Try this:
$('a[rel="load"]').click(function(e) {
e.preventDefault();
// ...
});
You need to stop default browser behaviour on link click, which is following it.
I'm trying to get a file which takes a good few seconds to load in the background, so I can display a spinner at the same time.
I'm currently trying with an iframe in the background, and this works but I'm not sure how I can be notified when it's finished loading (so I can remove the spinner).
Any good ways of doing this? Any better solution than an iframe?
Here's my code so far:
<script>
$(document).ready(function() {
var link = $('.generate-pdf');
link.click(function(e) {
e.preventDefault();
var spinner = $("<img src='/assets/images/ajax-loader.gif' />");
var iframe = $('<iframe src="' + link.attr('href') + '" style="height:0;width:0;visibility;hidden;display:none;"></iframe>');
link.before(spinner);
link.before(iframe);
});
})
</script>
According to this site, given that my Content-disposition is attachment I can't guarantee to receive any events. Can I poll any properties on the iframe to find out?
Have you tried
iframe.load(function(){
log("done");
})
In the end, I had to do this by contacting the server, and seeing if the file had been sent to the browser. I'd still like to see a pure client-based implementation.
Thankfully the download was generated with PHP so this was ok.
<script>
$(document).ready(function() {
var link = $('.generate-pdf');
link.click(function(e) {
e.preventDefault();
var spinner = $("<div class='spinner'><img src='/assets/images/ajax-loader.gif' /><span>Your PDF is being generated...</span></div>");
var downloadKey = new Date().getTime();
var iframe = $('<iframe src="' + link.attr('href') + '&downloadKey='+downloadKey+'" style="height:0;width:0;visibility;hidden;display:none;" onload="alert(\'hello\')"></iframe>');
link.before(spinner);
link.before(iframe);
var hasFinished = function(downloadKey, callback) {
var that = this;
$.ajax({
url: "index.php?controller=is-download-finished&downloadKey=" + downloadKey,
success: function(data) {
if (data) {
callback();
} else {
setTimeout(function() {
that(downloadKey, callback);
}, 1000);
}
}
})
};
hasFinished(downloadKey, function() {
spinner.remove();
iframe.remove();
});
});
})
</script>
The extra request just returns JSON true or false.