I have this code:
var columns = [];
$.each(actions, function (idx, action) {
actionColumn = {
template: '#if (selfActions[i].name === "' + action.name + '"){ # <input type="checkbox" /> some text # } # '
}
columns.push(actionColumn);
});
$("#myId").kendoTreeList({
//...
columns: columns
});
And I want to convert to template such as:
<script id="rowLeaveTemplate" type="text/x-kendo-tmpl">
if (selfActions[i].name === '???action.name???' ){#
<input type="checkbox" /> some text
# } #
</script>
How can I pass parameter action.name to template to replace '???action.name???'
Something like this:
actionColumn = {
template: function(dataItem) {
return kendo.template($("#rowLeaveTemplate").html())({ actionName:action.name });
}
}
and kendo template itself:
<script id="rowLeaveTemplate" type="text/x-kendo-template">
# if (selfActions[i].name === actionName ){#
<input type="checkbox" /> some text
# } #
</script>
Related
I am trying create a simple crud system with react redux and form-redux.
The code below but does not work and gives error.
First I created an action for update and then created a reducer for that.
And then created component to use the action.
Let me know how to get this to work.
//-------------action--------------
export const EDIT_POST = 'EDIT_POST';
export const editPost = (id) => {
const request = axios.put(`${BOOK_URL}/books/${id}`);
return {
type: EDIT_POST,
payload: id,
}
};
//---------------- reducer-----------------
case EDIT_POST: {
return {...state, post: action.payload.data}
}
//----------------route--------------
<Route path='/posts/edit/:id' component={PostEdit}/>
//-------------------PostEdit---------------
class PostEdit extends Component {
componentDidMount = () => {
this.props.editPost(this.props.match.params.id);
console.log(this.props.editPost(this.props.match.params.id));
};
renderField = field => {
const {meta: {touched, error}} = field;
const className = `form-group ${touched && error ? 'has-danger' : ''}`;
return (
<div className='has-danger'>
<label>{field.label}</label>
<input type="text" {...field.input} className="form-control"/>
<div className="text-help">
{touched ? error : ''}
</div>
</div>
);
};
render() {
const {handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmitForm)}>
<Field name="title" label="Title" component={this.renderField}/>
<Field name="author" label="Author" component={this.renderField}/>
<Field name="description" label="Description" component={this.renderField}/>
<Field name="publicationDate" label="PublicationDate" component={this.renderField}/>
<button type='submit' className="btn btn-primary">Submit</button>
<Link to='/' className='btn btn-danger'>Cancel</Link>
</form>
);
}
}
export default reduxForm({
form :'updateForm'
})(connect(null, {editPost})(PostEdit));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Could you tell what error you are getting?
You have to change your action like
export const fetchPosts = () => {
return (dispatch) => {
axios.get(`${BOOK_URL}/books`).then((response) => {
return dispatch({
type: FETCH_POSTS,
payload: // your response here
});
})
}
}
I have a Vue component that makes a post request, and then outputs the returned html.
Sometimes, the html that is returned by the post contains Vue directives.
Is there a way to have Vue parse the returned html before it is output?
(In the longer term, I will rewrite this as a pure Vue solution, with the post request returning data rather than html. I'm after a short term solution if its possible).
EDIT:
Here's my stab based on thanksd's suggestion but I'm not sure how to bind the new Vue instance to an html element.
<template>
<div>
<input type="text" class="form-control" v-model="value" #change="getResults" ></input>
<div>
<template v-bind="results"></template>
</div>
</div>
</template>
<script>
import{eventHub} from '../utils/event.js'
export default {
data : function(){
return {
value : '',
results : {}
}
},
methods:{
getResults(){
if(this.value.length < 3){return;}
this.$http.post('/ajax/search',{search:this.value}).then((response)=>{
this.results = Vue({template:response.body});
});
},
},
}
After the post request returns you could create a new Vue instance, passing the html as the template and binding it to an element in your current Vue instance's template:
<template>
<div>
<input type="text" class="form-control" v-model="value" #change="getResults" ></input>
<div>
<div id="results"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return { value: '' }
},
methods: {
getResults() {
if (this.value.length < 3) {
return;
}
this.$http.post('/ajax/search', { search: this.value }).then((response) => {
new Vue({ el: '#results', template: response.body });
});
}
}
}
</script>
Or as #Bert pointed out, you could add a <component> tag to your template and pass its definition via the is prop:
<template>
<div>
<input type="text" class="form-control" v-model="value" #change="getResults" ></input>
<component :is="results"/>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
results: null
}
},
methods: {
getResults() {
if (this.value.length < 3) {
return;
}
this.$http.post('/ajax/search', { search: this.value }).then((response) => {
this.results = { template: response.body };
});
}
}
}
</script>
I'm writing a custom field directive which dynamically creates an <input> field (or <select> or <textarea> etc.) based on a 'custom field' object. I only want the directive to contain the form field, not any validation or label markup. This has worked fine up until validation.
It looks like the input field isn't added to the parent scope's form when $compiled. Is there a way to add it manually? I tried FormController.$addControl() (doc), which caused the form to start listening to changes on the input model, but the form states (dirty, valid, etc.) still weren't being updated.
Markup:
<div ng-controller="FieldController">
<form name="customFieldForm">
<label class="control-label" for="{{ field.name }}">{{ field.name }}:</label>
<input-custom-field model="field"></input-custom-field>
<span class="input-error" ng-show="customFieldForm.field.$error.required">
Required</span>
</form>
</div>
Controller:
myApp.controller("FieldController", function ($scope) {
$scope.field = {
name: "Pressure in",
required: true,
readOnly: false,
type: "decimal",
value: null
};
})
Directive (abridged):
.directive('inputCustomField', ['$compile', function ($compile) {
var buildInput = function (field, ignoreRequired) {
var html = '';
var bindHtml = 'name="field" ng-model="field.value"';
if (!ignoreRequired && field.required) {
bindHtml += ' required';
}
switch (field.type) {
case "integer":
html += '<input type="number" ' + bindHtml + ' ng-pattern="/^\\d*$/">';
break;
case "decimal":
html += '<input type="number" ' + bindHtml + ' class="no-spinner">';
break;
}
return html;
};
return {
restrict: 'E',
require: '^form',
scope: {
field: "=model"
},
link: function (scope, elm, attrs, formController) {
var fieldModel;
var replacedEl;
var renderInput = function (html) {
replacedEl = $compile(html)(scope);
elm.replaceWith(replacedEl);
fieldModel = replacedEl.controller('ngModel');
if (!fieldModel) fieldModel = replacedEl.find("input").controller('ngModel');
};
if (scope.field && scope.field.type) {
var html = buildInput(scope.field, attrs.hasOwnProperty("ignoreRequired"));
renderInput(html);
}
}
};
}])
Also see the fiddle.
this is my xml file:-
<results value="1">
<result value="111">
<Country_Code value="IN"/>
<Country_Name value="India"/>
<Region_Name value="Gujarat"/>
<City value="Rajkot"/>
<loction lat="13.060422" lng="80.24958300000003"/>
</result>
<result value="222">
<Country_Code value="KE"/>
<Country_Name value="Kenya"/>
<Region_Name value="Vihiga"/>
<City value="Kakamega"/>
<loction lat="0.1182473" lng="34.7334515999997"/>
</result>
</results>
this is my code:-
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var xml;
$.get(
"sea.xml",
null,
function (data) {
xml = data;
},
"xml"
);
function get_list(ls) {
var elName = $('#select').val();
var value = $('#value').val();
if(elName == "" || value == "")
{
}
else if (elName != "" || value != "")
{
var xPath = '//*[ #lat '+ ls +' "'+elName+'" and #lng '+ ls +' "'+value+'"]'+'/../City/#*';
var iterator = xml.evaluate(xPath, xml.documentElement, null,
XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);
var thisNode = iterator.iterateNext();
var str = '';
while (thisNode) {
if (str) {
str += ', ';
}
str += thisNode.textContent;
thisNode = iterator.iterateNext();
}
$("#result").text(str);
}
else
{}
}
</script>
</head>
<body>
<input type="text" id="select">
<input type="text" id="value">
<input type="button" name="button" value="Search" onclick="get_list('=')">
<div id="result">
</div>
</body>
</html>
with this code xpath return attribute value Rajkot but i want to change in Xpath to get all the attribute
with help of xPath if value match on xml file return only city attribute value.
but i want to all attribute value like:- IN,Inida,Gujarat,Rajkot,13.060422,80.24958300000003
The following XPath:
//loction[#lat='13.060422' and #lng='80.24958300000003'][1]/preceding-sibling::City/#value
Outputs:
value="Rajkot"
And the following XPath:
//loction[#lat='13.060422' and #lng='80.24958300000003'][1]/preceding-sibling::*/#*
Outputs:
value="IN"
-----------------------
value="India"
-----------------------
value="Gujarat"
-----------------------
value="Rajkot"
i haved trying to use ajax upload image. here is my code
$(function () {
var btnUpload = $('#post_pd_thumnail');
if ($("#id").val()) var post_id = $("#id").val();
else var post_id = 0;
new AjaxUpload(btnUpload, {
action: site_root_domain + "/product/upload_image/" + post_id,
name: 'file_upload',
onSubmit: function (file, ext) {
if ($('#post_pd_thumnail').val() != '') {
if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
jAlert(lang_error_upload_avatar, lang_alert_notice);
return false;
}
}
$('#preview').html('<img style="margin-left:45px;margin-top:45px;" border="0" width="16" height="11" src="' + site_root_domain + '/templates/images/icons/loading_2.gif" />');
},
onComplete: function (file, response) {
if (!response) {
jAlert(lang_error_upload_avatar, lang_alert_notice);
} else {
img_upload = 1;
$('#preview').html(response);
}
return;
}
});
});
And my HTML is:
<div id="preview">{$preview}</div>
<div class="fileupload">
<input type="file" name="post_pd_thumnail" id="post_pd_thumnail" value="" />
</div>
<input type="hidden" name="id" id="id" value="{$data['product']['post_id']}" />
and i got this error when upload image "el is undefined" and the function does not work correctly can anyone help me solve this problem please
Try to change the file element to button like,
<div class="fileupload">
<input type="button" name="post_pd_thumnail" id="post_pd_thumnail" value="" />
</div>
Here is the solution.
* Attaches event to a dom element
*/
function addEvent(el, type, fn){
// 610 BUG
if (el == undefined) return;
if (w.addEventListener){
el.addEventListener(type, fn, false);
} else if (w.attachEvent){
var f = function(){
fn.call(el, w.event);
};
el.attachEvent('on' + type, f)
}
}