1) How to set HTML to already created panel or any other Element?
I am a beginner. I tried the below to set some content inside the HTML
var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");
The above is working fine but the problem is that as the panel has many div's inside it.. the above approach is erasing those inside html (i.e div's) and replacing it with the above content.
I saw through Chrome that the panel has three nested div's. So, if I want to add HTML to it then I need to give something like below:
var clickedElement = Ext.getCmp('id').el.child('>').child('>'); //two times child
When I tried the above approach, I am successfully adding the html content and also the div's doesn't remove. Here the problem is that, I can't see the added content (maybe because of some default stylings, I can see the content is being added in Chrome console though.)
I am just asking whether there is any efficient way of adding HTML to the panel. In my opinion, this should be very easy approach which I am complexing here.
2) How to check whether a Element has a particular child ?
Suppose, for example, If I added a extjs Button as a child(item) into my panel while creating it. (which I can do). How to check whether the panel has the particular element (i.e button here)?
Before asking here, I searched alot and found somewhat relative but not helpful link to my problem.
In ExtJS most components are considered to have only one body element even if you see more on the dom. In contrast to jQuery which is basically added above a markup ExtJS generate the whole markup by itself.
Now to your question, to update the HTML of a component you can simply call the update() method like that
Ext.getCmp('id').update('hello');
See JSFiddle
Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');
Do not set id's on components instead add an itemId configuration and see the documentation for Ext.ComponentQuery.query.
Related
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
I'm taking a looking at bootstrap tags found here: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
I'd like to be able to hook into the HTML that's being rendered to add additional anchors/links to the tags being generated. There is an event named: beforeItemAdd() that allows you to see the item before it's added, but you can't necessarily interact with it other than prevent it from being rendered.
Is there a way to customize the HTML output here so I can add additional links besides the 'x' to my tag? Just applying a CSS class won't work, I need to be able to modify the actual markup being rendered so I can add content to the tags.
Alternatively, I'm open to a solution with tagging that allows for the customizing of tag HTML rendering.
Without digging really deep into the plugin source ( I've never used this plugin), or figuring out what data is stored, one way would be to use this in the event callback to traverse to the main container the plugin wraps everything in and then find the tag elements.
Add a class each time and then you know what you have already modified and the one without that class would be your new one
$('input').on('itemAdded', function(event) {
var $cont = $(this).siblings('.bootstrap-tagsinput'),
$tag = $cont.find('.tag').not('.modified').addClass('modified');
$tag.doSomeStuff();
});
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
I'm trying to build an extended set of custom components for handling form elements. To start with I wanted to create a form-components custom tag, that handles showing of label (and later some basic validation rules) and then specific components.
In this fiddle you can see it set up. I'm using the nested tags example to copy nodes from the parent tag to the child tag. However, this only seems to work 1 deep.
I'm doubting wether my approach is the right way to go and this just isn't supported, or I'm just looking at it from the wrong direction.
Ideas anyone?
I just updated your fiddle to riot.js v2.0.15 and replaced the <inner-html/> tag with the new <yield/> tag and it seems to work.
Fiddle: http://jsfiddle.net/e3p9n4pd/
"yield" tag is usefull if we are trying to access the inner text of tag within the HTML code of tag definition. but if we have to acces that text in scri
Firebug is probably the best debugging tool that makes the life easy for developers. But one thing that I am not able to find out is how do you locate the function that changed the CSS values. In the Right Panel, when you click on any CSS rule, it will select the HTML node in the left and you get to know that these values belong to this HTML element.
Is there any way that lets you find which javascript function modified the CSS. This is shown in firebug as
element.style{
color:#898980;
top:78px;
bottom:121px;
}
I need to find which JS function changed the above values as it is not in my CSS.
The one highlighted in below Image
In the HTML panel, on the element whose style is changed : Right-click => break on attribute change.
This will break every time an attribute of this element is changed.
See also: http://www.softwareishard.com/blog/firebug/firebug-tip-break-on-html-mutation/
Florent