I'm trying to pass a button value on a form submit in conjunction with a jquery confirm dialogue, but it's not going through. I understand it has something to do with the script using a "form.submit" function but I'm not familiar enough with JS to code a workaround to the problem.
Is there a way to maybe reassign the first button's value to a new JS variable and pass that instead?
I've simplified the form down to its basic elements to make it easy to follow. The data I'm trying to pass in this example is "123" using the button tied to the confirm dialogue script. A second "regular button" is added to demonstrate a successful form submission. Some PHP gathers in the POST data and displays it.
// Results:
// $regularbutton = '456';
// $alertbutton = '';
testpage.php:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
'use strict';
function confirmDialog(title, message, success) {
var confirmdialog = $('<div></div>').appendTo('body')
.html('<div><h6>' + message + '</h6></div>')
.dialog({
modal: true,
title: title,
zIndex: 10000,
autoOpen: false,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
success();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function() {
$(this).remove();
}
});
return confirmdialog.dialog("open");
}
$('#submit_alert').on('click', function (e) {
e.preventDefault();
var form = document.getElementById('form_alert');
confirmDialog('Confirm', 'Are you sure you want to proceed?', function () {
form.submit();
});
});
});
//]]>
</script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>
<?php
extract($_POST);
echo "button1: $alertbutton <br>";
echo "button2: $regularbutton <br>";
?>
<form method="post" id="form_alert" action="testpage.php">
<button name="alertbutton" value="123" id="submit_alert">Alert Button</button>
<button name="regularbutton" value="456">Regular Button</button>
</form>
</body>
</html>
The value of the button is not commited.
You could inject a hidden field before calling the form.submit():
confirmDialog('Confirm', 'Are you sure you want to proceed?', function () {
$('#form_alert').append('<input type="hidden" name="alertbutton" id="submit_alert_hidden" value="' + $('#submit_alert').val() + '" />');
form.submit();
});
You can use the attribute data-* to pass some datas :
$(function()
{
$(".MyButton").on('click', function(e)
{
// note that some-value is camelCased to someValue
console.log(e.target.dataset.someValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="MyButton" name="alertbutton" data-some-value="123" id="submit_alert">Alert Button</button>
<button class="MyButton" name="regularbutton" data-some-value="456">Regular Button</button>
Related
this is my first question on StackOverflow and my first time working with Chrome Extensions.
I am trying to get user input from an html popup and use jquery to pass that input to a javascript function. The openNewPopup function works here, and the removeATab function works only if I hard code a specific tab index within the function (not passing in the index).
My background.js
function openNewPopup() {
chrome.tabs.create({
index: 0,
url: "http://google.com"
}, function(tab) {
console.log(tab);
});
}
function removeATab(removeTab) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
lastTabId = tabs[removeTab].id;
chrome.tabs.remove(lastTabId);
});
}
My popup_script.js
document.addEventListener("DOMContentLoaded", function() {
var backgroundPage = chrome.extension.getBackgroundPage();
document.querySelector('#newTabButton').addEventListener('click',
function() {
backgroundPage.openNewPopup();
});
document.querySelector('#btnRemove').addEventListener('click',
function() {
var indexRemove = document.querySelector('#tabRemove');
backgroundPage.removeATab(indexRemove);
});
});
And my popup.html
<!DOCTYPE html>
<html>
<head>
<title>Work with tabs</title>
<script src="popup_script.js"></script>
</head>
<body>
<h3>"Open new tab"</h3>
<button id="newTabButton">Make a new tab!</button>
<div class="remove">
Remove tab:<br>
<input type="number" name="tabRemove" id="tabRemove">
<br>
<input type="button" id="btnRemove" value="Remove">
</div>
</body>
</html>
i have a function to display pdf on a modal popup when click on a button.
i want to integrate this on another modal popup.
but its not working.
my code to display pdf on a modal pop up on button click
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
var fileName = "AFarm.pdf";
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 540,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"http://vho.org/aaargh/fran/livres4/AFarm.pdf\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
object += "If you are unable to view file, you can download from here";
object += " or download <a target = \"_blank\" href = \"AFarm.pdf/\">Adobe PDF Reader</a> to view the file.";
object += "</object>";
object = object.replace(/{FileName}/g, "Files/" + fileName);
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
And the below function where i want to integrate this
$('#manageApplicantModel').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var applicaitonid = button.data('id');
var modal = $(this);
$.get(getURL('ManageApplication/getApplicationDetailByid/' + applicaitonid), function (data) {
var json = new Object();
json = JSON.parse(data);
modal.find('#name').text(json.name);
modal.find('#email').text(json.email);
modal.find('#phonenum').text(json.phone);
modal.find('#propertyname').text(json.property_name);
modal.find('#applieddate').text(json.date_applied);
modal.find('#address').text(json.property_address);
modal.find('#divrequirementchecks .reqcheckslbl').empty();
$.each(json.check, function (index, value) {
//list-group-item
modal.find('#divrequirementchecks .reqcheckslbl').append(
'<li class="">'
+ value
+ '</li>');
});
modal.find('#divattacheddoc .attacheddoclst').empty();
$.each(json.documents, function (index, value) {
modal.find('#divattacheddoc .attacheddoclst').append(
'<li class="list-group-item">'
+ value.document_name
+ 'Download'
+'<br>'
+ '<a id="#mypdf" href="#" class="pull-right">View</a>'
+ '</li>');
});
});
}
);
See the view link in this function. on click on this link. i want to show that modal popup with pdf. anybody knows please help me
I wrote a blog post on this...several people got it working using this technique...let me know if it helps your case..
http://www.anujvarma.com/rendering-pdf-in-a-modal-popup-asp-net-mvc/
I want to have a dialog window with an input. I could use the default jQuery-ui one, but I am using one that incorporate bootstrap. However, the input only appears the first time that it is opened, any subsequent times the dialog is opened, the input is missing. How would this be remedied?
Here is the HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/bootstrap3-dialog/css/bootstrap-dialog.min.css">
<link rel="stylesheet" href="../bower_components/bootstrap-datepicker/css/datepicker3.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>Hello!</h3>
<div>
<span>Enter a Zip Code: </span>
<input type="text" id="zip">
<button id="getEvents" class="btn btn-primary">Get events!</button>
</div>
<div class="datepicker"></div>
<div id="events"></div>
<button id="addItemButton">Add an item</button>
<div id="addItemDialog"><input type="text" id="newItem"></div>
<script src="../bower_components/jquery/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/bootstrap3-dialog/js/bootstrap-dialog.js"></script>
<script src="../bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="js/calendar.js"></script>
</body>
</html>
Here is the JS:
$(function () {
"use strict";
var url,
year,
month,
zip,
date,
events = [],
newItem;
$("#addItemDialog").hide();
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"}).click(function(){
$("#events").empty();
date = $(".datepicker").datepicker("getDate");
//console.dir(date.toISOString().substr(0, 10));
$(events).each(function(i, event){
//console.log(event);
if(event.date.substr(0, 10) === date.toISOString().substr(0, 10)){
console.log(event.title);
$("#events").append("<h4 class='event'>" + event.title + "</h4>");
}
});
});
$("#getEvents").on("click", function () {
zip = $("#zip").val();
if(isValidUSZip(zip)){
zip = zip.substr(0, 5);
getCalendar();
}else{
BootstrapDialog.show({
message: "You must enter a valid zip code!",
buttons: [{label:"OK", action: function(dialog){dialog.close();}}],
draggable: true
});
}
});
function isValidUSZip(sZip) {
return /^[0-9]{5}(?:-[0-9]{4})?$/.test(sZip);
}
function getCalendar() {
$.ajax({
type: "GET",
url: "http://www.hebcal.com/hebcal/?v=1&cfg=json&nh=on&nx=on&year=now&month=x&ss=on&mf=on&c=on&zip=" + zip +"&m=72&s=on",
success: function (data) {
console.dir(data);
$(data.items).each(function(index, item){
//console.dir(item.date.substr(0, 10));
events.push(item);
});
}
});
}
$("#addItemButton").on("click", function(){
BootstrapDialog.show({
message: $("#newItem"),
buttons: [{
label: "Enter",
action: function(dialog){
newItem = $("#newItem").val();
events.push({date: new Date(date).toISOString(), title: newItem});
dialog.close();
}
}]
});
});
});
I took a time and make this fiddle, aparently everything is working fine:
I doubt about this line for a moment, but still uncommented is going right:
$(function () {
//"use strict";
var url,
year,
month,
zip,
date,
events = [],
newItem;
http://jsfiddle.net/r2FyC/3/
I am very new to javascript - mainly only used it to go back a page or go to a link ..
I got it working on the example page, now I'm trying to get it to work on my website ... However nothing occurs when the link is pressed...
The files exist in their linked locations. The script is copied from the example.
HEADER:
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="css/jquery-impromptu.css" />
<script type="text/javascript">
function removeUser(id){
var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="'+ id +'" />';
$.prompt(txt,{
buttons:{Delete:true, Cancel:false},
close: function(e,v,m,f){
if(v){
var uid = f.userid;
window.location = "deletemember.php?id=" + id;
}
else{}
}
});
}
</script>
LINK :
<a href='javascript:;' onclick='removeUser(544666);'>Delete</a>
Check this demo: https://github.com/trentrichardson/jQuery-Impromptu/blob/master/demos/user_manager.html
What you should do is make a function. This function is called when a user does something, but it should contain an ID. For example:
Edit
So, as you can see you will call the function 'editUser(4)' where 4 is the ID.
Back to JS
function editUser(id){
}
In this function you add your part, and you end up with this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-impromptu.js"></script>
<script type="text/javascript">
function removeUser(id){
var user = $('#userid'+id)
var fname = user.find('.fname').text();
var lname = user.find('.lname').text();
var txt = 'Are you sure you want to remove this user with id: '+id+'?';
$.prompt(txt,{
buttons:{Change:true, Cancel:false},
submit: function(e,v,m,f){
var flag = true;
if (v) {
window.location = "deletemember.php?id=" + id;
}
return flag;
}
});
}
</script>
<a href='javascript:;' onclick='removeUser(544666);'>Delete</a>
Now the ID is useable for your window.location.
Use window.location.href or window.location.replace:
<script type="text/javascript">
function removeUser(id) {
var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="' + id + '" />';
$.prompt(txt, {
buttons: {
Delete: true,
Cancel: false
},
close: function (e, v, m, f) {
if (v) {
var uid = f.userid;
//window.location.href = "deletemember.php?id=" + uid;
window.location.replace("deletemember.php?id=" + uid);
} else {}
}
});
}
</script>
You can read about the difference here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
<form id="fooForm">
<script type="text/javascript">
function FooMethod() {
alert('hello');
}
var fooButton;
var fooForm;
var fooDialog;
$(document).ready(function() {
InitializeVariables();
InitiliazeDialog();
InitiliazeForm();
});
function InitializeVariables() {
fooButton = $('#fooButton');
fooForm = $('#fooForm');
fooDialog = $('#fooDialog');
}
function InitiliazeDialog() {
var dialogOpenMethod = function () {
fooDialog.dialog('open');
return false;
};
var submitMethod = function () {
fooButton.unbind('click', dialogOpenMethod);
fooButton.click();
};
fooDialog.dialog({
autoOpen: false,
modal: true,
buttons: {
'Ja': submitMethod,
'Nein': function () {
fooDialog.dialog('close');
}
}
});
fooButton.bind('click', dialogOpenMethod);
}
function InitiliazeForm() {
fooButton.button();
fooForm.submit(function () {
alert('doing a submit');
});
}
</script>
<input type="submit" id="fooButton" value="submit it!" onclick="FooMethod();"></input>
<div id="fooDialog">
Dialog info
</div>
</form>
</body>
</html>
what am i doing?
i want a modal-confirmation: user clicks on button, confirmation "do you really want to...?", user clicks "yes", this click unbinds the original click-handler and clicks the button again (which should cause a submit).
what/why is not working?
indeed you need a special case. this demo won't work, unless you set modal: false.
interesting to mention: the original handler (onclick="FooMethod();") is called in modal and non-modal dialog.
EDIT:
i adapted my sample due to graphicdivines answer, to the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
<form id="fooForm" method="POST" action="">
<script type="text/javascript">
var fooButton;
var fooForm;
var fooDialog;
$(document).ready(function() {
InitializeVariables();
InitiliazeDialog();
InitiliazeForm();
});
function InitializeVariables() {
fooButton = $('#fooButton');
fooForm = $('#fooForm');
fooDialog = $('#fooDialog');
}
function InitiliazeDialog() {
var dialogOpenMethod = function () {
fooDialog.dialog('open');
return false;
};
var submitMethod = function () {
fooButton.unbind('click', dialogOpenMethod);
fooButton.click();
};
fooDialog.dialog({
autoOpen: false,
modal: true,
buttons: {
'Ja': submitMethod,
'Nein': function () {
fooDialog.dialog('close');
}
}
});
var dialogZ = fooDialog.dialog('option', 'zIndex');
fooButton.bind('click', dialogOpenMethod);
}
function InitiliazeForm() {
fooForm.submit(function () {
alert('doing a submit');
});
}
</script>
<input type="submit" id="fooButton" value="submit it!" style="z-index: 9999;"></input>
<div id="fooDialog">
Dialog info
</div>
</form>
</body>
</html>
why?
as you can see here, there's a nasty z-index-checker which i tried to avoid. but it wont' work.
Seems to me that you need to close the dialog, before you re-click the submit. Since modal disables everything on the page, the dialogue must be closed or the submit is not clickable. So your submit method becomes:
var submitMethod = function () {
fooDialog.dialog('close'); // add this line ==============
fooButton.unbind('click', dialogOpenMethod);
fooButton.click();
};
Why are you not specifying HTML form method? The default form method is GET.
So you should have:
<form id="fooForm" method="post" action="">
Action can be something else, it depends on what URL your submission handling logic is.
Edit:
Also instead of clicking the submit button, just submit the form directly.
fooDialog.dialog({
autoOpen: false,
modal: true,
buttons: {
'Ja': function() { $('#fooForm').submit(); },
'Nein': function () {
fooDialog.dialog('close');
}
}
});