I have a form which populates div elements based on selections from a select box using an AJAX call.
The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the 'chzn-select' is not firing, no doubt due to this being pulled in dynamically.
I have added this:
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?
Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:
<script type="text/javascript">
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
}
</script>
And in the AJAX script itself, I added a call to the function after the responseText part:
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
instead of using chosen(), try change() method. It works on change event.
try:
$(".chzn-select").change(function () {
var str = "";
$("select option:selected").each(function () {
// do your coding here
});
})
.trigger('change');
Related
I am using NavigationHandler.handleNavigation as suggested here (ExternalContext.dispatch() not working) since I am using an ajax request.
It works but I see the next page in the middle of the page (more or less) instead of seeing it in the top of the page.
I tried using an anchor as suggested here (http://www.computerhope.com/issues/ch001475.htm) but it also doesn't work.
Any idea of what is happening?
Here is my code:
context.getApplication().getNavigationHandler().handleNavigation(context, null, "/user-registration.xhtml#top");
I have added the following in the beginning of the body of the next page:
<a name="top"></a>
The correct approach to scroll the window to top is window.scrollTo() with x and y of 0:
window.scrollTo(0, 0);
This keeps your URL free of hash fragment clutter.
In order to invoke it on success of every JSF ajax event, include the following script in the document.
jsf.ajax.addOnEvent(function(data) {
if (data.status == "success") {
window.scrollTo(0, 0);
}
});
See also:
Execute JavaScript after every JSF ajax postback
Finally I solved it with the following script:
<script type="text/javascript">
$(document).ready(function() {
location.hash = "#top";
});
</script>
I've followed a tutorial to create a Website Menu, this involves JQuery to provide some transitions.
I've got it working as intended, but to prove I understand this new code and framework, and also, to follow development guidelines, I want to move to the Menu code to a plug-in.
Working (not-plug-in) version:
This appears in the .ascx, along with a UL tag, ID = MainMenu
<script type="text/javascript">
NavBarMenu();
</script>
In another file, NavBar.js, the following code is used to associate some JQuery events:
function NavBarMenu() {
$(function() {
var $menu = $('#MainMenu');
var $menu_items = $menu.children('li');
...
Not working version:
Now the plug-in code is created, the NavBarMenu function is called like this from the .ascx:
<script type="text/javascript">
$("#MainMenu").NavBarMenu();
</script>
In NavBar.js I now have:
(function($) {
$.fn.NavBarMenu = function() {
var $menu_items = this.children('li');
However, the $menu_items variable is unpopulated?
Shouldn't this (2nd example) be equivalent to $('#MainMenu') (1st example)
I followed this example, where a JQuery selector is switched for the this pointer. http://learn.jquery.com/plugins/basic-plugin-creation/
Thanks in advance :D
There must be other factor affecting my implementation, I will revisit it.
I have created 2 JSFiddle pages, as part of my investigation and it has proved that the JQuery Selector can be swapped for the this pointer in a plug-in.
Fiddle detailing 1st example: http://jsfiddle.net/rL7zpr15/1/
$('input[type=button]').click( function() {
$( "div" ).css( "background", "green" );
});
Is equivalent to
Fiddle detailing 2nd example: http://jsfiddle.net/hds7advx/
$.fn.greenify = function() {
this.css( "background", "green" );
};
$('input[type=button]').click( function() {
$( "div" ).greenify();
});
I am using validation engine from http://www.position-absolute.com/ site.
The validation is applied on the div tag which is opened as popup on parent page.
Issue : when error message is shown on a control, it is appearing behind the div.
Search to similar issue suggest the usages of z-index, but how to control the z-index of error message poping from validation engine? Giving high number to div z-index:99999 did not work.
Please help
just change your script as
<script type="text/javascript">
$(function () {
$(".primary").click(function () {
$(".formError").remove();
});
$(".close").click(function () {
$(".formError").remove();
});
$("#yourformid").submit(function (ev) {
ev.preventDefault();
var validForm = $("#yourformid").validationEngine('validate');
$(".formError").css("z-index", 15000);
if (validForm) {
$("#yourformid").submit();
}
});
});
</script>
it works fine
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});
How can i catch the "onblur" event of my htmlbox textarea?
I want to be able to get the htmlbox content when it's onblur..
Thank's In Advance.
Try this code, it loops waiting 1 second until htmlbox creates the iframe, then it adds a .blur handler to the iframe, I found out the iframe's id by using IE8's Developer Tools, by clicking on the arrow icon in the developer tools and clicking the box you can see how HTML looks after the page loads and javascript processed. if($("iframe").length) is true then then htmlbox has created the iframe and you can attach the .blur event handler.
<script type="text/javascript">
$(function(){
var check = function(){
if($("iframe").length){
$("#hb_html").blur(function(){
alert('Blur has occurred!');
});
} else {
setTimeout(check, 1000)
}
}
setTimeout(check, 1000)
});
</script>
This example demonstrates:
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bar").blur(function(){
$(this).text("I have been blurred.");
});
});
</script>
<textarea id='bar'>foo</textarea>
Make sure the file jquery-1.5.min.js is in the same folder IF you use the example above.
You can read up on the .blur event at http://api.jquery.com/blur/
It receives a function as an argument and executes it when it becomes blurred.