$(document).ready(function(){
$('#1, #2').click(function(){
window.clickedbtnid = $(this).attr('id');
$( "#table_dialog_1" ).dialog();
});
$( "#table_dialog_1" ).find('td').click(function(){ $('#'+window.clickedbtnid).parent().prev().find('input').val($(this).id);
$( "#table_dialog_1" ).dialog('close');
})
});
$('#input_'+id).attr('value', $(this).html());
this was closed to what i want but it only pass based on clicked td's text of table on dialog area because what I need is the first td table of dialog window to pass on input tag, and second td and third on link tag element. See my last table in fiddle below, it should look like the table on the main page when dialog window is closed.
see this FIDDLE
I hope this is what you are looking for, I refactored the code a bit, added class clickMe to button, it makes id unnecessary.
the JS code
var clickedButton;
$(document).ready(function(){
$('.clickMe').click(function(){
clickedButton = this;
$( "#table_dialog_1" ).dialog();
});
$( '#table_dialog_1 tr').click(function(){
var tds = $(this).children();
$(clickedButton).parent().prev().find('input').val(tds.eq(0).html());
$(clickedButton).next('a').text(tds.eq(2).html()+','+tds.eq(1).html());
$( "#table_dialog_1" ).dialog('close');
});
});
Related
I use the jQuery combobox plugin:
https://jqueryui.com/autocomplete/#combobox
My JS:
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
My goal is to add a custom class to the autocomplete div in order to individually style the autocomplete dropdown. I already tried the following, but this is not working:
$( "#combobox" ).combobox().autocomplete("widget").addClass('my-custom-autocomplete-class');
Try This, As per selected value class add to combobox write css for each option mention in drop down
$(function($) {
$( 'select[id=combobox]' ).on("change",function() {
var dynaminClass = $(this).val();
console.log(dynaminClass);
$(this).attr('class', dynaminClass);
})
})
I try to figure out, how to restore Jeditable fields after removing cells from table?
I have table where are
rows with one cell (colspan)
rows with many cells (rows with ID-s)
Rows with ID have a cell which contains some text and editable span-element (with Jeditable). Now when I click on button, I want to remove from rows with ID all cells and replace it with cell which contains only the span-element (which should remain editable).
Problem is: I can't restore editability for those recreated spans.
I tried different approaches, most simple should running $( '.editable' ).editable('enable'), but I can't figure out, why it does not working.
One of my efforts is like this:
$(document).ready(function(){
$("#remove").click(function() {
$("table#original tr").each( function( index, row ) {
if ( $( row ).attr( 'id' ) ) {
var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
$( row ).children( 'td' ).remove();
$("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
$( '.editable' ).editable('enable');
}
});
});
$('.editable').editable('echo.php', {
type : 'text',
tooltip : 'Just click...'
});
});
Made a Fiddle too, hope it helps to better understand my problem.
Problem
The issue seems to be that the editable object is being destroyed and when you attempt to re-enable it, it doesn't keep the same options so it fails.
Solution:
Abstract the options to a variable (for easier changes going forward)
var editableOptions = {
type : 'text',
tooltip : 'Just click...'
};
var editableURL = 'echo.php';
Update the .editable() call to use these new variables:
$(document).ready(function(){
$("#remove").click(function() {
$("table#original tr").each( function( index, row ) {
if ( $( row ).attr( 'id' ) ) {
var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
$( row ).children( 'td' ).remove();
$("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
$( '.editable' ).editable(editableURL, editableOptions)
}
});
});
$('.editable').editable(editableURL, editableOptions);
});
Working JSFiddle
You don't need to recreate editable field in new td cell. In fact you should not remove it in the first place. Proper way of handling this from perspective of performance and optimization is to create new td and move already initialized editable element to it. In this case you don't have to worry about reinitizing it one more time.
So your code will become:
$(document).ready(function () {
$("#remove").click(function () {
$("table#original tr").each(function (index, row) {
if (row.id) {
var editableField = $(row).find('.editable');
var newTd = $("<td colspan='3'></td>").append(editableField);
$(row).empty().append(newTd);
}
});
});
$('.editable').editable('echo.php', {
type: 'text',
tooltip: 'Just click...'
});
});
Demo: http://jsfiddle.net/jxtnd1g4/
Or a little shorter variation for the same thing:
$("#remove").click(function () {
$("table#original tr[id]").html(function() {
var editable = $(this).find('.editable');
return $('<td colspan="3"></td>').append(editable);
});
});
Let say a each row in a table got its own view and a model (CollectionViews). Each row got a button for editing the row data. When clicked an EditView is activated for the current row and model where a form is presented to the user with textfield and cancel and submit button.
The edit view can only be removed if the user submit the edit form or cancel the edit.
My question is what is the best way to prevent multiple edit view overlapping for example when a user click the edit button, not doing the editing or closing the edit view, and instead click the edit button on another row and another row, without completing the editing.
I just started learning backbone, so this is what I do - which is more of a hack.
//create global array for storing view
var editTaskViewArray = new Array();
code for when creating the edit view
//delete previous view
for (x in editTaskViewArray) {
editTaskViewArray[x].remove();
}
//empty array
editTaskViewArray = [];
//create and activate edit view
var editTaskView = new App.Views.EditTask({
model: this.model
}).render();
$('#edittask').append(editTaskView.el).hide().fadeIn(500);
//add edit view to array so that can be removed later
editTaskViewArray.push(editTaskView);
Thank you for any tips
//change the delete code to.
//editTaskView is global
//delete previous view if one exists
If(editTaskView.el){
editTaskView.remove();
}
//create and activate edit view
editTaskView = new App.Views.EditTask({model:this.model }).render();
$('#editTaskView').append(editTaskView.el).hide().fadeIn(500);
Another solution,whenever a view is activated, disable all links to make the current view a modal view, for example all the links in the row is using class for example .delete and .edit. This way, all other views can only be activated only if user close the current view
<td><a class='delete' href='#'>Delete</a></td> \
<td><a class='edit' href='#'>Edit</a></td>";
use this code to disable the link and disable the events by changing the class name
$( "#tbl1" ).find( "a" ).removeAttr("href");
$( "#tbl1" ).find( "a.delete" ).attr("class", "nodelete");
$( "#tbl1" ).find( "a.edit" ).attr("class", "noedit");
$( "#tbl1" ).find( "a.nodelete" ).css("opacity", "0.6");
$( "#tbl1" ).find( "a.noedit" ).css("opacity", "0.6");
use this code to enable link
$( "#tbl1" ).find( "a" ).attr("href", "#");
$( "#tbl1" ).find( "a.nodelete" ).attr("class", "delete");
$( "#tbl1" ).find( "a.noedit" ).attr("class", "edit");
$( "#tbl1" ).find( "a.delete" ).css("opacity", "1");
$( "#tbl1" ).find( "a.edit" ).css("opacity", "1");
I have a dynamically created HTML page which adds inputs.
I want to be able to capture the page (and all form input values) using the html() function.
This does not seem to work though. Take the following page for example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#_create" ).click(function() {
var myHtml = '<input class="my-input" val="">';
$('#_input').html(myHtml);
});
$( "#_save" ).click(function() {
alert($('#_masterDiv').html());
});
$( "#_saveIterate" ).click(function() {
$("input").each(function(){
alert(this.value);
});
});
});
</script>
</head>
<body>
<button id="_create">Create Dynamic Input</button><br>
<button id="_save">Save by grabbing html</button><br>
<button id="_saveIterate">Save by iterating</button><br>
<div id="_masterDiv">
<div id="_input">Input button here</div><br>
</div>
</body>
</html>
Clicking "Save by grabbing html" gets the form, but does not get the values.
Clicking "Save by iterating" gets the value of the input.
Do I need to call a function like "apply changes" before I can get the most current values in INPUT?
Some browsers like Firefox/Chrome does not save the current state of HTML input values. So you will have to assign the input values manually:
$( document ).ready(function() {
$( "#_create" ).click(function() {
var myHtml = '<input class="my-input" value="">';
$('#_input').html(myHtml);
});
$( "#_save" ).click(function() {
//if you have many input fields, loop through them all
$("input").each(function(){
//set the value manually
this.setAttribute('value', this.value);
});
alert($('#_masterDiv').html());
});
$( "#_saveIterate" ).click(function() {
$("input").each(function(){
alert(this.value);
});
});
});
Here's the jsfiddle link: http://jsfiddle.net/urspz/1/
I have a large block of HTML that needs to be replaced, which includes fadeOut/fadeIn transitions. I can't figure out how to add the HTML to the page (hidden) without wrapping it in a div.
$.get('/ajax', function(newHtml){
var $newEvent = $('<div class="new-event" />').hide().html(newHtml);
$('#content .event').fadeOut('slow', function(){
$(this).remove(); //old event
$newEvent.appendTo('#content').fadeIn('slow').removeClass('new-event'); //then remove the wrapper div that I didnt need in the first place
});
});
What is the best way to do this while utilizing best practices for performance?
Solution:
For some reason, I thought that creating a new element like this: $(newHtml) was less efficient (bad performance) than html(newHtml). But apparently, they are the same as far as performance goes (I have no data to back this up other than my own observations).
So the following code is just as efficient as the previous:
$.get('/ajax', function(newHtml){
var $newEvent = $(newHtml).hide();
$('#content .event').fadeOut('slow', function(){
$(this).remove(); //old event
$newEvent.appendTo('#content').fadeIn('slow');
});
});
When adding the code to the page, have top level elements all be hidden
<div style="display:none;">...</div>
When fadeIn is called jQuery automatically removes it for you.
If you can't modify the returned html just do it this way then,
$(newHtml).hide().appendTo('#content');
That will hide it before being added to the DOM.
How about something like
$('#content .event').fadeOut('slow', function()
{
$(this).html(newHtml).fadeIn('slow');
});
Why you don't simply replace the content of .event instead of removing it and creating a new one?
$.get( '/ajax', function( newHtml )
{
$( '#content .event' ).fadeOut( 'slow', function ()
{
$( this ).html( newHtml ).fadeIn( 'slow' );
});
});
Edit
If you really need to remove the entire node, you can do this instead
$( this ).remove();
$( '<div class="new-event">' ).appendTo( $('#content') ).html( newHtml ).fadeIn( 'slow' );
You could just have it as a javascript string, and add it when you need.
var $newEvent = $(newHtml);
// and later on
$( '#content .event' ).fadeOut('slow', function ()
{
$(this).append($newEvent).fadeIn( 'slow' );
});