I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
Related
I'm working on a component that displays information from an array on click of an image.
Without going into a lot of detail, for each of the 12 images I have displaying, they have certain ids that are relevant to that slot in the HTML. So #person_0 is associated with #bio_0, #close_0, etc. And #person_1 is associated with #bio_1, #close_1, etc.
What I am having trouble with right now is finding an efficient way to loop through jQuery similar to the below:
$( "#close_0" ).click(function() {
$( "#bio_0" ).hide();
});
$( "#close_1" ).click(function() {
$( "#bio_1" ).hide();
});
$( "#close_2" ).click(function() {
$( "#bio_2" ).hide();
});
Rather than write this 12 times, is there a simple means to loop through this? What I'm clear on is how to pass in a variable into the div id (i.e. #close_0 - where 0 would be the variable).
Any tips?
Ideally, if these elements have a class, then you would do $( ".someclass" ).click(...
If not, you can loop by ids like this:
for(var i=0; i<12; i++)
{
$( "#close_"+i ).click(function() {
$( "#bio_"+i ).hide();
$( "[id^=person_]" ).removeClass("active");
});
}
PS. I did not understand what you are trying to do with removeClass and if that's related to the elements you attach click events to
This is what should happen: When I click an image '.post-text' should appear, then - when I click the image once more - the image disappears. All this happens in the toggle function but I have simplified it here.
This is what actually happens: When I click one image, the '.post-text' of all the blocks are opened immediately. I need that to only open the one that I click. I have tried what you see below and the find function, but it doesn't work. Please help me.
$( ".down-text img" ).click(function() {
$(".post-text" ).toggle( "slow" );
});
You can use classes
but with that you will be needing some traversing
supposing your .post-text is the next div after your image
$( ".down-text img" ).click(function() {
$(this).next(".post-text" ).toggle( "slow" );
});
see jquery next() | find() | parent()
https://api.jquery.com/next/
https://api.jquery.com/parent/
https://api.jquery.com/find/
You should use $(this) to target the element you just clicked:
$( ".down-text img" ).click(function() {
$(this).find(".post-text" ).toggle( "slow" );
});
Data attributes can help here.
If you add a data attribute called text to your HTML image element:
<img data-text="text1"/>
And a matching one to your text element:
<div class="post-text" data-text="text1">Here is some text</div>
You can then use that information to only open the correct text element rather than all of the elements that share the same class:
$('.down-text img').click(function () {
var id = $(this).data('text');
$('.post-text[data-text="' + id + '"]').toggle("slow");
});
DEMO
I am trying to build an application. I want to allow users to create their own menu (with submenus also). I want to make this with JavaScript to be "live" (something like: to click add a button and then drag and drop to order etc).
Do you think is there any jQuery/JavaScript/etc menu builder already for download?
I have tried to search menu builder javascript/jquery but I only found online menu builders (not to download).
Any type of code is accepted (related to js) - jquery, js, mootools etc
Thanks a lot!!! If the question isn't asked in the right place I will delete.
Edit: I don't need custom styles like "select a design for menu". It only needs t generate HTML <ul> and <li>
Try using jQuery UI alongside with jQuery (you must put jQuery UI script after jQuery and you must include a CSS theme e.g UI lightness). Start off with a <ul> and give it an ID (e.g #menu). Put all the base <li>s inside of it with the default values and the drag-and-drop <ul>s in a different element, e.g #items. Then in your script file, put:
$(function() {
$( "#menu" ).menu();
});
This will turn the ul into a menu. Now you want to make the items drag-and-droppable. In the same function, add this underneath $( "menu" ).menu();:
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
This will let you sort the menu items. To let you move them from place to place, add this to your function underneath ...disableSelection();:
$( "li" ).draggable();
$( "#menu li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#items" );
}
});
$( "#items li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#menu" );
}
});
I've been looking at this plugin here
http://roblaplaca.com/blog/2013/01/21/custom-styled-select-boxes/
In the instructions it says you can disable the list using this disable()
I added a button to the example 1 and have been trying to get the list to disable when the button is clicked to no avail.
I'm trying
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable("custom","disabled");
});
#start being the button id I am trying to use to disable the list
What am I doing wrong here? Using example1 template.
CustomSelect is either a class or a variable; you're using it as a html element which is incorrect. Either remove the quotes (if it's a variable) or add a dot before it (if it's a class).
According to their documentation
disable() Disables interactivity
.disable() does not take any parameters as you are trying to use, instead try this:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable();
});
});
in addition, your customSelect is not a valid selector unless you have an html element named customSelect, which I doubt. More than likely its the ID of the element you want, in which case you should use:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("#customSelect").disable();
});
});
you also may want to consider storing a reference to the list when you intialize it, much like this example from their docs:
<script>
var sb = new SelectBox({
selectbox: $("select.custom").eq(0)
});
sb.jumpToIndex(3);
sb.disable();
</script>
then you can call .disable on that reference you stored... will definately work that way.
try this one......
$("input").prop('disabled', true);
$("input").prop('disabled', false);
I have no idea if I'm doing this right but I'm trying to make it so when the delete Button is clicked a Dialog in my jQuery UI comes up
try adding:
$( this ).dialog( "close" );
on the close