I has problem with Nestable.
When i use
var updateOutput = function (e) {
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
};
$('#element').attr({'data-id':'newvalue'});
updateOutput($('.nestable').data('output', $('#nestable_list_output')));
I don't see output change. When i view our via chrome i see data-id of that element changed.
Please help me.
This is full soure
function Update_This_Menu(){
$('.update-this-menu').click(function(){
var RootElement = $(this).parent().parent().parent();
var NameMenu = RootElement.find('.NameThisMenu').val();
var TitleMenu = RootElement.find('.TitleThisMenu').val();
if(NameMenu == ''){
RootElement.find('.NameThisMenu').addClass('parsley-error');
}
else {
RootElement.data({'name':NameMenu});
RootElement.data({'title':TitleMenu});
updateOutput($('.nestable').data('output', $('#nestable_list_output')));
RootElement.find('.form-edit-menu').hide('slow');
}
});
}
This is function remove MENU is OK
function Remove_Menu(){
$('.remove-this-menu').click(function(){
var RootElement = $(this).parent().parent().parent();
RootElement.remove();
updateOutput($('.nestable').data('output', $('#nestable_list_output')));
});
}
Sorry for my english
Try this:
$('#element').data('id','newvalue');
Related
I have this error in Jquery when I try to each an array of HTML elements and handle onclick of that element.
Object.keys(collapsibles).forEach(function (key){
$(collapsibles[key]).on('click' , function( e ) {
e.preventDefault();
const id = $(this).data("id");
if (id !== _that.currentId) {
_that.closeCurrentOpen();
$(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
$(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
return _that.currentId = id;
} else {
return _that.closeCurrentOpen();
}
});
});
The error is appear in this line
$(collapsibles[key]).on('click' , function( e ) {
Collapsibles value
var collapsibles = $('[data-behavior="collapsible"]');
Code below has makes error because $(collapsibles[key]) is not a jQuery object:
$(collapsibles[key]).on('click' , function( e ) {//...});
Please see this fiddle. I simulated your code in that. You can see collapsibles in console that seems you didn't think it's a array that it's not suitable for you.
You can use this code instead (jsFiddle):
$.each(collapsibles, function() {
$(this).on('click', function() {
// ...
});
});
Uh, var collapsibles = $('[data-behavior="collapsible"]'); is not an array but rather a jQuery collection object. And you should not iterate array-like objects like that, neither with for … in nor with Object.keys(…).forEach.
For jQuery collections, just use .each, or don't use it at all but just call the .on method on it directly which will install the listener on all of the selected elements.
var collapsibles = $('[data-behavior="collapsible"]');
collapsibles.each(function() {
$(this).on('click', function(e) {
e.preventDefault();
const id = $(this).data("id");
if (id !== _that.currentId) {
_that.closeCurrentOpen();
$(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
$(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
return _that.currentId = id;
} else {
return _that.closeCurrentOpen();
}
});
});
var collapsibles = $('[data-behavior="collapsible"]');
collapsibles.on('click', function(e) {
e.preventDefault();
const id = $(this).data("id");
if (id !== _that.currentId) {
_that.closeCurrentOpen();
$(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
$(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
return _that.currentId = id;
} else {
return _that.closeCurrentOpen();
}
});
I am using the selected images only is going to next page. If I have selected the image like(1,2,3), after this I unselected the image (3). On next page I was getting all the images(1,2,3). I don't want unselected image(3). I have tried localStroage.removeItem but all the images are getting removed. But I want to remove only the unselected image.
<script>
localStorage.clear();
$(document).ready(function () {
$('.blur').on('click', function(){
var $$ = $(this);
if( !$$.is('.checked'))
{
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
documentid =''
var name=$(this).attr('id');
//alert(name);
var test = localStorage.getItem("test");
//alert(test);
var obj = [];
if(test)
{
obj= JSON.parse(test);
}
obj.push({"id": name});
localStorage.setItem("test",JSON.stringify(obj));
console.log(obj);
}
else
{
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
var name=$(this).attr('id');
//alert(name);
var test = localStorage.removeItem("test");
console.log(image);
}
})
});
please suggest me..
My code was working fine but they wanted to change my code....
they wanted to attach setValue and getValue added directly to
footballPanel instead of sports grid,
but after adding it the code is not working fine...
can you tell me why its not working....
providing my modified code below...
the UI action here I am performing is there are two radio buttons,
when I click each radio button two different grids open
in one of the grid we add value, when i switch back to another radio
button the values in another grid disappears but it should not
disappear...
after I modified the code the values disappear, can you tell me why?
Only part of modified code here
else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue();
sportsGrid.addCls("sports-item-disabled");
}
}
Whole modified code:
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
**if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue();
sportsGrid.addCls("sports-item-disabled");
}**
}
},
Working code without modification
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
sportsGrid.holdValue = sportsGrid.store.data.items;
sportsGrid.store.loadData([]);
sportsGrid.addCls("sports-item-disabled");
}
}
},
getValue() is not a method of ExtJS Panel class.
The change in your code, from sportsGrid (Ext.grid.Panel) to footbalPanel (Ext.panel.Panel) won't work, because they are from different classes and therefore have different properties and methods.
If you want this code to work, you'll need to implement getValue() and setValue(). For example, something like:
On FootballPanel class:
getValue: function () {
return this.down('grid').store.data.items;
},
setValue: function (newValue) {
if (!newValue)
newValue = new Array();
this.down('grid').store.loadData(newValue);
},
And use your modified code:
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue([]);
sportsGrid.addCls("sports-item-disabled");
}
}
},
For internationalization support, I wrote code that changes the URL from #lang-select dropdown .The code is
$(document).ready(function(){
var sel = document.getElementById('lang-select');
sel.onchange = function(){window.location.replace($('#lang-select').val());};
});
the above code works fine and it changes the URL from http://0.0.0.0:3000/fr to http://0.0.0.0:3000/en.
Now I want to preserve the changed value, but without success. I have written the code below. I don't know why it is wrong/not working .
function langSelect(){
var available_languages = {
"en":"English",
"de":"Deutsch",
"ru" :"Россию",
"fr" : "Française"
};
var languageInUrl= document.URL.split("/")[3];
for(var shortLanguage in available_languages){
if(shortLanguage === languageInUrl) {
var langaugeOptionArray = $("#lang-select>option");
for(var i = 0 ; langaugeOptionArray.length > i ; i++){
if(langaugeOptionArray[i].label === available_languages[shortLanguage]){
langaugeOptionArray[i].selected = true;
return;
}
}
}
}
}
Please tell me what's wrong in above code and since what I am doing is not a new thing, please share what is the best practice to overcome this scenario.
Currently, I am using backend to accomplish this.
$(function() {
$('#lang-select').on("change",function(){
window.location.replace($(this).val());
});
});
function langSelect(){
var available_languages = {
"en":"English",
"de":"Deutsch",
"ru" :"Россию",
"fr" : "Française"
};
var languageInUrl= document.URL.split("/")[3];
var lang = available_languages[languageInUrl];
if (lang) {
var langaugeOptionArray = $("#lang-select>option");
langaugeOptionArray.each(function() {
if($(this).text() === lang){
$("#lang-select").val(lang);
return false;
}
});
}
}
I believe we can even do
if (lang) {
var opt = $("#lang-select").find('option[text="'+lang+'"]').val();
if (opt) $("#lang-select").val(opt);
}
Good luck
I am trying to remove an object and store it (in case a user wants to retrieve it later). I have tried storing the object in a variable like it says in the thread below:
How to I undo .detach()?
But the detach() does not remove the element from the DOM or store it. I am also not getting any error messages. Here is the code I am using to detach the element:
function MMtoggle(IDnum) {
var rowID = "row" + IDnum;
var jRow = '#' + rowID;
thisMMbtn = $(jRow).find(".addMMbtn");
var light = false;
var that = this;
if (light == false) {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
$(this).unbind("click");
light = true;
}
);
}
else {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
thisMM = thisRow.find(".mmCell");
SC[rowID].rcbin = thisMM.detach(); //here is where I detach the div and store it in an object
$(this).unbind("click");
light = false;
}
);
}
}
MMtoggle(g.num);
A fiddle of the problem is here: http://jsfiddle.net/pScJc/
(the button that detaches is the '+' button on the right. It is supposed to add a div and then detach it when clicked again.)
Looking at your code I don't think so you need detach for what you are trying to achieve.
Instead try this code.
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var $mmCell = thisTxt.find('.mmCell');
if($mmCell.length == 0){
$mmCell = $('<div class = "mmCell prep"></div>')
.appendTo(thisTxt).hide();
}
$mmCell.toggle();
//$(this).unbind("click");
}
);
Demo