As titles suggest, I load some items via ajax, each item has a button with "v-on:click" event, but vuejs2 on click cannot be utilised.
Example of what ajax returns:
<button class="btn btn-info" v-on:click="selectItem(10)">Select</button>
How can I refresh cache/dom (not sure on how to refer to it) so that I can utilise "v-on:click" and other events?
You can do it only for a whole component level. Read the docs
Related
I am trying to integrate ckeditor with vue js in my application. Everything is working fine but when i click on submit button, all the data is saved in database and all fields are empty.
but in this case , i am not able to edit the ck-editor if i refresh or change the dom and again come to same page then working fine.
I think it needs to re-binding of ckeditor but I am not sure how we can do it.
I followed this link -> https://vuejsexamples.com/ckeditor-using-for-vue-js-2/
to integrate the ck-editor and also using js file of ckeditor on index page.
I assume that the Form which you are using is submitted by the browser - native html behaviour. To avoid that, the input field with type submit should look like (both #submit.prevent so as #click.prevent):
<form #submit.prevent="">
<input type="text" />
<input type="submit" value="ok" #click.prevent="" />
</form>
I was wondering if it is possible to write something like below;
<buttton #click="function(){alert('Yoohooo')}"></button>
Without having to write a method in the Vue instance every time I want to use #click for something as small as that.
It is impossible because Vue trying to add more attributes to DOM and DOM's events in its way with custom attributes and its annotations, methods should be write in methods and so on. As you know HTML is displayed by browsers by tag name, Vue also does that by new rules, more syntax but basically it does not allow write javascript function as tag's attributes
You can use the window-plugin
https://www.npmjs.com/package/window-plugin
<button #click='$window.alert("You clicked a button.")'>Click Me</button>
<button #click='$window.console.log("A button was clicked.")'>Click Me</button>
<button #click='$window.open("https://www.quickchords.org/", "_blank"))'>Click Me</button>
<h1 :v-text='$document.title' />
Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414
I have a long form made up of multiple sections, each with its own questions. Each section can be saved independently with an <input type="submit" value="Save" /> button.
Each section is loaded dynamically into the page (and there are a variable number of sections).
Each form is authored separately as an Ajax.Begin() ajax form, but with dynamic loading of the forms it appears UnobstrusiveJavaScript will not bind the submit buttons and they perform a standard postback.
What is the simplest way to reconnect the ajax functionality of the submit buttons?
After checking the source of UnobstrusiveJavaScript (which is quite small) it leaves permanent event handlers using .on('submit') so it should just work with dynamically loaded pages.
Turns out the master form was missing the inclusion of UnobstrusiveJavaScript:
#Scripts.Render("~/bundles/jqueryval")
Worth checking fiddler when this sort of thing occurs :)
Is there a way using dojo/dijit to disable the submit button till all the fields in a form are valid. Kind of like having a dojo > method > onChange inside the form? So the submit button only becomes enabled when all the form elements have meet their criteria?
Are you using a dijit.form.Form widget as your form? If you are, I would suggest connecting to the Form's onValidStateChange event. The docs for this event specifically state your use case:
onValidStateChange
Defined by dijit.form._FormMixin
Stub function to connect to if you want to do something (like disable/enable a submit button) when the valid state changes on the form as a whole. Deprecated. Will be removed in 2.0. Use watch("state", ...) instead.
The best way to see what events are available for a given widget is to look at the API Documentation for the widget you are interested in under the "Event Summary" heading. The dojocampus reference documentation often leaves out examples for references to some of the more obscure features of the widgets.
I would suggest to have a hidden button which will submit the form. When you click visbile button run a javascript function that validates all the input and then clicks on the hidden button to submit the form. Please find the pseudo code below
<form action="register">
<input dojoType="dijit.validation.TextBox"/>
<button onClick="validateall()">submit</button>
<button id="submitForm" type="submit" hidden="true"/>
</form>
function validateAll(){
if(AllOk){
clearErrorMessage();
dojo.byId('submitForm').click();
}else{
showErrorMessage();
}