I am building a function that allows me to add rows to a table, upwards or downwards. I'm working on the 'up' function right now, which in my opinion will be very similar to the down function. I'm using JavaScript/Jquery and the up arrow only appears after they have saved the row. Here's my code for the Save function and the in-progress up function that doesn't work.
function Save() {
var par = $(this).parent().parent(); //tr
var tdDate = par.children("td:nth-child(1)");
var tdTime = par.children("td:nth-child(2)");
var tdTreatmentNum = par.children("td:nth-child(3)");
var tdCellNum = par.children("td:nth-child(4)");
var tdWasteContNum = par.children("td:nth-child(5)");
var tdButtons = par.children("td:nth-child(6)");
tdDate.html(tdDate.children("input[type=date]").val());
tdTime.html(tdTime.children("input[type=time]").val());
tdTreatmentNum.html(tdTreatmentNum.children('select').val());
tdCellNum.html(tdCellNum.children('select').val());
tdWasteContNum.html(tdWasteContNum.children('select').val());
tdButtons.html("<img src='trash.png' class='btnDelete'/>
<img src='pencil.png' class='btnEdit'/><img src='up.png'class='btnUp'/>");
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$(".btnUp").bind("click", Up);
};
function Up() {
var row = $(this).parent().parent(); //tr
if ($(this).hasClass('up'))
row.prev().before(row);
else
row.next().after(row);
});
I am not familiar with JQuery. My Add Row no longer works(though I know it functions properly). Here's a more complete code in JSFiddle for add, save, and up functions, including the html table. Any ideas?
Updated - Working JSFiddle
That helped, but it seems to just be moving the item to the bottom of the list, instead of up or even one down.
There were some issue in your JSFiddle that you have provided. I have updated your code and provided a working sample in the question itself.
since it wasn't possible to show the actual images you're using so I used the glyph icons of bootstrap library to display the similar images. You can replace the <span> tags with your <img> again in your development environment and everything should work fine.
This version of updated Fiddle is working fine as you asked for Delete and on Save. Hope this will help you getting along.
Related
first of all, sorry for my bad english, I'm from Germany.
I just created my first widget. It's a widget that creates automatically a grid out of a list.
I can add a new list-item and every form field will be duplicated.
But after 3 days of searching the internet without a result I decided to ask by myself...
So here is my first problem, when I add a new item, the TinyMCE in the new item is disabled, I can't click on the buttons or type text into it.
There are no errors in the console log.
My second problem is when I save the widget, all TinyMCE-Editors disappear and leave the textareas, with the html code.
Here also: no errors... but I've seen, that the TinyMCE isn't loading after save. There is no iframe, nothing but the textarea.
After reload the widget page, everything is fine again for both problems.
So I have to add new items and save the page and then reload it to edit and edit the content, but that don't solve the problem.
I think I have to reinitialize the TinyMCE but I don't know how.
I had problems with adding the wordpress editor to my widget so I integrated the jQuery TinyMCE from the website.
Here is the code snippet of my add-function:
$("body").on('click.sgw','.sgw-add',function() {
var sgw = $(this).parent().parent();
var num = sgw.find('.simple-grid .list-item').length + 1;
sgw.find('.amount').val(num);
var item = sgw.find('.simple-grid .list-item:last-child').clone();
var item_id = item.attr('id');
item.attr('id',increment_last_num(item_id));
$('.toggled-off',item).removeClass('toggled-off');
$('.number',item).html(num);
$('.item-title',item).html('');
$('.custom_media_image',item).attr('src','');
$('textarea',item).val('');
$('img.custom_media_image',item).each(function() {
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
});
$('textarea',item).each(function() {
var id_iframe = $(this).attr('id');
tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
});
$('label',item).each(function() {
var for_val = $(this).attr('for');
$(this).attr('for',increment_last_num(for_val));
});
$('input',item).each(function() {
var id_val = $(this).attr('id');
var name_val = $(this).attr('name');
$(this).attr('id',increment_last_num(id_val));
$(this).attr('name',increment_last_num(name_val));
if($(':checked',this)){
$(this).removeAttr('checked');
}
if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url')){
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
}
if($(this).hasClass('button-primary')){
var number_val = $(this).attr('number');
$(this).attr('number',increment_last_num(number_val));
}
$(this).not('#custom_media_button').val('');
});
sgw.find('.simple-grid').append(item);
sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
});
I hope this is understandable and someone can help me.
You can download the zip here: https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0
Are you trying to run several editors at once? There's a limitation with Wordpress and TinyMCE where you can basically one editor at a time. I've gotten around that but it was very difficult.
To load a new editor you may have to remove the old one:
tinymce.remove();
I'm trying to display div with content after click on image, but when my page is loaded and I try to click then nothing happens. Interesting that if my page is loading with not hidden content and then I'll do hide() and after that show() id console then it works perfectly. What am I doing wrong?
$(document).ready(function() {
$('.content-flowers').hide()
var first = $(".content-flowers").children()[0];
var second = $(".content-flowers").children()[1];
var third = $(".content-flowers").children()[2];
var firstImg = $(".flower-image")[0];
var secondImg = $(".flower-image")[1];
var thirdImg = $(".flower-image")[2];
$(firstImg).click(function(){
$(first).toggle(1000);
})
/*$(".flower-image").click(function () {
$('.content-flowers').show(1000);
});*/
});
Last commented function works also good, but that function loads all three divs with content, I want in order to after click on 1 image the first div with content will display
You've said the commented-out version works other than that it does all three at the same time, but the earlier version does not work.
They do very different things. Your un-commented-out code looks at the children of the .content-flowers elements:
var first = $(".content-flowers").children()[0];
But your commented-out version works on the .content-flowers elements themselves:
$('.content-flowers').show(1000);
I suspect it's the .children() part that's making it fail. I think you want:
var first = $(".content-flowers")[0];
// No .children() here ----------^
...as the minimal change.
That said, though, the whole thing can be dramatically simpler:
$(document).ready(function() {
$('.content-flowers').hide()
// Get the flower images
var images = $(".flower-image");
// When a flower image is clicked...
images.on("click", function() {
// Determine its index relative to the others...
var index = images.index(this);
// And show that content
$(".content-flowers").eq(index).toggle(1000);
});
});
You already applied the jquery function on the variable first. So try first.toggle(1000) instead. Remove the $ sign.
I am trying to add a textbox to a webpage in ASP.NET MVC using jQuery. I have a button which when clicked, I want a TB to be added to the end of a collection of Textboxes of a given class.
Here is my jQuery code for adding a textbox.
$(document).ready(function () {
$("#addTextBox").click(function () {
var count = $('input:text .approvers').length;
if (count <= 20) {
var newTextBox = $(document.createElement('text'));
newTextBox.appendTo('.approvers:last');
}
});
});
Here is the button I have created in an MVC View
<input type="button" value="+" id="addTextBox" class="roundButton" />
This however isn't working. Its defined in an external JS file. I have researched and made sure jQuery is added first before my own JS file. What have I missed out.
PS: I added a breakpoint at the start of the jQuery function and it gave me this warning when I debugged The breakpoint will not currently be hit. No symbols have been loaded for this document I am working on solving that but am not sure that may be the problem.
Try changing:
var newTextBox = $(document.createElement('text'));
newTextBox.appendTo('.approvers:last');
to:
$('.approvers:last').append($("<input type='text' value='value' />"))
update:
Another error is var count = $('input:text .approvers').length;?
change it to : var count = $('input[type='text'].approvers').length;
The output in HTML is something like this:
ProductImage1 ProductImage2 ProductImage3 ProductImage4
Color1 Color2 Color3 Color2 Color4 Color5 Color6
What I want to do is when I hover my mouse over any color above, an original (current) image of ProductImage will change to another one (to match the hovered color). And that original image will be back when mouse leaves.
Here is the javascript I've done for hovering over each ProductImage.
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.main').hover(sourceSwap, sourceSwap);
});
UPDATE
I excluded unnecessary parts from my question. The answer from #hunter worked very well when I tested it here jsfiddle.net/4dK2x/27. However it didn't work when I combined it with my php parts to create dynamic lists. I'm still looking around and trying to find out the problems. I will come back and update my answer if I find a solution for it.
Here's updated code which should work with as many sets of products as you need if you mimic a similar html structure
$('.image .toggles img').hover(function () {
var src = $(this).attr("src");
var $main = $(this).closest(".image").find(".main");
$main.attr("toggle", $main.attr("src")).attr("src", src);
},
function () {
var $main = $(this).closest(".image").find(".main");
$main.attr("src", $main.attr("toggle"));
});
Example: http://jsfiddle.net/4dK2x/1/
You could do this two ways, you can try it by using CSS:
#tagName{
background: url("yourImage.jpg");
}
#tagName:hover{
background: url("anotherImage.jpg");
}
this assumes you have a div tag around the image, you can also reference class id's etc. (read into CSS for more details).
or you could do it through JavaScript
lets say you are not using JQuery (i need to familiarize myself more with JQuery)
var image1 = document.getElementById("nameofDivTag");
//on hovering kinda forgotten the JS version of hovering, JQuery has probably easier way
image1.style.background("url:("aDifferentImage.jpg"));
if i am wrong yay! if not yay!
hope it helps
I know this has probably been answered multiple times before, but this is the second time I've worked with JQuery, and I'm not entirely sure what I need to do, since I'm not familiar with this format of coding. I've looked at other, similar, questions, but none of the answers are making sense to me, and I really need this to click in my head so I can keep working.
I'm using Jpopup for this, so the script info is all there, but my question is this:
I have two areas in an image that I need to be clickable, both showing different content, but I can only call one page at a time to pop up, and multiple anchor tags just give me the same content twice. What do I need to add to that script to allow the page to show two different popups?
This is the script in my HTML page
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var source = "demo.html";
var width = 920;
var align = "center";
var top = 100;
var padding = 10;
var backgroundColor = "#FFFFFF";
var source = 'popups/demo.html';
var borderColor = "#000000";
var borderWeight = 4;
var borderRadius = 5;
var fadeOutTime = 300;
var disableColor = "#666666";
var disableOpacity = 40;
var loadingImage = "popups/loading.gif";
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup( align,
top,
width,
padding,
disableColor,
disableOpacity,
backgroundColor,
borderColor,
borderWeight,
borderRadius,
fadeOutTime,
source,
loadingImage );
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
The HTML
<div style="margin-top:200px;margin-left:395px;">
<a class="modal" href="javascript:void(0);"><img src="images/clickmelarge.png" border="0">
</a></div>
I studied the source code of the "plugin" and studied also the invoked source code of the HTML page at runtime. In my eyes this popup plugin doesn't support multiple popups at same time. Why?
Well, I used Firebug to exermine the source code at runtime and I saw only the same divs, added to the DOM tree by this. As far as I did understand when the DOM was complete loaded the author added the main divs to the DOM tree and set they all to 'hide'. If you call your function these divs will set to 'visible'.
Another reason is -in my eyes a very tricky way- the div with the Id 'blockModalPopupDiv' covers the full browser window. If you click on this element, the function of hiding all divs will be executed. You won't be have chance to click outside the div element.
So what can you do?
I think you have only three options :
Ask the author for an opportuniti to add your requirement.
Download the source code and modifiy it your self. Its created in standard Javascript.
Try to use another plugin or change your concept.