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");
Related
I am not getting data from class which is selected - radio button not post.
Live example: https://www.kodjs.com/uyeol.php
All-Code jQuery: https://jsfiddle.net/8Lbsdduv/1/
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
/*My code*/
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input:checked" ).val());
});
Try replacing
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
with this
$(wizard).find('[type="radio"]').prop('checked', false);
$(this).find('[type="radio"]').prop('checked',true);
I have 2 Bootstrap Select dropdowns, one is a list of countries, and another is a list of states. The country list is static and is populated on page load. The list of states is only populated via the Bootstrap Change event and loads states based upon the country.
I need to be able to populate both these values at the same time. So the problem is I'm trying to set the state value when its undefined ,or hasn't loaded its options yet. I've tried doing a callback function within the ajax call, but that doesn't appear to work. I think another problem is that there is the initial change binding that is goofing it up.
I've written a fiddle for my foundation on where I'm experiencing the problem.
https://jsfiddle.net/jeffbeagley/DTcHh/37843/
The user is presented with a blank form that allows them to select the values, but the user can also load a saved form from the database ( hence the function labled as "select_data" ).
$(document).ready(function() {
$( "#country" ).on( 'changed.bs.select', function(e) {
change_country($( this ).val());
});
$( "#load" ).click(function() {
select_data();
});
});
This function is called anytime the user selects a country, the actual ajax call goes out to the database and returns all the appropriate states. I tried passing the state into this function and selecting it that way, but setting the country first would still fire the country change event and override it.
function change_country(country_id) {
$.ajax({
type: 'GET',
cache: false,
url: '/echo/jsonp/',
success: function(response) {
$( "#state" ).empty();
if(country_id == 1) {
$( "#state" ).append( "<option value=1>Oklahoma</option" );
$( "#state" ).append( "<option value=2>Missouri</option" );
} else {
$( "#state" ).append( "<option value=1>Ontario</option" );
$( "#state" ).append( "<option value=2>Quebec</option" );
}
$( "#state" ).selectpicker( "refresh" );
}
});
}
This is the function that grabs the saved form from the database and populates the values. With the way that its set, the expected outcome would be to select the country Canada, and the state Quebec
function select_data() {
var country_id = 2
var state_id = 2
$( "#country" ).selectpicker('val', country_id);
$( "#state" ).selectpicker('val', state_id);
}
Thanks for any help!
Might've figured it out.. sometimes you just need to strip out your code and simplify it to find an answer..
I replaced the code to populate the states outside of the event being called from the country being changed. Then I declared a callback function within this new function on success. I then moved the logic to select the country into the populate_state function ( this may not be appropriate )
You can see the updated fiddle here,
https://jsfiddle.net/jeffbeagley/DTcHh/37849/
So now the function select_data is as follows
function select_data() {
var country_id = 2
var state_id = 2
populate_states(country_id, function() {
$( "#state" ).selectpicker('val', state_id);
});
}
Edit ----
So with this, I ran into a call stack issue as it was still applying the original change event. So when the function select_data() is called, I unbind any events attached to the country selector, and rebind within the callback.
function select_data() {
var country_id = 2
var state_id = 2
$( "#country" ).off( 'changed.bs.select');
$( "#country" ).selectpicker('val', country_id);
populate_states(country_id, function() {
$( "#state" ).selectpicker('val', state_id);
$( "#country" ).on( 'changed.bs.select', function(e) {
change_country(e,$( this ).val());
});
});
}
$(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');
});
});
I'm using the 'nested-list' plugin for jQuery Mobile, this one:
The problem is that when you use more than one level the plugins fails going back. For example, in the fiddle I have created I can go to 'Test 1.2.1' without problem, If I going back 1 level it works fine and I go to 'Test 1.2', but then if I tried to go up one level more (it was 'Test1') it goes up 2 levels (to 'Test').
I have checked the plugin code but I can't find the problem and I have left a message in the Git forum with no answer. Maybe someone could help me here.
Thanks in advance!
Fiddle
Looking at the plugin code, it is only designed for one level deep nesting. This is because the developer chose to remove created subpages each time you click on a parent LI. So when you get to the second level of depth, its parent has been removed from the DOM and you have to click the back button twice to get to the original page.
I have made some changes to the plugin code that should solve this problem:
In _attachBindings, I have commented out the line that removes previously created subpages:
_attachBindings: function() {
this._on({
"click": "_handleSubpageClick"
});
this._on( "body", {
"pagechange": function(){
if ( this.opening === true ) {
this.open = true;
this.opening = false;
} else if ( this.open === true ) {
//Don't remove the old LI
//this.newPage.remove();
this.open = false;
}
}
});
},...
Then in _handleSubpageClick, I check if the subpage already exists in the DOM (via data attribute added when creating the page). If not, we go through the existing code that creates the subpage, and then in the end I store the created subpage id in a data attribute on the parent LI. If it does exist we just navigate to that page.
_handleSubpageClick: function( event ) {
if( $(event.target).closest( "li" ).children( "ul" ).length == 0 ) {
return;
}
this.opening = true;
//see if we already created the subpage
var $li = $(event.target).closest( "li" );
var pid = $li.data("nextpageid");
if (pid && pid.length > 0){
this.pageID = pid;
} else {
this.newPage = $( this.options.page ).uniqueId();
this.nestedList = $( event.target ).children( "ul" )
.clone().attr( "data-" + $.mobile.ns + "role", "listview" )
.css( "display", "block" );
this.pageName = (
$( event.target.childNodes[0] ).text().replace(/^\s+|\s+$/g, '').length > 0 )?
$( event.target.childNodes[0] ).text() : $( event.target.childNodes[1] ).text();
this.pageID = this.newPage.attr( "id" );
// Build new page
this.newPage.append(
$( this.options.header ).find( "h1" ).text( this.pageName ).end()
).append(
$( this.options.content )
).find( "div.ui-content" ).append( this.nestedList );
$( "body" ).append( this.newPage );
//save subpage id as data attribute of the LI
$li.data("nextpageid", this.pageID);
}
$( "body" ).pagecontainer( "change", "#" + this.pageID );
}...
Here is your updated FIDDLE
I removed the external link to the plugin and instead copied all the code into the javascript pane and made the edits. You should be able to copy that code directly and use as the updated plugin. (Of course I did this quickly and have not rigorously tested it, so make sure it works for you).
I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?
Use jQuery-UI selectable and code similar to the following:
$( "#yourTable" ).selectable(
{
distance: 10,
stop: function()
{
$( this ).find( "tr" ).each(
function () {
if ( $( this ).hasClass( 'ui-selected' ) )
$( this ).addClass( 'row-selected' );
else
$( this ).removeClass( 'row-selected' );
});
}
});
I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.