Im having issues when placing html content from partial view into modal content via ajax, not all events defined in _layout.cshtml are being attached to elements in modal content.
Setup:
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
//custom css is here.
</head>
<body>
#RenderBody()
<partial name="_Modals" /> <-- all variations of modals exist in this file
//custom javascript files <-- **this is failing to attached to modal content**
#RenderSection("CustomScriptsSection", false);
</body>
</html>
_CustomLayout.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<partial name="_SideBar" />
<main>
<partial name="_NavBar" />
<div>
#RenderBody()
<partial name="_Footer" />
</div>
</main>
#section CustomScriptsSection{
#RenderSection("Scripts", false)
}
_Viewstart.cshtml
#{
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}
The Ajax Call snippet from a standard razor view(not a page).
#section Scripts{
$('#DefaultModelBtn').on('click', function (e) {
var RegisterURLPartial = "/Home/RegisterPartial"
$('#modal-default').modal('show');
$('#modal-default').off('shown.bs.modal').on('shown.bs.modal', function () {
if ($('#PartialContainer').length) {
$('#PartialContainer').load(RegisterURLPartial, function (response, status, xhr) {
});
}
});
});
}
Controller Method for the Partial Page
public virtual IActionResult RegisterPartial() => PartialView("~/Views/Home/Partial/_Register.cshtml");
The partial Page itself (ambiguous Action, Id, and Controller names)
<form id="someId" asp-action="someAction" asp-controller="someController" method="post">
<div class="input-group input-group-outline mb-3">
<label asp-for="Name" class="form-label"></label>
<input asp-for="Name" type="text" class="form-control" autocomplete="off">
</div>
<div class="input-group input-group-outline mb-3">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" type="email" class="form-control" autocomplete="off">
</div>
<div class="input-group input-group-outline mb-3">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" type="password" class="form-control" autocomplete="off">
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign Up</button>
</div>
</form>
What I noticed was the css is being formatted properly, but the javascript that attaches to those css class are not working, eg. focus event is missing in the modal. (input-group-outline css class is missing focus event)
No Razor Pages are used at all (#page not used).
Thanks for the help guys.
Related
I have created 2 partial views called _ftpsetupDetails.cshtml and _ftpsetupedit.cshtml
On load of the index page i am loading details partial view onto the below div.
now the problem is on post to the controller after save i am returning the ready only mode detail partial view. But instead of loading the partial view or hit done method of ajax it is redirecing the page to /FT/Edit url with detail partial view html on it. How to make sure the page is not redirected? what am i doing wrong?
//Once user clicks on Save button the below code will post the form data to controller
$(document).on("click", "#updateFTP", function () {
$.post("/Ftp/Edit", $('form').serialize())
.done(function (response) {
alert(response.responseText);
});
});
//On page load i am loading the partialview container witih read only view
LoadAjaxPage("/Ftp/DetailsByOrgId", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
//On edit button click i am loading the same div container with edit partial view
$(document).on("click", "#editFTP", function () {
// $("#createUserPartialViewContainer").load("/Users/Create?organizationId=" + orgId + "&organizationType=" + orgTypeId);
LoadAjaxPage("/Ftp/Edit", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
});
<div id="ftpPartialViewContainer">
</div>
<!--Details HTML partial view code-->
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<label for="Name" class="control-label">Name</label>
<input asp-for="Name" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<label for="Password" class="control-label">Password</label>
<input asp-for="Password" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Edit" class="btn btn-primary" id="editFTP" />
</div>
</div>
</div>
</div>
<!--Edit HTML partial view code-->
#model MyProject.Models.Ftp
#if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
#using (Html.BeginForm("Edit", "ftp", FormMethod.Post,))
{
#Html.ValidationSummary(true, "Please fix the errors")
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Pkid" />
<input type="hidden" asp-for="ConnectedTo" />
<input type="hidden" asp-for="ConnectedToType" />
<div class="row">
<div class="col">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary " id="updateFTP" />
</div>
</form>
</div>
</div>
}
I want to save a register form and must save birth date in another format.
In model I have:
public DateTime BirthDate { get; set; }
In the view:
#model Univer.Model.KarApplicant
#{
ViewData["Title"] = "";
}
<div class="container MainMiddle" style="padding-top:50px;">
<hr />
<div class="row container-fluid">
<div class="col-md-10">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger">
</div>
<div class="form-row">
....
<div class="form-group col-md-4">
<label asp-for="BirthDate" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
<input asp-for="BirthDate" class="form-control example1" data-val="false" />
<span asp-validation-for="BirthDate" class="text-danger"></span>
</div>
</div>
</div>
....
<div class="form-row">
</div>
<div class="form-group float-left">
<input type="submit" value="next" class="btn btn-lg btn-primary btn-block" />
</div>
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/lib/persian-date/persian-date.js"></script>
<script src="~/lib/persian-datepicker/js/persian-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".example1").pDatepicker();
});
</script>
}
When I click on Submit button and send data to action of controller, with breakpoint check form value that pass to controller, birth dates value that are passed to controller is 01/01/0001 but I have value in persian mode in input in view.
My question is: why when set value with javascript in input and send to controller the value doesn't get sent?
UPDATE: after the comment i Added this code
public void ConfigureServices(IServiceCollection services)
{
services.Configure<RequestLocalizationOptions>(options =>
{
options.DefaultRequestCulture = new RequestCulture("fa-IR");
}); .....
}
and
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{....
app.UseRequestLocalization();
app.UseMvc()....
}
am facing a weird issue with Invisible recaptcha. After 2 minutes when Recaptcha is getting expired its throwing script error "Object not found". Even tried using WidgetID but showing the same behavior. The only difference is I have an extra step in between the Recaptcha submit and my form submit. After successful recaptcha Submit on a button click a Pop up div opens on the page and the final submit happens on the click of pop up div submit button. All the submit process is working properly but when captcha expires in case form is left as idle for more than 2 minutes over the pop up div then it throws the error. Below is the code snippet:
<div>
<div>
...................
<div class="form__group">
<label class="text captcha"></label>
<div class="g-recaptcha" data-badge="inline" data-sitekey="{$CaptchaWebsiteKey}" data-size="invisible" data-expired-callback="validateExpire" data-callback="onSubmit"></div>
</div>
<div class="form__group">
<input id="btnPopUp" type="submit" class="btn btn--primary btn--full btn--xs-full" value="Submit your details"/>
</div>
</div>
</div>
<div id="modal" style="visibility:hidden;" class="modal">
<div class="modal-content">
<div class="modal-space">
...................
<div class="modal-space1">
<input type="submit" id="btnSubmit" value="Submit" class="modal-btn modal-space2 btn btn--primary btn--xs-full" disabled="true"/>
<input type="submit" value="Cancel" onclick="return closePopup();" class="modal-btn modal-space2 btn btn--primary btn--xs-full" />
</div>
</div>
</div>
</div>
<div class="overlay"></div>
<script language="javascript" type="text/javascript">
onload();
function onload() {
var element = document.getElementById('btnPopUp');
element.onclick = validate;
}
var captchaResponse='';
function onSubmit(response){
captchaResponse = response;
openPopup();
}
function validateExpire() {
grecaptcha.reset();
captchaResponse='';
}
</script>
Can anyone help regarding this issue? Thanks in advance.
I am learning Laravel 5.2 and vue.js,and not familiar with the grammars,the question is:
How to get all of the values of the form elements below and send them to controller with vue.js?
Including text,select,textarea,file input,radios,checkboxes.
PS:
There is a plugin in the html demo,it's function is compressing a selected image.
lrz.bundle.js,https://github.com/think2011/localResizeIMG
html demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<label for="formGroupExampleInput" class="col-sm-2 form-control-label">Text</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="exampleSelect1" class="col-sm-2 form-control-label">Select</label>
<div class="col-sm-10">
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="exampleTextarea" class="col-sm-2 form-control-label">Textarea</label>
<div class="col-sm-10">
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label for="exampleInputFile" class="col-sm-2 form-control-label">File input</label>
<div class="col-sm-10">
<input id="exampleInputFile" name="photo" type="file" class="form-control-file" value="Upload" accept="image/*">
preview:
<img id="preview"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">Radios</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">Checkboxes</label>
<div class="col-sm-10">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="js/dist/lrz.bundle.js"></script>
<script>
$(function () {
var $preview = $('#preview');
$('#exampleInputFile').on('change', function () {
lrz(this.files[0], {
width: 800
}).then(function (rst) {
$preview.attr('src', rst.base64);
rst.formData.append('fileLen', rst.fileLen);
});
});
});
</script>
</body>
</html>
I've a little bit of uncertainty as to whether or not it's actually a Laravel -> Vue setup you're looking for since you have absolutely no Laravel nor Vue code in your question which is extremely broad, but here's a basic template to get started. I use the following in pretty much every project.
Laravel
Create your route - routes/web.php:
Route::post('/myform', 'FormControntroller#submitForm');
Create your controller and method - app/http/controllers/FormController.php
class FormController extends App\Controllers\Controller {
public function submitForm()
{
var_dump(request->all());
}
}
Create your entry view - resources/views/app.blade.php
<html>
<head>
<title>Minimal Vue Example</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.1/vue.min.js"></script>
<script src="/js/main.js"></script
</body>
</html>
Vue
main.js
import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'
import Root from './components/Root.vue'
Vue.use(Router)
Vue.use(Resource)
var router = new Router({
history: true,
});
router.map({
'/': {
component: Root
},
});
// Start up our app
router.start(Root, '#app');
Create your root component - resources/views/assets/js/components/Root.vue
<template>
<form v-on:submit.prevent="submitForm">
<input type="text" v-model="formData.username"/>
<input type="text" v-model="formData.password"/>
</form>
</template>
<script>
export default {
data: function() {
return {
formData: {
username: null,
password: null
}
}
},
methods: {
submitForm: function() {
this.$http.post('/myform', this.formData).then(function(response) {
alert('Yay, my form was posted!');
});
}
}
}
</script>
At this point you'll need to run webpack on your assets, see the Laravel Documentation on Elixir.
Again, you've asked a very broad question without providing much background, but this will get you going.
Notes: The above code is working code on Vue 1.X, version 2 is slightly different.
For further help on Vue and Laravel, see the Laravel Documentation.
I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?
My search filter (code):
#using (Html.BeginForm())
{
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search for Towers Watson Subscribers/Contacts</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Reg Date:</div>
<div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="#regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="#regDateEnd" name="regDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Profile Mod Date:</div>
<div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="#profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="#profileModDateEnd" name="profileModDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Last Name:</div>
<div class="div-table-col"><input type="text" id="lastName" name="lastName" value="#lastName" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
<div class="div-table-col"></div>
</div>
</div>
</fieldset>
}
{#Html.Partial("List_Ajax", Model)}
http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.
Place the following div where you would like the loading icon to appear.
<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>
Then this in your Javascript file
$(document).ready(){
$('#search').click(function(){
$('#loadingDiv').show();
});
});
Then when you're done loading, simply:
function SomeCallBackEvent(){
$('#loadingDiv').hide();
};