How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>
Related
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
Since this morning am trying to make this work, but failed. The CKEditor appears perfectly into the textarea, but when I try to save the content on the first mouse click on the save button, it doesn't inserts the content into the database. When I trigger my second click on save button again on the same content then its does insert into the database.
Textarea
<textarea class="txtPageContent" name="pageContent" id="pageContent"></textarea>
JavaScript Included
<script type="text/javascript" src="plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace( 'pageContent' );
</script>
Plead do let me know for more informations.
Call CKEDITOR.instances.pageContent.updateElement() first (see docs).
This will synchronize your textarea and your editor in terms of the content. Then, your AJAX request should serialize correct data. Just make sure that updateElement() call is before you gather data.
i have tried this. it works.
function returnToSubmit() {
$('#ckeditor').val(CKEDITOR.instances['ckeditor'].getData();
}
Also take a look into this SO
I have the problem that my jQuery stuff isn't working after a div which includes elements being manipulated by my jQuery code are reloaded by ajax. The jQuery .live function helped me out that at least all my events are triggered. However functions like .text() are still not working. E.g.
$('#idOfElementBeingInDivWhichIsReloadedByAjax').text('New text');
Has anybody suggestions how to cope with this issue?
Edit: The problem is that the web site I'm working on loads its page content with ajax when clicking on a navigation item. All the jQuery functionality works when the sites are visited for the first time. However at the second time the DOM is reloaded and jQuery still uses the original DOM, so methods like .text() don't show changes any more. As mentioned above the .live() method helped me that at least events are still triggered after the second call of a specific page.
The only way to do this, is to make sure that your code is executed after the ajax reload. A common approach is to create a init() function, which are called from the ajax callback function.
$(function(){
$('#myParentAjaxDiv').load('somepage.html', function(){
initStuff();
});
});
function initStuff(){
$('#idOfElementBeingInDivWhichIsReloadedByAjax').text('New text');
}
I have implemented a fancybox which opens and loads ajax content without any problems. But when I load new ajax content into a div in the FancyBox using jquery I need to center the FancyBox on the screen again.
function refreshContent(url) {
$("#content").fadeOut("slow", function(){
$.fancybox.showLoading();
$("#content").load(url,false, function() {
$.fancybox.hideLoading()
$("#content").fadeIn("slow");
$.fancybox.reposition();
});
})
As you can see, I have tried with the reposition() method, but with no effect. The same applies to center()
What am I missing here?
I'm using Fancybox ver 2.0.5
Maybe is a little late but in fancy 2 there is a method:
$.fancybox.reposition();
You can see the other methods here:
http://fancyapps.com/fancybox/#docs
Regards
Probably need to put you reposition call inside the complete function of the fadeIn. Otherwise it gets called before the content is visible.
I'm using fancybox with ajax request to open multilpe fancybox instances on same page:
This is html code:
User
and this is Javascript i've used:
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button_fancy").click(function(){
var element = $(this);
var Ide = element.attr("id");
$("#"+Ide).fancybox();
return false;});});
</script>
Everything could be ok, just 1 problem... first time i load the page, i need to click 2 times over "User" to open fancybox...
If i open fancybox and then i close it, the second time i can click just 1 time...
why?
Thanks
The first click registers the event to the DOM, and the second (and subsequent ones) show the Fancybox.
If using multiple Fancyboxes, you should avoid using ID's like you have there and change it to classes. Not sure why you've got all that code to launch the fancybox, when this should work:
$(".comment_button_fancy").fancybox();
This will Fancybox all elements with the class "comment_button_fancy" and should fix your two-clicks issue. You don't need to put a 'click' event handler around the Fancybox code, as it inherently has that event attached to it.