I have an Ajax Loaded Div in my page and, inside that div, a Jquery plugin load my Google Spreadsheet. I need to add some "event listening" to detect when that spreadsheet is loaded, but there is a problem with the unpredictable time to load and the fact that a event INSIDE my div (with external html content), as far as I know, can't be listened on my "parent" window. I've tried many ways to do that, by the way.
I'll post my code, but I don't think it can help. What can I say is: The height of my div change when the content is loaded. The Callback function can't work in this case 'cause my script (inside div) only get the spreadsheet after load the page.
index.html
$.ajax({
url : "test/index.html",
type : "get",
async: true,
success : function(result) {
$('.mailcontrol').html(result);
},
error: function() {
alert("Error");
}
});
test/index.html
<script type="text/javascript">
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets/ssid'});
</script>
Any ideia about some event listening in my case? Thanks!
EDIT:
jrummell answer gave me the ideia to ignore the external html file using the plugin inside the same page, so, I could use the callback function of "sheetrock", as suggested by Andre.
Thanks for the answers!!
New code:
$("#target2").click(function () {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'sheetrock.min.js';
$("#dat").append(script);
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets',
callback: function() {
}
});
});
Try initializing your spreadsheet plugin after the content is loaded:
$.ajax({
url : "test/index.html",
type : "get",
async: true,
success : function(result) {
$('.mailcontrol').html(result);
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets/ssid'});
},
error: function() {
alert("Error");
}
});
You can use Jquery on() event listening, like this:
$('.mailcontrol').on('eventName', '#dat', callbackFunction);
The "selector" parameter is a selector string to filter the descendants of the selected elements that trigger the event. In your case "#dat". I suggest using "resize" as eventName.
Reference: http://api.jquery.com/on/
Have you tried the original sheetrock callback?
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets/ssid',
callback: function() {
//trigger event to be caught
}
});
Reference: https://github.com/chriszarate/sheetrock#callback
Related
I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window complete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: '' + $this + '',
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div);
//call windowload but not working
windowload();
//Also tried this but not working
$('#style').on('load', function(){
windowload();
//Some functions work only after ajax content fully loaded
});
});
});
Edit :
I need a function after ajax content fully loaded not after ajax request complete.
I have been trying to find the solution to this exact same problem for hours. What worked for me was
$(document).ajaxComplete()
I put my code in there and when Ajax was complete and the content of the div fully reloaded, I added the style I wanted to add. Hope this helps someone. Calling the method from ajax success won't work.
If you need to call a single function at multiple points in the pages lifecycle (as you describe above, where the logic is needed on both page load and also when an AJAX request completes), then you can extract the required logic to its own function to be called as needed. Try this:
function htmlLoaded() {
// Some functions work only after window load
}
$(window).load(htmlLoaded); // called on page load
$(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
$.ajax({
url: this.href,
dataType: 'html',
success: function(html) {
var styleHtml = $(html).find('#style');
$('#style').html(styleHtml);
htmlLoaded(); // called after the AJAX request completes successfully
});
});
});
});
Also note that I made a couple of amendments to improve the logic in your JS code.
Try this:
$("#Style").ready(function(){
console.log('Style is fully loaded.');
windowload();
});
Hope this will help.
When you call a function you must use the () symbol like windowload().
Here is the fixed, well-indented code : (I removed the empty quotes, useless here)
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: $this, // Removed the empty quotes which are useless here
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div.html());
$('#style').ready(windowload);
}
});
});
});
By adding a new script tag which will run the windowload() function, we solve the problem. Because when this script is runned all HTML content placed before this tag has been loaded.
I have created a new JQuery widget for my project and I need to call that method on page load.
Here is the widget sample:
(function($){
$.widget("mywidget", {
options: {
},
_create: function(){
var self = this;
$.ajax({
url: "/api/1.0/getdata",
type: "GET",
contentType: "application/json",
success: function(arg) {
//will be inserting the details from the json call into the <div>
var data = arg;
},
error: function(resp){
}
});
}
});
})(jQuery);
Here is how I am trying to make the call to the widget:
$(document).ready(function(){
console.log("show my widget");
$("#div").mywidget();
});
Here is the HTML I am trying to load for my widget:
<div id="div">
<p>Welcome to the newly created JQuery widget</p>
</div>
But when I do this nothing gets called, neither is the URL called, from which I am trying to access the data to show in my message nor the <div>. Any idea how can i access the widget on page load?
Syntax errors aside, using the latest stable jQuery UI I had to include a namespace in my widget name. Here is a jsfiddle with your code working. Note that it will correctly output an error attempting to hit /api/1.0/getdata.
If this solution doesn't work in your setup, ensure that the widget initialization code is being run before attempting to use it.
It seems that your document ready is just missing brackets..
try -
$(document).ready(function(){
console.log("show my widget");
$("#div").mywidget();
});
I have a php page which has lot's of code of html and javascript inside it.Ihe other page use ajax to send an id to the first page and get the results and put it inside a div element. Now I want to run those returned codes which contains javascript and html codes.
How should that be done?
This is my ajax request to the first page:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "showing.php",
data: "s_id="+s_id+"&submit=true",
success: function(msg){
str=$.trim(msg)
document.getElementById('tabs-2').innerHTML = str;
document.getElementById("ui-id-2").click();
}
})
I think event delegation can solve your problem.
Like below:
Use $.on(). Instead of registering events on the element you register on a parent which will not be removed
Ex:
$('#tabs-2').on('click', '#ui-id-2', function(){
//do something
})
Hi can any body share the link for x2js,
I want to load this js file dynamically.
I followed the below code its not working
EffectaJQ.ajax({
async: false,
url: "https://x2js.googlecode.com/hg/xml2json.js",
dataType: "script"
});
If you want to load it on page load, use this
var my_script = document.createElement('script');
my_script.setAttribute('src','https://x2js.googlecode.com/hg/xml2json.js');
my_script.setAttribute('type','text/javascript');
document.head.appendChild(my_script);
Or if you want to load it on some event put this code inside some function and call that function on event.
The question might be a little misleading as I don't want to know how to open a html document in a div ,but I asked the question as I am currently facing a problem where I can't replace the html file which I have already placed in a div
I have already placed a html file in a div using ajax like this:
$.ajax({
url: 'calender.aspx',//this is html.aspx file
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);//mainBar is the div
}
});
this file gets placed on page load i.e document.ready function ,till here everything is fine.....my trouble starts when I want to replace the file,what I do is call a javascript function say replaceFile() on button click and write the same code to replace the file (changing the url of course)
like this
function replaceFile()
{
$.ajax({
url: 'Another.aspx',
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);
}
});
}
but this doesn't work,please help me out!
I guess your binding is not working when you try to click on the content you loaded via ajax . So you might want to change the binding of onclick from
$("#someButtonId").click(function(){
replaceFile();
});
to
$(document).on("click","#someButtonId",function(){
replaceFile();
});
jQuery on works with current and future elements.
with this function you will load the page into the element named result
.load( url , data, complete(responseText, textStatus, XMLHttpRequest)] )
function replaceFile(url)
{
$('#result').load(url, function() {
alert('Load was performed.');
});
}
replaceFile('htmlfile.html');
You can load this in Firebug and set a break point at $(".mainBar").html(data); to make sure it's being called. You don't have a failure handler, so it's possible that it's actually receiving an HTTP failure code, not a success code.
I'd also look at the network traffic under the Net tab to see what the request/response looks like. That's an easy way to find out what is really going on with most AJAX calls. IE9 has similar developer tools if you want to use it and not Firefox or Chrome.