I am facing a weird behavior in the wicket pages of the below hierarchy.
RootPage with few Abstract tabs added and In few Abstract tabs, based on the use case we have TabbedPanel of wicket UI Jquery. like this http://www.7thweb.net/wicket-jquery-ui/tabs/TabbedPanelPage?2. To navigate between tabs, I use AjaxTabbedPanel.
Issue1: Even the Default Jquery file is getting added to the page. But the UI components are not rendered with respect to Jquery
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-2.2.4-ver-F9EE266EF993962AD59E804AD9DEBE66.js"></script>
<script type="text/javascript" src="./wicket/resource/com.googlecode.wicket.jquery.ui.resource.JQueryUIResourceReference/jquery-ui-ver-0A819924D70A18322660DEE759225D2B.js"></script>
To overcome the above issue I have added the Jquery file by overriding renderHead method in RootPage. which only works on manual page refresh.
RootPage.renderHead:
#Override
public void renderHead(IHeaderResponse response){
super.render(response);
response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery.min.js")));
response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery-ui.min.js")));
}
Issue2: But since I made Ajax to navigate between tabs, refreshing page usingsetResponsePage() seems to be an unexpected way.
To solve the Issue1, I explicitly added jquery which lead to another problem of an explicit refresh.
Am I missing anything in the Issue1 which can solve the issue?
or Is there any way to refresh only my panels? to fix Issue2
Why do you contribute jquery.js yourself?
I'm not sure whether this is the cause of your problem but since Wicket also adds jQuery to the DOM I think you might have Javascript errors. Check the browser's DevTools console.
Related
I face some strange issues when integrating jQuery with Wicket.
We load each content item as Panel in Wicket using Ajax. So it is a Single Page Application.
In the header of the Panel we add some JS, for example:
<script type="text/javascript">
$(document).ready( function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false
} );
} );
</script>
However this code seems to be executed only the first time the Panel is loaded. If you reload the Panel into the application using Ajax, the code is not executed anymore.
I guess JS $(document).ready is only initialized one time, the second time you load the same JS into the browser $(document).ready is no more called.
Is there a workaround with Wicket for that issue?
Thanks!
Sebastian
document ready gets called only once, if you want to call on every load write the code as a seperate method and call it on success of every ajax load
I was able to resolve my issues given on this answer: http://mail-archives.apache.org/mod_mbox/wicket-users/201209.mbox/%3CCAAJwaYUSfoFZHVP4EXSxuw_Co-J0W6qvV1MR8wGERjfNzj2CxA%40mail.gmail.com%3E
You could add Renderhead().It executes whatever is being written inside it even on page refresh
I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.
Any ideas on what I could be missing?
Thanks
EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.
What it breaks:
- I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white
Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).
it prints out 'loading' twice and 'undefined' once at the bottom of the page
All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)
Anyone else experiencing these problems?
jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:
(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
If you want to disable single link to be loaded by the ajax you should write something like this:
<a href="/some_page" data-ajax="false" >link</a>
or do it globally:
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
jm also does replacement on other elements so you should try using data-role attribute, for example:
<select id="test" data-role="none">
to disable replacing this element.
For those like me where
$.mobile.ajaxEnabled = false;
did not work and the whole page layout seems still broken:
For me this one works (- set it inline before loading the jquery mobile file):
<script>
// Preload configuration
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false; // This one does the job
});
</script>
Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled
For further information see: http://api.jquerymobile.com/global-config/
I'm using v1.4.5
Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.
It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.
You can make and download yours here : http://jquerymobile.com/download-builder/
I hope it worked for you too guys!
I have seen many people asking this question and have tried it all (such as: Why is jqueryUI datepicker throwing an error?).
Well i have an asp.net app; i am referring jquery-ui-1.8.16.custom.min.js which has all the jquery UI plugins with its css and jquery-1.6.2.min.js
Now when i say
$(document).ready(function () {
$('._txtReviewDate').datePicker();
});
I get an error : $("._txtReviewDate").datePicker is not a function; on firebug. i checked whether the js files have loaded etc.
Please suggest how i can get it working.
There was an old jquery library added deep down somewhere long back which was just ignored over a period. Removing that resolved the issue.
I am trying to load a form through ajax within fancybox. It works great, everything works fine.
I used the recaptcha (rails) plugin and got the captcha on the form. Now when the fancybox loads, its getting redirected to an empty page with only captcha on it.
I assume this is some problem with iframe and modal window?
Has anyone loaded recaptcha on a form within fancybox? would help me out if you could point me to an example..
appreciate your help...
I had the same problem with fancybox. I solved it using the recaptcha ajax API:
https://developers.google.com/recaptcha/docs/display#AJAX
I have the same problem, though only in Safari (presumably Chrome too). It works fine in Firefox. It has nothing to do with Ruby (I use Grails), and the problem occurs with all jQuery popups (I've tried blockUI, SimpelModal and ThickBox).
As far as I can tell, for some reason when jQuery moves an iframe (which is what ReCaptcha is) in the domtree, Webkit decides to load the iframe content as a new page. Or maybe replaces the page content with the iframe content.
I'm pretty sure it's a Webkit bug, and I have no idea if there is a fix possible.
Edit: turns out there's a fix possible:
$('#captcha-form script').remove();
'captcha-form' is the id of the form containing the captcha. Remove the script tags so the scripts don't get executed a second time when Safari re-renders them after jQuery moves them. The event handlers created by the script aren't in the script tags, so they survive.
I think that Safari re-executes javascript when it re-renders the tags. And anything in a modal dialog gets re-rendered when the dialog opens. Furthermore, I suspect that after having been re-rendered, the document.write used by recaptcha gets confused about where it is and messes up.
if anyone is still searching for an easy solution to this, i've managed to get a recaptcha working in fancybox by calling it in as an iframe
if calling it in from a class selector:
<script>
$(document).ready(function() {
$(".example").fancybox({
fitToView : true,
autoSize : false,
openEffect : 'elastic',
closeEffect : 'elastic'
});
});
</script>
Then in your HTML
<a href="http://url.com/iframe" class="example fancybox.iframe>Captcha Fancybox</a>
Or, if you are triggering the fancybox programatically, do something like:
$.fancybox({
width : '520px',
height : '230px',
autoSize : false,
openEffect : 'elastic',
closeEffect : 'elastic',
'href' : 'http://www.url.cc',
type : 'iframe'
});
The easy solution to load a form with recaptcha through ajax within fancybox.
<%= recaptcha_tags ajax: true %>
I'm looking to somehow get jQuery inserted into every page with the MINIMUM of code written...
in other words I don't want to write <script language="javascript" src="PATH TO JQUERY"></script> on every single aspx page.
So far I've thought of using a Base class and inserting a "Response.Write" into the "page load" event.
Besides that, what are my other options... web.config? something else?
Bonus points for a Webforms/MVC solution. Thanks for any suggestions.
EDIT:
Found an answer that I like at http://www.codeproject.com/KB/aspnet/scriptregister.aspx
The author, like myself, disliked the standard implementation of ClientScript.RegisterClientScriptBlock because of various reasons (like MSFT insistance of having a FORM runat=server tag) and built a better mousetrap.
Use MasterPages and put it at the top. Some people say put it at the bottom but after the first time it's loaded it cached anyways and if you are going to manipulate the DOM I personally would rather do it before my user really starts to see the page being rendered. Having it at the bottom could definitely cause this to happen and could be confusing to the user and result in a bad user experience.
You can hook to any event of the page life cycle in the global asax:
void Application_PreRequestHandlerExecute(object sender, EventArgs e)
{
Page page = this.Context.CurrentHandler as Page;
if( page != null )
page.Load += new EventHandler(page_Load);
}
void page_Load(object sender, EventArgs e)
{
Page page = (Page)this.Context.CurrentHandler;
page.ClientScript.RegisterClientScriptInclude("jquery", jqueryurl);
}
Ps. I think you can do this with an http module as well.
If you are already including
<html><head><title>Title</title></head><body>...</body></html>
in every single page, I'm sure you can squeeze in a
<script ...></script>
But I would still agree with Ken: take a look at master pages.
not knowing you're architecture, this may be hard to answer generically.
However, may i suggest that if you do end up having to modify all your pages, set them up for using an include, should u have to update your jquery version or add a $(document).ready() function or add any jquery plugin's, you can modify the include and not have to re-modify all the pages.
The best practice is to load javascript at the bottom of your pages to prevent your script slowing your initial page load.
Since you've also specifically mentioned jquery I would recommend using this code towards the end of your masterpage:
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
</script>
The advantage of this is that your users will probably already have this copy of jquery cached in their browser, and you'll always be using the latest version to boot :)
If you're using a masterpage, you won't need to have the script "inserted into every page".