f:ajax and jquery's `$(document).ajaxStart` dont work together? - javascript

I'm trying to get a 'loading' div for my ajaxified website.
using JSF 2.0's f:ajax tag for adding ajax to the website and 'trying' to make the loadin div show using jQuery $(document).ajaxStart function.
The jQuery code part looks like this:
$(document).ajaxStart(function(){
console.log("ajax start");
$('#ajaxBusy').show();
}).ajaxStop(function(){
console.log("ajax end");
$('#ajaxBusy').hide();
});
The log functions are never called.
Any Idea why? Do JSF ajax and javascript ajax not work together?
Thanks!

You should use jsf.ajax.addOnEvent(callback) to display a loading div. Maybe addOnError too.
See the documentation
jsf.ajax.addOnEvent(statusUpdate);
...
var statusUpdate = function statusUpdate(data) {
...
}
You will need to work with data.status
begin: before the request is sent
complete: request recieved
success: request succesfully processed (without errors)
Examples using this api:
http://weblogs.java.net/blog/driscoll/archive/2009/10/19/request-aggregation-jsf-2-ajax
http://weblogs.java.net/blog/driscoll/archive/2009/05/jsf_2_ajax_even.html

The shorthand $ can be the problem if using jsf, component libraries and jquery.
Try to call jQuery this way:
jQuery(document).ajaxStart(function(){ ... });

That's correct. Different JSF implementations may use different AJAX engines, and the jQuery ajaxStart/ajaxStop only apply to those components that route AJAX requests through the jQuery $.ajax function.
In contrast, if you're using Primefaces, the jQuery ajaxStart/ajaxStop events will fire and the jsf.ajax.onEvent will not fire.

Related

Change div content after loading it with ajax load method

index.html page :
I am loading the new.html page using ajax load method and then tried to change the content of the div#rr but it did not work!
any solution ?
why your code $('#rr').html('modfied'); is not working because you are calling the change before jquery ajax.load() method is able to load the content from your new.html and as result your id #rr is not found. So, instead of calling the modify code after the load statement call the modifying statement in your load()'s complete()
as:
$('#btn').on('click', function () {
$('.container').load('new.html', function () {
$('#rr').html('modfied');
});
});
and please go through the jquery documentation for more info on how to use the functions Jquery Documentation for Load() funciton.
Try to call the function inside the ajax call function.
$('.container').load('new.html',function(){
$('#rr').html('modified')
});
next time please do not put image for code.

Select2 on elements loaded with JQuery

I'm using select2 on a project, and is working as it should, initiating the select2 using:
$(function() {
$(".elegible").select2();
});
The issue comes in when I'm trying to call de function to elements loaded by JQuery, I don't know how to call that function. I've tried "on" but it does not load the selects with the select2. The only thing I found is this:
$(document).ajaxComplete(function(e, xhr, settings){
$(".elegible").select2();
});
But this calls that function every time an ajax call is completed, even in those cases when I'm not needing the select2. My question is: How can I call the select to on elements loaded later? Is the method that I'm using right now valid? Can I improve that?
Thanks!
Adding Info:
I call the new content by getting it from another page - which loads the select - using ajax:
$.get('detalle_miembro/' + this.id)
.done(function(result) {
$('#detalle_miembro').html(result);
});
And placing it, in a div: <div id="detalle_miembro"></div>
Here is how you can call select on just the new content added:
$.get('detalle_miembro/' + this.id).done(function(result) {
$('#detalle_miembro').html(result).find(".elegible").select2();
});

jQuery stops working after ajax loading

some info
I'm working on a webpage that can load data on multiple layouts, so user can choose which one is best. It can be loaded in a list or a cards like interface, and the data is loaded using ajax.
In this page I also have a notifier for new messages that the user received. The ajax function is new, and when page was loaded by the php scripts, the js script (that add a badge with the number of unread messages to a link on a menu item) was working ok.
I'm using HTML5, PHP, jQuery and a mySQL DB.
jQuery is imported onto the HTML using
<script src="https://code.jquery.com/jquery.js"> </script>
So it's a recent version.
the problem
Now, when I load the data onto the page using ajax, the js script won't work anymore. I had the same issue with another js script and I managed to solve it by using the delegate event binder.
But my unread messages updater runs on a time interval, using
<body onload="setInterval('unread()', 1000)">
the unread() js is quite simple:
function unread() {
$(document).ready(function(){
$('#menu_item').load('ajax_countNewMsgs.php');
});
}
it calls a php script which grabs the unread msgs count from the DB and echo into a element that jQuery will point. Hope I'm being clear.
The problem is that I cannot figure out how I would call a timed event using delegate. Without much hope I've tried
$(document).on('ready()','#menu_item', function () {
$(this).load('ajax_countNewMsgs.php');
});
That didn't work.
I read many posts about js stop working after changes in the DOM, but, again, I couldn't figure out a way to solve that, nor found a similar question.
Any help or tips would be highly appreciated.
EDITED to change second php script's name
2nd EDIT - trying to make things clearer
I tried the way #carter suggested
$(document).ready(function(){
function unread(){
$.ajax({
url: 'ajax_countNewMsgs.php',
type: 'GET',
dataType: 'html',
success: function(response){
$('#menu_item').html(response);
},
error: function(response){
//no error handling at this time
}
});
}
setInterval(unread(), 1000);
});
the ajax_countNewMsgs.php script connects to the DB, fetch the unread messages, and echoes the number of unread messages.
If I try to apply the ajax reponse to another element, say, the <body> the results are as expected: at each 1 sec , the body html is changed. So the function is working.
As I said, none of my JS changes the #menu_item. Actuallly this element is part of another php scritp (menu.php) which is imported to the top of the page.
the page structure is this way:
<html>
<head>
some tags here
</head>
<body>
<?php include (php/menu.html); ?>this will include menu with the #menu_item element here
<div id='wrapper'>
<div id='data'>
here goes the data displayed in two ways (card and list like). Itens outside div wrapper are not being changed.
</div>
</div>
</body>
</html>
Even though the elemente is not being rewritten js cannot find it to update it's value.
It's not the full code, but I think you can see what is being done.
$(document).on('ready()','#menu_item', function () {
is an invalid event listener. If you wanted to be made aware of when the DOM is ready you should do this:
$(document).ready(function () {
However I don't think that is actually what you want. Your function unread will fire repeatedly but it attaches an event listener everytime. Instead if you want to make an ajax call every so many seconds after initial page load, you should do something like this (dataType property could be html, json, etc. pick your poison):
$(document).ready(function(){
function makeCall(){
$.ajax({
url: 'ajax_countNewMsgs.php',
type: 'GET',
dataType: 'html',
success: function(response){
//handle your response
},
error: function(response){
//handle your error
}
});
}
setInterval(makeCall, 1000);
});
remove that on your unread function:
$(document).ready(function(){
WHY?
The Document is already "ready" and this document state will only fired 1x - After that the "ready state" will never ever called. Use follwing syntax:
jQuery(function($){

Alternative to returning javascript tag in Ajax response

One ajax request in my code returns some html within which certain elements need custom event handling, like this:
<div>
<!--some html-->
<button id='specialbutton'></button>
</div>
<script type='text/javascript'>
$("#specialbutton").click(function(e){
//some special handing of html above
});
</script>
I understand javascript returned from ajax request are not executed automatically, and using eval() to execute return js is considered insecure and generally bad practice. But the code I need to execute here is just local to the html snippet returned (in a Django template), including it in the boilerplate html that sends ajax request seems to violate the rule of seperation. Should I add attribute like 'data-role="specialbutton"' to the element, and globally use jQuery.live() to attach handlers, or what?
What is the best practice here? Any good advice?
You could use some pub/subbing so that the event is only triggered when there is a successful ajax request like so:
$.ajax({
success: function( data ) {
$(document).trigger('some/special/event');
}
})
$(document).on( 'some/special/event', function() {
$("#specialbutton").on( 'click', function(e){
//some special handing of html above
});
});
This will allow you to maintain separation of code and only add the event listener if the the HTML is on the page.
Here is a link to a great post about using custom jQuery events: http://www.sitepoint.com/jquery-custom-events/

Why function in Javascript file does not load in master page?

I have a master page that has javascript files added with asp:ScriptReference, but in document.ready ( $(function(){}) ) the functions defined in the Javascript file do not load, and I get this error:
Microsoft JScript runtime error: Object doesn't support property or method 'nanoScroller'.
Whereas the same code runs in other simple projects.
Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});

Categories

Resources