I have a Bootstrap modal dialog that I am using to populate with data when user clicks on "Edit" in a jQuery data table. There is a Cancel and Submit button on this modal.
When I open the modal and click Cancel and then select another table row and click "Edit", everything is fine; data gets populated correctly each time "Edit" is clicked. However, if I do a postback by clicking "Submit" on the modal and then click "Edit" again, modal opens and no data is there.
I am using modal's on('show.bs.modal', ...) to populate it and it never gets hit after a postback is done.
// This is called when "Edit" in data table row is clicked
function showEdit(var1, var2) {debugger
$('#hfVar1').val(var1);
$('#hfVar2').val(var2);
showEditModal();
}
function showEditModal() {debugger
$("#spnEditHeader").text("Edit Something");
$('#editModal').modal('show');
}
$(document).ready(function () {
// This populates the jQuery data table
showTable(somthing, anotherThing);
// This is executed as long there is no postback;
// once a postback is perfoemd this is not hit, modal not populated
$('#editModal').modal({
keyboard: true,
backdrop: "static",
show: false
}).on('show.bs.modal', function (e) {debugger
var var1= $('#hfVar1').val();
var var2= $('#hfVar2').val();
//make ajax call to populate items
populateMPOOEdit(var1, var2);
});
....
});
//This is the button in modal that causes postback
<div class="modal-footer">
<div id="divEditButtons" style="text-align: center;">
<button id="btnCancel" class="btn btn-info2" data-dismiss="modal" aria-hidden="true" aria-label="Cancel">Cancel</button>
<button id="btnSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Update">Update</button>
</div>
</div>
// "Submit" button's click handler
$(document).on("click", "#btnSubmit", function (event) {
// Validate data (client side validation)
var isValid = validateUpdate();
// Also need a server side validation checking for duplicate name, using ajax to do this
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: '<%= ResolveUrl("services/mpoo.asmx/NameExists") %>',
cache: false,
data: JSON.stringify({ "Name": name }),
}).done(function (data) {
var result = data.d;
if (result != '') {
nameExists = JSON.parse(data.d);
if (nameExists == "true") {
$("#lblErrName").text("Duplicate Name");
$("#lblEditErrName").show();
isValid = false;
}
if (isValid) {
__doPostBack('btnSubmit', JSON.stringify({
action: "SaveUpdate", Var1: var1, ..., Varn: varn
}));
$('#editModal').modal('hide');
}
}
});
return false; // to prevent modal from closing if there are errors on page
});
Create a function like this:
//basically everything you had in your document.ready function
function myJsFunc() {
// This populates the jQuery data table
showTable(somthing, anotherThing);
// This is executed as long there is no postback;
// once a postback is perfoemd this is not hit, modal not populated
$('#editModal').modal({
keyboard: true,
backdrop: "static",
show: false
}).on('show.bs.modal', function (e) {debugger
var var1= $('#hfVar1').val();
var var2= $('#hfVar2').val();
//make ajax call to populate items
populateMPOOEdit(var1, var2);
});
....
}
Then in your Page_Load event handler in your codebehind, try putting this:
Page.ClientScript.RegisterStartupScript(this.GetType(), "some random name for your script", "myJsFunc();", true);
Related
I have a confirm modal that will delete a user (from XML file), it shows the user name in the confirmation modal, but when i'm trying to get that value to a variable to pass it to php via AJAX, I can't get the value of the html element (span), so I can't pass it to php... when I alert it, its clear.
This is the Dialog HTML
<div id="myDialog">
<h3>¿Está seguro de eliminar al usuario <b><span id="nombre_usuario_borrar"></span></b> ?</h3>
</div>
This is the Dialog.js
$(function() {
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "Eliminar",
buttons: {
'Eliminar': function() {
var usuario_borrar = $('#nombre_usuario_borrar').val();
alert(usuario_borrar);// It alerts nothing
$.ajax({
type: "POST",
url: 'eliminar2.php',
data: {
"usuario_borrar": usuario_borrar
},
error: function(result) {
alert("Error!!!");
}
});
$(this).dialog('close');
},
'Cancelar': function() {
$(this).dialog('close');
}
}
});
});
function Editar(nombre_archivo) {
alert(nombre_archivo);
}
function Eliminar(nombre_archivo) { // this works.
$("#nombre_usuario_borrar").html(nombre_archivo);
$("#myDialog").dialog("open");
}
function asignarUsuarioBorrar(nombre_archivo){
var obj = $("#usuario_borrar");
obj.attr("value",nombre_archivo);
}
As you can see, it shows 'Benigno' (span) value right, but when I click 'Eliminar', it alerts nothing.
$('#nombre_usuario_borrar').val()
This only works for HTML elements with a "value" option. The <span> tag does not have this option.
Try this instead to get the text within the <span>:
$('#nombre_usuario_borrar').text()
I have a formRemote that calls a function in my controller when it is submitted like this:
<g:formRemote name="editIndivRecForm" url="[controller: 'customer', action:'saveEditedIndividualRecord']" onSuccess="doResult();">
This form is submitted by clicking on a button. Rather, a button that is clicked called 'save' will do other things among clicking the form's submit button via Javascript. Here is the click handler for this button:
$('#save').click(function () {
$("#uniqueId").prop('disabled', false); // Have to enable before form submission else it doesn't go back as a param to controller.
$("#secondaryId").prop('disabled', false);
$("#submit").trigger("click"); // formRemote's submit button
$('#editIndivRecForm').reset;
<g:remoteFunction controller="customer"
action="remediationSearch"
update="content_area"
params="{rerender: true}"/>
});
The problem I'm running into is that I need the function of my controller called by the click handler remediationSearch to run AFTER the function of the controller called by the formRemote's submission saveEditedIndividualRecord is done executing. But it is happening the other way around. And for some reason the function onSuccess="doResult();" doesn't even execute otherwise I was going to move the following code into its body to make things work the way I want:
<g:remoteFunction controller="customer"
action="remediationSearch"
update="content_area"
params="{rerender: true}"/>
here is how doResult is now:
function doResult() {
console.log("done.");
}
the formRemote is submitted but the doResult function prints nothing to the console.
Seeing as all of the Grails AJAX related tags have been deprecated, I would recommend trying it this way:
Markup:
<form id="editIndivRecForm" onsubmit="return false;">
<!-- add fields here -->
<input type="text" id="uniqueId" value="${something}">
<input type="text" id="secondaryId" value="${something}">
<button id="save" type="button">
</form>
JavaScript:
// Function to update your content_area div
function updateContentArea() {
var params = { rerender: true };
var url = "${createLink(controller: 'customer', action: 'remediationSearch')}";
$.get(url, params, function(data) {
$("#content_area").empty().append(data);
});
}
$("#save").on('click', function() {
// Collect values from form and submit ajax request
// Using name and description for example fields here:
var data = {
name: $("#name").val(),
description: $("#description").val(),
uniqueId: $("#uniqueId").val(),
secondaryId: $("#secondaryId").val()
};
var url = "${createLink(controller: 'customer', action: 'saveEditedIndividualRecord')}";
// Submit the (first) AJAX request
$.ajax({
type: "post",
url: url,
data: data,
success: function() {
doResult();
$('#editIndivRecForm').reset();
updateContentArea();
}
});
}
I have the following button and when clicked it's invoking a function,
Is there a way to know in the controller that this button was clicked ?
$("#RemoveFile").on("click", RemoveFile);
<button class="btn" style="height: 25px" type="button" id="RemoveFile"><p >Remove File</p></button>
As Edurado Says this the implementation which you asked to him
First set hidden field in html page (razor view/ aspx page)
<input type="hidden" id="StakeholderId" name="stakeholderId" />
Then add script like below
$( "#buttonID" ).click(function() {
$( "StakeholderId" ).val(true);
});
And get the value and posting the value to controller like below
var hidden= $('StakeholderId').val();
$.ajax({
type: "post",
url: "Controller/Method",
data: {
hiddenField1: hidden,
hiddenField2: "hiddenValue2",
},
success: function() {
alert("yay")
},
error: function(e) {
console.log(e);
}
});
Hope this helps....
When you click in the button, add an onclick event to this very button and save the clicked status in a hidden field. Then, whenever you send data to the controller, send this hidden field value, stating whether the button was clicked.
UPDATED:
Here is the HTML
<input id="hdnRemoveClicked" type="hidden" value="false" />
And here is the javascript which adds the click event in the button with ID="RemoveFile", and set the hidden field value as true, to show it is clicked.
$( "#RemoveFile" ).click(function() {
$( "hdnRemoveClicked" ).val(true);
// do other things, if needed
});
The only way I know of to so this in MVC is to make an Ajax call to the server via an anonymous function in the JQuery component. Example:
$("#RemoveFile").on("click", "RemoveFile", function () {
// tell server
var jqxhr1 = $.ajax({ type: 'POST', url: "/myControllerUrl",
data: { buttonID: "RemoveFile" } });
$.when(jqxhr1).done(function (response, textStatus, jqXHR) {
if (textStatus != "success") {
alert("Error, please try later");
return false;
}
// update the user interface
});
});
Make an ajax call to a method in Controller where a session keeps track if button was clicked.
Why Bootstrap's popover repeats an action twice? For instance, I want to submit a form inside the popover's data-content via ajax. It repeats all the form data twice and the posts form twice.
Any idea what I can do about it?
jquery + bootstrap,
$('.bootstrap-popover-method').popover({
placement: 'bottom',
container: 'body',
html:true,
content: function () {
var p = $(this);
var data = $('#popover-content').html();
$('#popover-content').remove();
p.attr("data-content", data);
p.popover('show');
}
});
$('.bootstrap-popover-method').on('shown.bs.popover', function () {
// do something…
console.log(this); // I get twice of the button element <button class="btn btn-default bootstrap-popover-method"...>
console.log($(".btn-submit").length); // I get twice of '1'.
$(".link").click(function(){
console.log($(this).attr("href")); // I get once of 'test.html'.
return false;
});
$(".btn-submit").click(function(){
console.log($(this).closest("form").attr("action")); // I get twice of '1.php'
var form = $(this).closest("form");
console.log(form.serialize()); // I get twice of 'username=hello+world!'
$.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'
type: "POST",
url: form.attr("action"),
data: $(this).serialize(), // serializes the form's elements.
success: function(data){
//alert(data); // show response from the php script.
}
});
return false;
});
});
bootsrap + html,
<button type="button" class="btn btn-default bootstrap-popover-method" data-title="body" data-container="body" data-toggle="popover" data-placement="bottom">
Popover on bottom
</button>
<div id="popover-content">
hello
<form action="1.php" class="myform">
<input type="text" name="username" value="hello world!"/>
<input type="submit" value="submit" class="btn-submit"/>
</form>
</div>
This happens because popover.content checks if the tooltip is empty or not.
A simple fix would be to add a title attribute to popover.
$('.bootstrap-popover-method').popover({
placement: 'bottom',
container: 'body',
html:true,
title: "New Title",
content: function () {
var p = $(this);
var data = $('#popover-content').html();
$('#popover-content').remove();
p.attr("data-content", data);
p.popover('show');
}
});
https://github.com/twbs/bootstrap/issues/12563#issuecomment-56813015
This might be an old post, but i'm gonna leave here my work around.
I'm using bootstrap 3.3.5.
So the buggy behavior is that on every execution of "popover('show')", Bootstrap calls the rendering function twice, and only the second call is the one that actually renders the popup.
My fix is to return a short html string for the first call, and for the second call i let run the whole rendering function:
jQuery('.bootstrap-popover-method').popover({
html: true,
trigger: 'manual',
content: function(){//This is our rendering function for the popup's content
var __G_bs_popover_shown= jQuery.data(jQuery('body')[0], '__G_bs_popover_shown');
//Create a global variable, attached to the body element, to keep track of the repeating calls.
__G_bs_popover_shown= (typeof __G_bs_popover_shown == 'undefined') ? 1 : (__G_bs_popover_shown + 1) % 2;
//Update the global var
jQuery.data(jQuery('body')[0], '__G_bs_popover_shown', __G_bs_popover_shown);
//return a short string on every first call (this will not be rendered, anyway)
if(__G_bs_popover_shown == 1) return '<div>BLANK</div>';//==>this should not be an empty string!
//PLACE YOUR CODE HERE, E.G. AJAX CALLS, ETC..
//DON'T FORGET TO RETURN THE HTML FOR THE POPUP'S CONTENT!
}
});
I think you need to prevent the default event of the submit button
$(".btn-submit").click(function(e){
e.preventDefault();
console.log($(this).closest("form").attr("action")); // I get twice of '1.php'
var form = $(this).closest("form");
console.log(form.serialize()); // I get twice of 'username=hello+world!'
$.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'
type: "POST",
url: form.attr("action"),
data: $(this).serialize(), // serializes the form's elements.
success: function(data){
//alert(data); // show response from the php script.
}
});
return false;
});
$('.bootstrap-popover-method').off('shown.bs.popover')
.on('shown.bs.popover', function (e) {
e.preventDefault();
}
// unbind your submit button click
$(".btn-submit").off('click').on('click',function(){
console.log($(this).closest("form").attr("action")); // I get twice of '1.php'
var form = $(this).closest("form");
console.log(form.serialize()); // I get twice of 'username=hello+world!'
$.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'
type: "POST",
url: form.attr("action"),
data: $(this).serialize(), // serializes the form's elements.
success: function(data){
//alert(data); // show response from the php script.
}
});
return false;
});
I use Modal dialogs to submit new records (Asp.Net, MVC).
<div id="modal-dlg" class="modal fade" tabindex="-1"></div>
<div id="banner-add">
<a class="btn-default btn" data-toggle="modal" href="#Url.Action("BannerSlideNewModal", "Account", new { Model.Id })" data-target="#modal-dlg" target="profile-banner">Add</a>
</div>
On form submit, after data processing, I hide current dialog:
form.submit(function() {
button.attr('disabled', true).text('Please wait ...');
// call service to update/add record
if ($(this).valid()) {
$(this).ajaxSubmit(
{
success: function(data) {
.....
$('#' + context.id).modal('hide');
}
});
});
The problem is, when I open modal dialog again, I want to see blank fields for new entry, but all fields are assigned from previous entry. How I can initialize each time new modal dialog instead of reusing same one?
Thanks.
Just reset your form with reset():
form.submit(function() {
button.attr('disabled', true).text('Please wait ...');
// call service to update/add record
if ($(this).valid()) {
$(this).ajaxSubmit(
{
success: function(data) {
.....
$('#' + context.id).modal('hide');
form.reset();
}
});
});