I want to render a template after a Ajax call.
My code is:
index.pug
include form.pug
+list('style')
form.pug
mixin list(style)
p(class=style) my form
I want to add form.pug after click a button, so
my ajax call is:
$.ajax({
url: "/myroute",
method: "POST",
data: msgObj,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
datatype: "json",
success: function (msg) {
div.prepend(msg.template)
},
});
/myroute (server-node) is:
const pug = require('pug');
var template = pug.renderFile('Path/form.pug');
res.send({"template":template,"style":"new_style"});
My template doesn't appear after click the button.
In I remove mixin, everything works, but I need pass a param during the template generation
Call the mixin somewhere in the page, select it in the DOM after AJAX call and fill the needed values before prepending it.
Related
Forgive me for the English of the Translator :)
I created a basic form to see if I get data in my API using vuetify however, when submitting the data the v-select data is not sent and I can not understand the reason, since in general the examples of these forms do not really make a request POST, follows snippets of the code I'm using:
<v-form method="post" action="http://127.0.0.1:3000/produtos">
<v-text-field name="escola" v-model="name" required :rules="nameRules"></v-text-field>
<v-select
v-model="selectPessoa"
:items="pessoas"
:rules="[v => !!v || 'Item is required']"
item-value="id"
item-text="nome"
label="itens"
required
name="pessoa"
return-object
value="id"
></v-select>
<v-btn color="warning" type="submit">Submit</v-btn>
</v-form>
Excerpt from javascript code:
data(){
return { pessoas: [{ id: 1, nome: "sandro" },
{ id: 2, nome: "haiden" }],
name: '',
selectPessoa: null,
}
}
The information I type in the v-text-field I get in the API node, but the one in the v-select does not:
Form screen:
API log screen:
On the<v-select> component you have defined the return-object and item-value="id" props. Using the return-object is overriding the item-value by returning the entire object from the v-select component instead of just the id. In this case you could just remove the return-object prop from the <v-select> component and that will fix your issue.
<v-select
v-model="selectPessoa"
:items="pessoas"
:rules="[v => !!v || 'Item is required']"
item-value="id"
item-text="nome"
label="itens"
required
name="pessoa"
return-object <------REMOVE THIS!!!
value="id"
></v-select>
Vuetify v-select docs: https://vuetifyjs.com/en/components/selects
Another option instead of removing the return-object prop could be to modify your API endpoint to expect an object rather than an int.
Also, I would not recommend using the "method" and "action" attributes on the <v-form> component. Instead, put a click event handler on the submit button of the form that calls a method. The method should then grab the data and send it to the API endpoint via an AJAX call.
On the Form Component
Before: <v-form method="post" action="http://127.0.0.1:3000/produtos">
After: <form #submit.prevent>
On the Button Component
Before: <v-btn color="warning" type="submit">Submit</v-btn>
After: <v-btn color="warning" #click="submit">Submit</v-btn>
In the methods have a function do something like this (used axios in my example, not sure what your project is using):
methods: {
submit () {
let data = { name: this.name, selectPessoa: this.selectPessoa }
axios.post('http://127.0.0.1:3000/produtos', data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
I have recently created a sharepoint list that has a multitude of radio button choices. When the user creates a new entry, they pick a radio button and submit. However, when they view using the display form, only the choice that they selected appears. I want to make it so that ALL of the possible choices appear, but it still shows what they have picked. Is there any possible way of doing this?
This is what appears currently
This is what I want (and what users see when they submit a new item)
We can use REST API to get all the filed choices and then append the HTML to the field in the display form using jQuery. The following code for your reference. Add the code into a script editor web part in the dispform.aspx page.
<script src="//code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var fieldTitle="AP Coding/Slip Claim Forms*/Limited Purchase Order";
var currentFieldValue=$("h3.ms-standardheader:contains('"+fieldTitle+"')").parent().next()[0].innerText.trim();
var fieldHTML=GetFieldChoices(currentFieldValue,fieldTitle);
$("h3.ms-standardheader:contains('"+fieldTitle+"')").parent().next().html(fieldHTML);
});
function GetFieldChoices(currentFieldValue,fieldTitle){
var listId = _spPageContextInfo.pageListId.replace("{","").replace("}","");
var fieldHTML="";
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'"+listId+"')/fields?$select=Choices&$filter= Title eq '"+fieldTitle+"'";
$.ajax({
url: url,
method: "GET",
async:false,
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var choices = data.d.results[0].Choices.results;
$.each(choices,function(index,choice){
if(choice==currentFieldValue){
fieldHTML+="<input type='radio' disabled='disabled' checked='checked' name='"+fieldTitle+"' value='"+choice+"'>"+choice;
}else{
fieldHTML+="<input type='radio' disabled='disabled' name='"+fieldTitle+"' value='"+choice+"'>"+choice;
}
if(index<choices.length){
fieldHTML+="<br>";
}
});
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
return fieldHTML;
}
</script>
I currently am working on designing a Sharepoint survey.
The first question is a lookup from a list, which looks like this:
Course1
Course2
Course3
Course4
Now, the user has to select one of these answers. While I got the lookup working, I have problem in updating the list.
the idea is, that the user can add his own courses to complement the list.
So for example, he can select OTHER and type in Course5 into a textbox, which should then be added to the list. The next user should then be able to select Course5 from the drop down list.ยจ
I have problems writing the result of a survey into the list - is this even possible?
Kind regards.
In choice field, it provide the 'fill-in' feature, unfortunately, the lookup column can't provide this feature.
As a workaround, we can using jQuery append a textbox and a button in the lookup column below in the newform.aspx page. Add some text in the textbox and click the "Add" button, then add data to the lookup list. The following example for your reference:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var questionTitle="question1";
var lookupListName="CL30";
$(function(){
$("select[title='"+questionTitle+"']").closest("td").append("<input id='lookupitemTitle' type='text'/> <input id='addlookupitembtn' type='button' value='Add'>");
$("#addlookupitembtn").click(function(){
if($("#lookupitemTitle").val().trim()!=""){
AddListItem(lookupListName);
}
});
});
function AddListItem(listName){
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": $("#lookupitemTitle").val()
};
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
var item=data.d;
$("select[title='"+questionTitle+"']").append("<option selected='selected' value='"+item.ID+"'>"+item.Title+"</option>");
},
error: function (data) {
alert("Error");
}
});
}
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>
I am trying to create a SP 2013 site through the REST API via Jquery AJAX. I have extracted the REQUEST_DIGEST from the '/_api/contextinfo' call. Next, while trying to set the X-RequestDigest header for the '/_api/web/webinfos/add' call ,a pre-flight request with method 'OPTIONS' is sent by the browser which is getting a HTTP 403 response code. As per my understanding , it is expecting the FedAuth cookie , while the browser, according to the CORS principle is not sending the authentication info. It seems that the 'OPTIONS' verb need to be configured on the SP 2013 and I have not found any clear solution for this. Is my understanding correct , in which case can anyone provide a solution ?
I created this code that works on my Sharepoint 2013 environment.
First, I try my ajax request with a relative URL like this : /_api/web/webinfos/add
The resquest result in a 403 Forbidden.
Then I retry with : _spPageContextInfo.webAbsoluteUrl + "/_api/web/webinfos/add"
and this time it works fine.
The reason is that my site collection URL pattern is :
http://domain/manage-path/site-collection
So when I use a relative URL /_api/web/webinfos/add its the same as using :
http://domain/_api/web/webinfos/add
Because its not the address of the current site collection Sharepoint returns a Cross-Site Scripting error.
But When I use _spPageContextInfo.webAbsoluteUrl + "/_api/web/webinfos/add" it give me the full URL of the site collection :
http://domain/manage-path/site-collection/_api/web/webinfos/add
Here is the complete script :
<script language="JavaScript" type="text/javascript">
function createSubsiteUsingREST(data,siteTitle,siteUrl,siteDescription) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/webinfos/add",
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
data: JSON.stringify({
'parameters': {
'__metadata': {
'type': 'SP.WebInfoCreationInformation'
},
'Url': siteUrl,
'Title': siteTitle,
'Description': siteDescription,
'Language': 1033,
'WebTemplate': 'sts',
'UseUniquePermissions': true
}
}),
success:function(){
alert('SubSite Created with success!');
},
error:function(){
alert('oups! An error occured during the process of creating this new SubSite!');
}
});
}
$(document).ready(function() {
$('#btnCreateSubSiteWithREST').on('click',function() {
var siteTitle = $('#txtSiteTitle').val();
var siteUrl = $('#txtSiteUrl').val();
var siteDescription = $('#txtSiteDescription').val();
createSubsiteUsingREST(siteTitle,siteUrl,siteDescription);
});
});
</script>
<input type="button" id="btnCreateSubSiteWithREST" value="Create New SubSite Using REST">
<div><label>Title of the SubSite : </label><input type="text" id="txtSiteTitle"></div>
<div><label>URL of the SubSite : </label><input type="text" id="txtSiteUrl"></div>
<div><label>Description of the SubSite : </label><input type="text" id="txtSiteDescription"></div>
Hope this help!
I'm using bootstrap-ajax combination with data-toggle selections.
Jade Code
block content
.container
ul.nav.nav-tabs.tabs-up
li.active
a(href= '#domains', id='domains_tab', data-toggle='tab', rel='tooltip') Domains
li
a(href= '#adddomain', id='adddomain_tab', data-toggle='tab', rel='tooltip') Add Domain
li
a(href= '#adduser', id='adduser_tab', data-toggle='tab', rel='tooltip') Add User
Also
#domains.tab-pane.active.fade.in
#adddomain.tab-pane.fade
#adduser.tab-pane.fade
Now with express, I want to render(or without rendering if it is possible) this html with a specific tab-content.
For ex,
res.render('dashboard#adddomain');
I'dont know how what I need to do, but is there any way to achieve this?
Thanks
This can be possible using ajax and render the content manually, somethink this...
Node function:
app.get('/domains', function(req, res){
res.send({text: 'Here are many domains'});
});
Javascript function:
$('a[data-toggle="tab"]').on('shown', function (e) {
$.ajax({
type: 'GET',
cache: false,
contentType: 'application/json',
url: '/domains',
success: function (domains){
$('#label').empty();
$('#label').append(domains); // HERE A LABEL IS UPDATE THROUGH RETURNS NODE.JS ('Here are many domains');
}
});
});
In each tab selection, you can put a check jquery and do a request though jquery ajax to node, get the return and update the content of a component (label, div, table, ...);