I m calling a form in a popup using bootbox
bootbox.alert(myform, function () {
}).find("div.modal-dialog").addClass("largeWidth");
in the form there is a a pallete collor picker(evol colorpicker)
$(document).ready(function () {
$("#cd_bundle_entitiesbundle_call_Color").colorpicker();
});
The first time the form popup opens the pallete for color pick displays ok but only for one time.
After that if i close the popup and open it again when pressing for the color pick pallete getting the error
Uncaught Error: cannot call methods on colorpicker prior to initialization; attempted to call method 'hidePalette'
Reading similar questions i think i ve to destroy the bootbox popup so in the callback of bootbox tried $(this).empty or $(this).remove() but didnt work
This is my form in a html file with some js
<div class="col-lg-6">
{{ form_start(form, {'action': path('calls_edit_exec'),'attr': {'class': 'callform'} } ) }}
<fieldset>
{{ form_errors(form) }}
<div class="row">
<label class="col-md-3">Requestor</label>
<label class="input col-md-5">{{ form_widget(form.Requestor) }}</label>
<span id="inforeq" class="inforeq fade info alert-success" ></span>
</div>
<div class="row">
<label class="col-md-3">CallStatus</label>
<label class="input col-md-5">{{ form_widget(form.CallStatus) }}</label>
</div>
<div class="row">
<label class="col-md-3">Color</label>
<label class="input col-md-5">{{ form_widget(form.Color) }}</label>
</div>
<span class="fade">
<input id="mycolor" class="colorPicker evo-cp0" />
</span>
<div class="row">
<label class="col-md-3">AssignedTo</label>
<label class="input col-md-5">{{ form_widget(form.AssignedTo) }}</label>
<span id="infouser" class="infouser fade info alert-success" ></span>
</div>
<div class="row">
<label class="col-md-3">Category</label>
<label class="input col-md-5">{{ form_widget(form.CallCategory) }}</label>
<span id="infouser" class="infouser fade info alert-success" ></span>
</div>
<div class="row col-lg-12">
<div class="row">
<label class="col-md-3">Call Problem</label>
</div>
<div class="row">
<label class=" textarea col-md-12">{{ form_widget(form.CallProblem) }}</label>
</div>
<div class="row">
<label class="col-md-3">Call Solution</label>
</div>
<div class="row" >
<label class="textarea col-md-12">{{ form_widget(form.CallSolution) }}</label>
</div>
<div class=" form-control">
<input class="form" type="checkbox" name="createready" id="createready">Make this Ready Call/Solution<br>
</div>
</div>
</fieldset>
{{ form_end(form) }}
</div>
<script>
$(document).ready(function () { $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
}); </script>
With a click the the form is returned from an ajax call
$.ajax({
url: url,
success: function (data) {
bootbox.alert(data, function () {
// $this.empty();
}).find("div.modal-dialog").addClass("largeWidth");
}
});
To get the form in popup i m using bootbox
I'm assuming that you're using this to load the modal with remote content:
$.ajax({
url: url,
success: function (data) {
bootbox.alert(data, function () {
// $this.empty();
}).find("div.modal-dialog").addClass("largeWidth");
}
});
If so, I would use the show.bs.modal method as the point where you trigger the colorpicker:
$.ajax({
url: url,
success: function (data) {
bootbox.alert({
message: data,
callback: function () {
// do something when dismissing the alert
},
className: 'largeWidth'
})
.on('show.bs.modal', function(){
$("#cd_bundle_entitiesbundle_call_Color").colorpicker();
});
}
});
I've also tweaked your example to use an options object, as shown in the documentation.
It's worth noting that there are size options for Bootstrap modals as of 3.1.0, which you can apply as you were with your largeWidth class, or you can use the equivalent size option as noted in the Bootbox docs I linked to previously.
Related
I use javascript auto complete to finish the input text.
But I can't use v-model function of vue3 to get full value in my code.
Does any one can give me some advise, thanks.
<div class="row">
<div class="col-md-3">
<label for="fnode">fnode:</label>
<input type="text" class="form-control required" id="fnode" name="fnode" v-model="fnode">
</div>
<div class="col-md-3">
<label for="fnode">fnode:</label>
<button class="btn btn-primary form-control">{{ fnode }}</button>
</div>
</div>
<script>
Vue.createApp({
data: function(){
return {
fnode: '',
};
},
methods: {
},
mounted: function() {
},
}).mount('#form1');
</script>
I need some help. I am trying to load my javascript file and listing to changing on checkbook when I click my checkbox to show or hide password. But for some reason it is not working. I have try everything, but out of ideas how to solve the problem.
$(document).ready(function () {
$('#showPassword').on('click', function () {
if ($(this).prop('checked')) {
$('#password').attr('type', 'text')
} else {
$('#password').attr('type', 'password')
}
})
<template>
<div class="container-fluid p-0">
<div class="col-md-12 content">
<div class="col-md-6 join-container" id="join-container">
<form class="col-md-12 col-sm-12"
>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" v-model="password"
placeholder="Password">
</div>
<div class="form-group pl-0">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="showPassword" />
<label class="form-check-label"
for="show-password">Show Password</label>
</div>
</div>
<br>
</form>
</div>
</div>
</template>
<script>
import Main from '../script/Index.js'
export default {
name: 'Register',
data: () => ({
}),
methods: {
},
components: {
Main
}
}
</script>
You're using jQuery event handlers (the $ bit) outside a script tag in a Vue component file. I wouldn't expect that code to do anything.
If you wanted that code to execute, you'd need it to be inside the <script> tags in your component. However, Vue already has event listeners (link to documentation), including listening for clicks on elements. There is no need to use two frameworks for this.
To implement a rough show password button (using your existing markup), here's how I'd do it (removing extra markup to highlight the important Vue-logic):
<template>
<div>
<input :type="passwordType" v-model="password">
<input v-model="showPassword" type="checkbox"/>
</div>
</template>
<script>
export default {
data() {
return {
showPassword: false,
password: ''
}
},
computed: {
passwordType() {
if (this.showPassword) {
return 'text'
} else {
return 'password'
}
}
}
}
</script>
It's not advisable to mix jQuery and Vue since they have separate lifecycles.
Vue is able to do everything you're after by itself.
Simply bind your checkbox state to a Vue data property and use that to determine the password field's type, eg
<input :type="passwordFieldType" class="form-control"
id="password" v-model="password"
placeholder="Password">
<!-- snip -->
<input v-model="passwordFieldType" true-value="text" false-value="password"
class="form-check-input" type="checkbox"
id="showPassword">
data: () => ({
passwordFieldType: 'password'
})
See https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1
new Vue({
el: '#app',
data: () => ({
password: '',
passwordFieldType: 'password'
})
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<form class="col-md-12 col-sm-12" id="app">
<div class="form-group">
<label for="password">Password</label>
<input :type="passwordFieldType" class="form-control" id="password" v-model="password" placeholder="Password">
</div>
<div class="form-group pl-0">
<div class="form-check">
<input v-model="passwordFieldType" true-value="text" false-value="password"
class="form-check-input" type="checkbox" id="showPassword" />
<label class="form-check-label" for="show-password">Show Password</label>
</div>
</div>
<br>
</form>
Inserting into mysql using php file called via AJAX. Before insert statement php code performs select query to find duplicate records and continue to insert statement.
Issue: When calling php file from ajax. it executed twice and getting response as duplicate record.
well i tried error_log from insert function its called twice.
Trigger point of form validation
$("#load-modal").on("click","#addcountryformsubmitbtn",function(e){
e.preventDefault();
var $form = $("#addcountryform"), $url = $form.attr('action');
$form.submit();
});
This is how form submitted after validation:
}).on('success.form.bv', function(e){
e.preventDefault();
var $form = $("#addcountryform"), $url = $form.attr('action');
$.post($url,$form.serialize()).done(function(dte){ $("#load-modal").html(dte); });
});
using bootstrapvalidator, Core PHP, mysqli, Chrome Browser.
Actual JS:
$(document).ready(function() {
$php_self_country="<?php echo $_SERVER['PHP_SELF']."?pg=countrycontent"; ?>";
$("#country-content").load($php_self_country,loadfunctions);
$("#country-content").on( "click", ".pagination a", function (e){
e.preventDefault();
$("#country-loading-div").show();
var page = $(this).attr("data-page");
$("#country-content").load($php_self_country,{"page":page}, function(){
$("#country-loading-div").hide();
loadfunctions();
});
});
$("#country-content").on("click","#closebtn",function(e){
e.preventDefault();
$("#country-content").load($php_self_country,loadfunctions);
});
});
function loadfunctions(){
$("[data-toggle='tooltip']").tooltip();
$("#country-content").on("click","#addcountrybtn, #addcountrylargebtn",function(e){
e.preventDefault();
$.ajax({
url: $php_self_country,
type: "POST",
data: { 'addcountry':'Y' },
dataType: "html",
cache: false
}).done(function(msg){
$("#load-modal").html(msg);
$("#load-modal").modal('show');
$('input[type="radio"]').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' });
modalvalidation();
}).fail(function() {
$("#load-modal").html( "Request Failed. Please Try Again Later." );
});
});
$("#country-content").on("click",".tools a",function(e){
e.preventDefault();
var recordid = $(this).attr("record-id");
$.ajax({
url: $php_self_country,
type: "POST",
data: { 'modifycountry':recordid },
dataType: "html",
cache: false
}).done(function(msg){
$("#load-modal").html(msg);
$("#load-modal").modal('show');
$('input[type="radio"]').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' });
modalvalidation();
}).fail(function() {
$("#load-modal").html( "Request Failed. Please Try Again Later." );
});
});
$("#load-modal").on("click","#addcountryformsubmitbtn",function(e){
e.preventDefault();
var $form = $("#addcountryform"), $url = $form.attr('action');
$form.submit();
});
$("#load-modal").on("hide.bs.modal", function () {
window.location.href=$php_self_country_pg;
});
}
function modalvalidation(){
$('#addcountryform').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
[-------Validation part comes here----------]
}
}).on('success.form.bv', function(e){
e.preventDefault();
var $form = $("#addcountryform"), $url = $form.attr('action');
$.post($url,$form.serialize()).done(function(dte){ $("#load-modal").html(dte); });
});
}
HTML
this html is called on button click addcountrybtn via AJAX and write in to div load-modal which is in base html file.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-exchange"></i> <?php echo COUNTRYLABEL; ?></h4>
</div>
<div class="modal-body">
<form role="form" method="POST" action="self.php" name="addcountryform" id="addcountryform" class="form-horizontal">
<div class="form-group">
<div class="col-xs-3">
<label for="countryname" class="pull-right">Country Name</label>
</div>
<div class="col-xs-9">
<div class="lnbrd">
<input type="text" class="form-control" name="countryname" placeholder="Enter Country Name">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="crncyname" class="pull-right">Currency Name</label>
</div>
<div class="col-xs-9">
<div class="lnbrd">
<input type="text" class="form-control" name="crncyname" placeholder="Enter Currency Name">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="crncycode" class="pull-right">Currency Code</label>
</div>
<div class="col-xs-9">
<div class="lnbrd">
<input type="text" class="form-control" name="crncycode" placeholder="Enter Currency Code">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="forrate" class="pull-right">Foreign Currency Rate<?php echo isset($icon)?$icon:''; ?></label>
</div>
<div class="col-xs-9">
<div class="lnbrd">
<input type="text" class="form-control" name="forrate" placeholder="Enter Foreign Currency Rate.">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="taxpercent" class="pull-right">Tax %</label>
</div>
<div class="col-xs-9">
<div class="lnbrd">
<input type="text" class="form-control" name="taxpercent" placeholder="Enter Tax Percentage">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="addcountryformsubmitbtn">Add</button>
</div>
</div>
Note:- in Database point of view code works as expected.
Couple of things that I have seen could possibly be the cause.
If you are using IE, I have seen that perform a GET immediately before doing a POST (to the same URL, with the same data being sent over), so it could be worth trying to check for that on your server (and ignore the GET)
Something else it maybe to add the following to the end of your button click events after the AJAX call (actually, normally I'd put the first line at the top with the prevent default, and the return statement obviously goes very last)...
e.stopImmediatePropagation();
return false;
I have a modal form that updates a client's address once the "save" button is clicked. I want to use a AJAX call to update the Model's data once the modal form is closed. It would then redirect back to the parent form from which the modal form was called (Index.cshtml). The AJAX call is successfully retrieving the updated modal form's data via the textboxes but it always throws an error.
TL;DR: Want to close a modal form, redirect to parent form and update the text displayed there.
Please see below for my code snippets:
Controller
[ValidateInput(false), HttpPost]
public JsonResult UpdateClientDetails(Client newClientDetails)
{
_clientService.UpdateClient(newClientDetails);
return Json(newClientDetails);
}
$('.btn-update-client').click(function (e) {
var id = $(this).val();
$('#updateClientModal .modal-content').load('/client/UpdateClientDetails/' + id);
$('#updateClientModal').modal('show');
});
View (Index.cshtml)
<div class="panel-body">
<label>Client Id: <span id="ClientId">#id</span></label>
<address>
<span id="Address1">#client.Address1</span>, <span id="Address2">#client.Address2</span><br>
<span id="City">#client.City</span>, <span id="Province">#client.Province</span><br>
<span id="PostalCode">#client.PostalCode</span><br>
<abbr title="Phone">P:</abbr> <span id="PhoneNumber">#client.PhoneNumber</span>
</address>
<div><button value="#id" type="button" class="btn btn-primary btn-update-client">Change</button></div>
</div>
__
Controller Method
public ActionResult Index()
{
return View(_clientService.GetClientList());
}
Modal Form
#model Client
#using ProductManager.Models
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">#Model.Name - ID: #Model.Id</h4>
</div>
#{
var attributes = new Dictionary<string, object>();
attributes.Add("class", "form-horizontal");
}
#using (Html.BeginForm("UpdateClientDetails", "Client", FormMethod.Post, attributes))
{
<div class="modal-body">
<div class="form-group">
<label for="clientAddress1" class="col-xs-3 control-label">Address 1</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="clientAddress1" name="Address1" value="#Model.Address1">
</div>
</div>
<div class="form-group">
<label for="clientAddress2" class="col-xs-3 control-label">Address 2</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="clientAddress2" name="Address2" value="#Model.Address2">
</div>
</div>
<div class="form-group">
<label for="clientCity" class="col-xs-3 control-label">City</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="clientCity" name="City" value="#Model.City">
</div>
</div>
<div class="form-group">
<label for="clientProvince" class="col-xs-3 control-label">Province</label>
<div class="col-xs-9">
#Html.DropDownListFor(model => model.Province, (IEnumerable<SelectListItem>)ViewBag.ProvinceList, new { #class = "form-control", #id = "clientProvince" })
</div>
</div>
<div class="form-group">
<label for="clientPostalCode" class="col-xs-3 control-label">Postal Code</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="clientPostalCode" name="PostalCode" value="#Model.PostalCode">
</div>
</div>
<div class="form-group">
<label for="clientPhoneNumber" class="col-xs-3 control-label">Phone #</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="clientPhoneNumber" name="PhoneNumber" value="#Model.PhoneNumber">
</div>
</div>
<div>
<input type="hidden" id="clientName" name="Name" value="#Model.Name">
</div>
<div>
<input type="hidden" id="clientID" name="Id" value="#Model.Id">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
}
<script type="text/javascript">
$('.btn-primary').click(function () {
$.ajax({
type: 'POST',
data: getModelData(),
dataType: 'json',
success: function (data) {
$("#Address1").text(data.Address1);
$("#Address2").text(data.Address2);
$("#City").text(data.City);
$("#Province").text(data.Province);
$("#PostalCode").text(data.PostalCode);
$("#PhoneNumber").text(data.PhoneNumber);
},
error: function () {
alert("Error occured!");
}
});
function getModelData() {
var dataToSubmit = {
Address1: $("#clientAddress1").val(),
Address2: $("#clientAddress2").val(),
City: $("#clientCity").val(),
Province: $("#clientProvince").val(),
PostalCode: $("#clientPostalCode").val(),
PhoneNumber: $("#clientPhoneNumber").val()
};
return dataToSubmit;
}
});
</script>
After clicking the "Save" button on my modal form, it redirects to http://localhost:6969/Client/UpdateClientDetails/1234 with the following string:
{"Address1":"38 Lesmill Rd","Address2":"Suite 1",
"City":"Toronto","Province":"ON","PostalCode":"M3B 2T5",
"PhoneNumber":"(416) 445-4504","Id":2827,"Name":"Advisor Centric"}
If you are being redirected when you click the save function, it could be due to a few reasons. The below snippet should solve your problems.
$(document).on('click', '.btn-primary', function (event) {
event.preventDefault();
$.ajax({
type: 'POST',
data: getModelData(),
dataType: 'json',
success: function (data) {
$("#Address1").text(data.Address1);
$("#Address2").text(data.Address2);
$("#City").text(data.City);
$("#Province").text(data.Province);
$("#PostalCode").text(data.PostalCode);
$("#PhoneNumber").text(data.PhoneNumber);
},
error: function () {
alert("Error occurred!");
}
});
function getModelData() {
var dataToSubmit = {
Address1: $("#clientAddress1").val(),
Address2: $("#clientAddress2").val(),
City: $("#clientCity").val(),
Province: $("#clientProvince").val(),
PostalCode: $("#clientPostalCode").val(),
PhoneNumber: $("#clientPhoneNumber").val()
};
return dataToSubmit;
}
});
Changes to snippet explained:
Instead of using the jQuery click method, I have updated this to use the on method. This will allow us to attach an event to the btn-primary class even if it is loaded after the dom has been rendered.
We are now passing in the event object into the method. This allows us to prevent any default behavior that is expected, for example submitting the form traditionally. This is accomplished with the event.preventDefault() method.
i wrote this to get form data and post it to a php page and do some proccess and get back a result to me,i start with getting post data from my bootstrap modal form and i found that the script can't take values from modal form,because the php part i can't upload it to fiddle or somewhere else.
i upload it on my server for rapid review
click on compose;
complete the fields
and when Send button clicked it expect to modal form sent some value to jquery ajax(on submit) but nothing sent from modal inputs to ajax and the whole $_POST array remain null,and whats going on?
hours and hours i searched for doc's and example's,but i couldn't found any answer,some examples works with bootstrap 2,and nothing for the bootstrap 3.
bootstrap 3.3.1,jquery 2.1.1
here is the modal code:
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Compose</h4>
</div>
<div class="modal-body">
<form id="sendmail" data-async method="post" role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="inputTo">To</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputTo" placeholder="comma separated list of recipients">
</div>
</div>
<div class="form-group">
<label class="col-sm-2" for="inputSubject">Subject</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSubject" placeholder="subject">
</div>
</div>
<div class="form-group">
<label class="col-sm-12" for="inputBody">Message</label>
<div class="col-sm-12">
<textarea class="form-control" id="inputBody" rows="18"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="Submit">Send</button>
<div id='response'></div>
</div>
</form>
</div>
</div>
</div>
jQuery:
$(document).ready(function () {
$('#sendmail').submit(function () {
$('#response').html("<b>Loading response...</b>");
$.ajax({
type: 'POST',
url: 'proccess.php',
data: $(this).serialize()
})
.done(function (data) {
$('#response').html(data);
})
.fail(function () {
alert("Posting failed.");
});
return false;
});
});
Simple PHP Code:
print_r($_POST);
In your code, this which is provided inside the $.ajax method's object refers ajax object. And it seems that you need to refer to the form from which you have to get the data and serialise it and send it into AJAX request.
Try following code,
$(document).ready(function () {
$('#sendmail').submit(function () {
var that = this;
$('#response').html("<b>Loading response...</b>");
$.ajax({
type: 'POST',
url: 'proccess.php',
data: $(that).serialize()
})
.done(function (data) {
$('#response').html(data);
})
.fail(function () {
alert("Posting failed.");
});
return false;
});
});
here I have referred the form object this by assigning it to that