EasyUi combtree dose't working inside the form tag, It's fine other than form tag
Mark Up
<form>
<div class="form-group">
<label for="searchfolder"><?php echo \Application\Plugin\Common::z_xlt('Move to Category'); ?></label>
<div class="custom-dropdownclass custom-documents">
<inputclass="form-control easyui-combotree " ng-value="currentdocument.category" data- realcatcode="{{currentdocument.category}}" name="parent" id ="searchfolder" data- options="input:searchfolder">
</div>
</div>
<form>
Script
$http({
method: 'post',
url: basePath + '/documents/documents/ajax',
data: data
}).then(function(response) {
$('#searchfolder').combotree('loadData', $scope.getDirectTreeComboData(response.data.directorytree));
$('#newfolder_parent').combotree('loadData',
$scope.getDirectTreeComboData(response.data.directorycombotree));
});
Error Image of console error
Related
I need to Add data & image file in a same post request using alpine js.
I think it is a little bit late. But, someone else might need take benefit from this answer in the future.
You can use Javascript's FormData to handle both data and file.
Bellow, I am copying a part from my application to show the full process of actually uploading image with Alpine JS and sending it as part of Form Data to your API end.
HTML Part:
<form method="post" enctype="multipart/form-data" #submit.prevent="$store.app.submitData()">
<div class="row mb-4">
<div class="form-group col-md-4">
<label>App Name</label>
<input type="text" name="name" class="form-control" x-model="$store.app.form.name">
</div>
<div class="form-group col-md-4">
<label>Slug</label>
<input type="text" name="name" class="form-control" x-model="$store.app.form.slug">
</div>
<div class="form-group col-md-4">
<label>Icon/Logo</label>
<input type="file" name="image_icon" class="form-control" x-on:change="$store.app.selectFile($event)" accept="image/png, image/jpg, image/jpeg">
</div>
</div>
<div class="row">
<div class="col-md-12 text-end mt-3">
<button type="submit" class="btn btn-lg btn-primary mb-5" :disabled="$store.app.loading">
<span class="indicator-label">Save</span>
</button>
</div>
</div>
</form>
Alpine JS Part:
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('app', {
loading: false,
form: {
name: '',
image_icon: '',
slug: ''
},
selectFile(event) {
this.form.image_icon = event.target.files[0]
},
submitData() {
//Create an instance of FormData
const data = new FormData()
let url = '/application'
// Append the form object data by mapping through them
Object.keys(this.form).map((key, index) => {
data.append(key, this. Form[key])
});
this.loading = true
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
body: data
})
.then(response => {
//...
})
.finally(() => {
this. Loading = false
});
}
})
})
</script>
Please note that I have used store in this example, you can use Alpine Data, function or inline x-data as you please.
Appending to the form data just requires a key and value pair, for example;
const data = new FormData();
data.append('name', 'John');
data.append('surname', 'Doe');
I hope this helps.
I have a modal window that works fine on laptop..
On a smart phone, as soon as I click any input field (to edit), the modal disappears, and page reloads...
What is causing this behavior ?
<div class='modal fade my_modal' id='edit-member-container' tabindex='-1' role='dialog' aria-hidden='true'>
<div class='modal-dialog'>
<div class='row'>
<div class='col-sm-6 col-centered'>
<form id='contact' action='' method='post'>
<h3>Edit</h3>
<fieldset>
<input placeholder='First Name' type='text' tabindex='1' id='txtFname' value='$first_name'>
</fieldset>
<fieldset>
<input placeholder='Last Name' type='text' tabindex='2' id='txtLname' value='$last_name'>
</fieldset>
<fieldset>
<button type='button' id='btnsaveEdit'>Save Changes</button>
</fieldset>
</form>
</div><!-- col -->
</div><!-- row -->
</div><!-- dialog -->
</div> <!-- close edit member modal -->
<script>
$(document).on("click","#btnsaveEdit",function(){
var id_key = $("#id_key").val();
var first_name = $("#txtFname").val();
var last_name = $("#txtLname").val();
var value = {
id_key:id_key,
first_name:first_name,
last_name:last_name
};
$.ajax(
{
url : "http://www.clubsandgroups.com/new-crud/application/member/save_user_edit_member_3.php",
method: "POST",
data : value,
dataType : "JSON",
success: function(response)
{ ... }
});
});
</script>
I have installed programr. I followed tutorial from this site http://dreamingechoes.github.io/bot/ruby/rails/conversational-bot-ruby-on-rails/
bot.rb
require 'programr'
brains = Dir.glob("lib/bot/*")
BOT = ProgramR::Facade.new
BOT.learn(brains)
application_controller.rb
def ask_bot
reaction = BOT.get_reaction(params[:query])
render json: { response: reaction.present? ? reaction : "I don't have an answer to that" }
end
bot.aiml
<?xml version="1.0" encoding="UTF-8"?>
<aiml version="1.0" xmlns="http://alicebot.org/2001/AIML-1.0.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://alicebot.org/2001/AIML-1.0.1 http://aitools.org/aiml/schema/AIML.xsd">
<category>
<pattern>Hello *</pattern>
<template>
Hey, how can I help you?
</template>
</category>
<category>
<pattern>*bye</pattern>
<template>
Always here for you!
</template>
</category>
<category>
<pattern>What payment methods do you accept?</pattern>
<template>
We accept Visa, MasterCard and American Express.
</template>
</category>
</aiml>
view:
<div class="alert alert-info">
×
<strong>Info!</strong> Type something on the text input and hit the <strong>GO</strong> button to get a response.
</div>
<div class="bs-callout bs-callout-info bot-response hide" id="callout-alerts-no-default">
<h4>Bot says:</h4>
<p id="bot-response"> </p>
</div>
<div class="row home-row">
<div class="col-lg-12">
<div class="input-group">
<input id="query" type="text" class="form-control" placeholder="Say something to the bot...">
<span class="input-group-btn">
<button id="ask" class="btn btn-default" type="button">GO</button>
</span>
</div>
</div>
</div>
application.js
$(document).ready(function(){
$('#ask').on('click', function(event) {
$.ajax({
url: '/ask_bot',
type: 'json',
method: 'get',
data: { query: $('#query').val() },
success: function(data) {
$('.bot-response').removeClass('hide');
$('#bot-response').html(data['response']);
$('#query').val('');
}
});
});
});
If i copy a pattern and paste in the form, the GO button does nothing. Please help...thanks!
Most probably what you'll have to use is the DOMContentLoaded in order to check when the DOM has finished loading, this way you can wrap the listener for the #ask button and the AJAX function, without having to modify your "requires" in the application.js file, nor to have to include them as script tags in your views.
You could try with something like:
document.addEventListener('DOMContentLoaded', function () {
...
});
And inside to put your JS code, which would remain as:
document.addEventListener('DOMContentLoaded', function () {
$('#ask').on('click', function(event) {
$.ajax({
url: '/ask_bot',
type: 'json',
method: 'get',
data: { query: $('#query').val() },
success: function(data) {
$('.bot-response').removeClass('hide');
$('#bot-response').html(data['response']);
$('#query').val('');
}
});
});
$('[data-toggle="tooltip"]').tooltip();
});
Also you could add the specific custom.js for the specific controller and action in which is being used, that's the reason of the Uncaught TypeError: Cannot read property 'getContext' of null error, because such elements barChart and barChart2 are in the back_office#index.
I'm using Ajax to upload the form data. The output of multer(req.file, req.body) is always undefined/{};
My server code:
import multer from 'multer';
import post from './router/api_post';
var upload = multer({dest: 'uploads/'});
app.use('/api/post', upload.single('thumb') , post);
and the api_post router file:
import express from 'express';
var router = express.Router();
router
.post('/', (req, res, next) => {
console.log("POST POST");
var post = {};
console.log(req.body);
console.log(req.file);
});
export default router;
the output of req.body is {} and of req.fileisundefined`.
I use react on the browser side and upload data via ajax:
savePost(ev) {
ev.preventDefault();
var editor = this.refs.editorDom.getDOMNode();
var ajaxReq = new AjaxRequest();
var formData = new FormData();
formData.append('post_id', this.state.post_id);
formData.append('title', this.state.title);
formData.append('author', this.state.author);
formData.append('digest', this.state.digest);
formData.append('content', editor.innerHTML);
formData.append('content_source_url', this.state.content_source_url);
formData.append('create_time', new Date());
formData.append('thumb', this.state.thumb);
ajaxReq.send('post', '/api/post', ()=>{
if(ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) {
var result = JSON.parse(ajaxReq.getResponseText());
if(result.ok == 1) {
console.log("SAVE POST SUCCESS");
}
}
}, '', formData);
}
The savePost() is callback of a button's event listener. I did upload data successfully with formidable. I just replaced the formidable with multer but can not get it.
I didn't set the content-type property. I found it in the header is
, multipart/form-data; boundary=----WebKitFormBoundary76s9Cg74EW1B94D9
The form's HTML is
<form id="edit-panel" data-reactid=".ygieokt1c0.1.0.1.0.1">
<div id="title" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.0">
<input type="text" class="form-control" name="title" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.0.1">
</div>
<div id="author" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.1">
<input type="text" class="form-control" name="author" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.1.1">
</div>
<div id="thumb" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.2">
<button class="btn btn-default" data-reactid=".ygieokt1c0.1.0.1.0.1.2.1">
<input type="file" name="thumb" accept="image/*" data-reactid=".ygieokt1c0.1.0.1.0.1.2.1.0">
<span data-reactid=".ygieokt1c0.1.0.1.0.1.2.1.1">UPLOAD</span>
</button>
</div>
<div class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.3">
<textarea class="form-control" name="digest" rows="5" data-reactid=".ygieokt1c0.1.0.1.0.1.3.1"></textarea>
</div>
<div id="rich-text-editor" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.4">
<div id="editor-div" class="form-control" contenteditable="true" data-reactid=".ygieokt1c0.1.0.1.0.1.4.1"></div>
</div>
<div id="content-source-url" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.5">
<input type="text" class="form-control" name="content_source_url" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.5.1">
</div>
<button class="btn btn-default" data-reactid=".ygieokt1c0.1.0.1.0.1.6">保存并提交</button>
</form>
I can output the thumb, it's a File{} object.
Thanks for help.
Finally I found the problem is the Content-Type.
I used this.request.setRequestHeader("Content-Type", postDataType); to set the Content-Type and set the postDataType to '', then the actual Content-Type in header is , multipart/form-data; boundary=----WebKitFormBoundary76s9Cg74EW1B94D9 as I mentioned at the first.
You can see there is a comma and a space before the multipar/form-data. I have no idea where this comma come from. But anyway, when I remove the comma and space, everything just works fine!
I'm doing an xhr file upload using dojo.io.iframe.send and it works fine in all browsers except IE 8. IE8 sends a GET request instead of a multipart POST. This is my code:
dojo.io.iframe.send({
form: this.logoForm.domNode,
handleAs: "json",
method: "POST",
url: '/backend/design/uploadLogo',
load: dojo.hitch(this, function(response) {
if (response.error) {
errorFunc(response);
} else {
this.submitStatusLogo.innerHTML = "Your logo has been successfully uploaded.";
this.logoButton.hideIndicator();
dojo.addClass(this.submitStatusLogo, "success");
if (response.logoPath) {
this.productLogo.innerHTML = '<img src="'+response.logoPath+'" alt="" />';
}
}
}),
error: errorFunc
});
And this.logoForm.domNode is:
<form dojoAttachPoint="logoForm" dojoType="dijit.form.Form" enctype="multipart/form-data" class="designLayoutForm">
<div class="uploadedImage" dojoAttachPoint="productLogo"></div>
<h2>Logo
<span dojoType="sc2.common.TinyHelp" title="Logo">
Upload a product logo that will be shown in the top left of the demo page.<br />
If the logo is higher than 80 pixels, it will be resized to a height of 80px. <br />
<br />
<i>Supported file types are: png, jpg, gif, bmp.</i>
</span>
</h2>
<p>
<input type="hidden" dojoAttachPoint="logoForm_product" name="product" value="" />
<input type="hidden" dojoAttachPoint="logoForm_XSessionVerify" name="X-Session-Verify" value="" />
<input type="file" name="file" dojoAttachPoint="logoInput" />
</p>
<p dojoAttachPoint="submitStatusLogo" class="submitStatus"></p>
<p>
<input dojoType="sc2.form.IndicatorButton" dojoAttachPoint="logoButton" label="Upload">
</p>
</form>
What am I doing wrong?
Okay I solved it, adding method="POST" to the form element did the trick. Apparently specifying method: "POST" in the send parameters was not sufficient for IE8. Thanks for your time anyway