Can I add an element to a RepeatingView without refreshing the latter? - wicket

Let's say that I have a RepeatingView with complex elements (for example containing applets). I want to add (or delete) a new element to RepeatingView with ajax, but I don't want to refresh all the elements, because it would cause applets to reload, which I obviously don't want.
I am using wicket 1.4.18
Adding to target only the element that I want to add, does not work, I get:
Component with id (...) was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update

Take a look at the approach suggested in this Wicket in Action article: Repainting only newly-created repeater items via ajax
The problem when you want to add a new element via AJAX is that there's no root markup tag for the newly added item for Wicket to repaint it.
Quoting the article:
The trick is to give Wicket a tag to repaint via Ajax which can be
accomplished by doing the following:
create the markup tag to represent the new item
add it to the right place in the markup
have Wicket repaint it via Ajax
The code in the article basically prepends some javascript in the ajax submit button's callback that actually creates the markup with the appropriate id for Wicket to be able to replace the element later, when you add it to the AjaxRequestTarget.

Related

Sortable div with TinyMCE inline

The code posted by vijayscode (https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs/59896435#59896435) doesn't work for me.
TinyMCE doesn't work even before I start ordering. Does sorting work with TinyMCE in when using inline mode?
For example, if I add the inline: true option to this code ... TinyMCE is not loaded immediately
http://fiddle.tinymce.com/33faab
Can you show me a working example on http://fiddle.tinymce.com/
You are really asking two questions so let me try to answer them separately...
 
Inline Mode
In order to use inline mode you need to target a block element (e.g. div) on the page as opposed to a textarea. This is explained in the documentation:
https://www.tiny.cloud/docs/configure/editor-appearance/#inline
If you want to use TinyMCE in inline mode you will need to adjust your HTML accordingly.
 
Sorting
As is discussed in SO post you linked to the act of dragging and dropping parts of the DOM impacts TinyMCE because the underlying DOM element that is linked to TinyMCE technically gets removed from the DOM when you start dragging and then a new element is inserted when you perform the drop. Because of this what you want to do is remove() TinyMCE before the DOM element is removed and then init() again after the new DOM element is placed back into the DOM.
I would not recommend using the mceAddEditor and mceRemoveEditor to do this work. Instead I would:
Call remove() to detach TinyMCE from the DOM element.
Let the drag/drop complete
Call init() on the DOM element after its placed back into the page.
Calling init() after the element is back in the page would allow you to determine the element's class/id/etc and call init() with the correct configuration.

Getting an element defined in a core:html by its ID

I used this line to define a canvas element in my view.xml:
<core:HTML content="<div class="wrapper col-6"><canvas id="
myChart"width="800"height="400"></canvas></div>">
</core:HTML>
Now I want to get the element in the controller but the typical this.getView().byId("myChart") doesn't seem to work even though the site successfully loads a canvas with the ID.
Is there a way to get those types of elements defined inside a core:HTML tag for the controller?
If not, is there a different way to create a canvas or other HTML elements so that I can refer to them with an ID / use them in the controller?
The element created in this way is not 'registered' in UI5 framework like the other controls. byId() only checks the internal register.
You can use jQuery or standard JavaScript to fetch the element though, like $('#myChart') or document.querySelector('#myChart').
You will find the code for this in Core.js or Core-dbg.js.
Like Jorg said, byId is for retrieving controls. So if you were to put an id on the HTML control, you could retrieve that control and then call getDomRef() on it to get the outermost element, which in your example would be the div. If you'd further only put the canvas inside the HTML control, you'd get that.
If you're accessing the id of the canvas directly, like Jorg suggested, you'll run into trouble if you're going to use the view twice inside a page, because the id of the canvas isn't unique anymore.
There is a third and IMHO preferable option, that is to use html directly inside the view. First you'll need to declare a namespace for it, like
xmlns:html="http://www.w3.org/1999/xhtml"
preferably right on your View element.
Then you can write html directly in your xml view like this:
<html:div class="wrapper col-6">
<html:canvas id="mycanvas" width="800" height="400"></html:canvas>
</html:div>
This way you're getting a proper (unique) id for your canvas and can access it as part of the view's dom with this.getView().getDomRef("-mycanvas"). Note the extra leading dash, because of internal id generation inconsistency in UI5. Also note that getDomRef() is considered protected, but I doubt it will change. Finally, remember that you can only get a domref for rendered controls, so you'll probably want to access it from an afterRendering event.

symfony custom form type with assets

I've created a custom form type in symfony2. This formtype has it's own template and this is working fine.
The form type also needs some javascript on the clientside to work nicely.
I would like to add this javascript to the page using the same template I use to render the widget. It's a bit more of a hassle to do this manually.
I could add the javascript manually on each page, but it would be nice if that just happened automatically.
I can't add the javascript just before or after the element itself, as it has a dependency to jquery which is only loaded at the bottom of the body.
I tried using a block which is defined in the "main template" (it is named block_javascript) to add the custom javascripts to the footer of the page, but it seems the rendering of forms works a little different and the block is not available.
I'm using assetic to prepare and return assets.
Is there a way I can use blocks from the main template being rendered when rendering a form widget?
I don't think yet about all the consequences or if it's doable, but here an idea that can solve your problem: use the event dispatcher.
an event for assets addition
a service that hold a list of assets to use and subscribe to above event
a Twig extension that use above service to make assets accessible in the template
trigger the event in the buildView() function of your form type with right parameters
use the Twig extension in your layout template
It theorically should work.

Disable form validation in MVC2

Is it possible to programatically disable form validation in MVC2?
I'm hoping there is some kind of command that I can put in a custom ActionMethodSelectorAttribute, making it possible to prefix ActionResults where I want form validation disabled.
The reason for this is that I have a form with multiple buttons, one button adds a new row to a child object of the model - which consequently creates a new row on the form.
This works fine, but validation is fired for the form each time "add" is pressed, and so the new fields flag up validation errors before the user has a chance to enter data.
I've found an alternative solution to this.
Rather than use multiple form buttons, I've used a custom html helper which produces a "Add" link.
This helper places the current Model in TempData and produces a Link to Add/{id}.
I'm not sure this is the cleanest solution, but it allows child elements to be added without validation firing. To tidy things up a bit, I specified the form as such:
Html.BeginForm(view, controller, new { id = Model.ID })

How to post partial view to another controller method

I have a one form tag inside my Index.aspx view. Index.aspx contains several partial views and using the same model to render them.
Now when any partial view is posting the form with submit button form is posted to OneActionMethod. But I want for some partial views to post form to OtherActionMethod.
How can I achieve this, without using action links, just with submit button in this particular patial view?
I`ve wrote the update in comments to this question. Answer is still not clear to me.
i believe a little javascript will get ur job done. u have to hook the submit event of the form and change the action attribute of the form. remember action is attribute of form not of a submit button. in jquery u can do something like
$("#myform").submit(function(){
if(isFirstSubmitButton){
$(this).attr(FirstAction);
}
else if(isSecondSubmitButton)
{
$(this).attr(SecondAction);
}
return true;
});
You sound like you are trying to program "WebForms" style in MVC.
Why do you have one big form enclosing all of your partials? Separate them into unique forms, and have each one post to it's appropriate action.
EDIT: With your further clarification, the only thing I can think of (aside from redesigning to use individual forms, which does lead to problems if they want to share data), is to post to a single action, and then route the request to a private member within the controller for ActionA or ActionB depending on a particular form element.