JSF 2.0 Ajax and javascript reloading - ajax

I use JSF Ajax on my menu links to load the content of the page.
content is loaded with ui:insert and ui:composition with template attribute.
ajax is work and load the content with no reloadin the all page but I have a problem with my java scripts.
when I click menu Items the script reload with every new ajax request.
what should I do to prevent script reloading?

I'm not sure I understood your problem clearly, but maybe you should try to play with the rendered attribute of the h:outputScript component, for instance:
<h:outputScript library="js" name="ajax-util.js"
rendered="#{myBean.renderAjaxFunctions}" />

Related

Includ mako file once page is loaded

I have a mako file included into a HTML template that takes time to load.
I want to load it only when the rest of the page is fully loaded.
Let's consider this html template fragment:
...
<section>
<%include file="widget.html"/>
</section>
...
I want the line <%include file..., to be read by the browser only when all the rest of page is loaded.
Any idea?
The browser doesn't read the <%include...—it's interpreted by the server before being sent to the browser.
You could have an onload JavaScript call that makes an AJAX request for "widget.html" and puts it in your page.

Load CSS and JS files after the content is loaded via AJAX

i have a Wordpress site that has a "home" and a "photos" page. On the "photos" page, there are specific CSS and JS files that load only on that page.
I am using the Advanced Ajax Page Loader plugin to load the content into a div via AJAX.
So, when I click on the "photos" link on the menu, the new content loads into the div but the CSS and JS files that were supposed to load are not being loaded, because the <head> of the document remains the same.
I need to load those CSS and JS files after the content is loaded via AJAX.
Is it possible?
Yes,
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
this function has a parameter for the footer.
For styles it doeSn't matter where they are loaded, i think.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style

Re-render of h:form using a4j:commandLink or a4j:commandButton does not work in IE9

I have h:form with some content and few links and buttons. a4j:commandLink/Button with render="#form" is used inside the form but when I click on this link ajax error comes up with XML response body. This issue is only coming in IE9.
It works perfectly in Firefox, chrome, IE7, IE8. Also, when I rerender section of form instead of complete form, it works fine.
Does anybody have clue about this, please?
After many hours of debugging, found that I was including some jquery JS files in inner XHTML which was included in dynamically. That inner XHTML has commandLink/commandButton which fire re-render of form. IE9 doesn't like this.
I moved js file inclusion script tag to Outer XHTML outside of h:form which resolved the issue.

Using plugin outside of Wordpress pages

I am trying to use lightbox plus plugin for Wordpress which works fine for most of my site.
I have a php page which is used by a jQuery AJAX function to retrieve data in order to paginate a large result set back in wordpress. This page is not part of wordpress.
I have managed to get Wordpress functions to work fine in this php page by using:
define('WP_USE_THEMES', false);
require('/home/love/public_html/dev/wp-blog-header.php');
require('/home/love/public_html/dev/wp-load.php');
However, in this page is an include, and within the included file is a link to an external sheet which is meant to be brought in with a lighbox:
<a class="" rel="lightbox" href="<?php bloginfo('url'); ?>/more-product-info?a=<?php echo $post->ID ?>">
<div id="moreprodinfo">More Info</div>
</a>
This method of retrieving information in a lighbox works ok on most parts of my site, but its just not working on the part that uses AJAX to retrieve the link to the lighbox page.
I assumed it was something to do with plugins not working when the page is not part of Wordpress, but all the Wordpress function have been working so why not plugins? Also my cufon plugin doesnt work on this ajax retrieved page either.
Is it becuase I am using .html javascript function to display the content retrieved by AJAX:
if(pageType == 'prizeHome'){
loading_hide();
$("#tab-prize-home #container").html(msg);
Any help would be appreciated
It looks like a common issue when using ajax to load html content :
You probably call lightbox and cufon when document is ready, which happens only once before your ajax call. You have to call again lightbox and cufon after your ajax call.

How to determine why unobtrusive validation is not working

Is there a way to trace why unobtrusive validation is not working?
I have disabled all my custom validators, and just using MVC validators, and still it posts back to the server for validation when I click submit.
It's driving me nuts. The only thing i can think of is that i have a hidden input that has no validation attributes on it other than [HiddenInput(DisplayValue = false)].
Is there a specific javascript function i can put a breakpoint in to determine which field is causing the form to submit?
EDIT:
I just realize that only IE8 is causing the server side validation. IE9, FF, and Chrome all are fine.
EDIT 2:
Ok, it must have been a cache issue or something. At some point it started working again, and it's still working even after restoring everythng.
Lesson learned. Alwasy clear you cache when you get goofy problems.
Make sure you have reference the following scripts and that the path is correct:
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
and that you have enabled client side validation in your web.config:
<add key="ClientValidationEnabled" value="true" />
Another important aspect is that if the form has been injected into the DOM as a result of an AJAX call, unobtrusive validation will not be attached to its elements and it will not work. You will have to attach it manually by using the $.validator.unobtrusive.parse method in your AJAX success callback after injecting it into the DOM.
Also FireBug's console tab is might be useful in showing potential javascript errors with your code.

Resources