I have a form with a table that displays data from a mysql table,it has one field that requires user input. each row also contains a div. The form then has two functions.
the first function is to display information from an external PHP page which processes the values on the input fields in each row and sends the result to the row div in the form of an result
The first function works perfectly and here is the script:
<script type="text/javascript">
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('getpeopleinjobs.php',{ //data posted to external page
postvarposition: form["position"+row].value, //variable equal to input box, sent to external page
postvarjob: form["job"+row].value, //variable equal to input box, sent to external page
postvarperson: form["person"+row].value, //variable equal to drop down list, sent to external page
postrow: row}, //variable equal row being processed, sent to external page
function(output){
$('#training'+row).html(output).show(); //display external results in row div
});
}
</script>
The second function I require help with. I need to almost repeat the same javascript function again. however instead of sending the row variables to an external page, I want to send them to a popup page. This function should be triggered when I click the in the div.
I have the below javascript for the popup.
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open( url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
What I want to do is send the variables to the popup page, the same variables that were sent to the external page.
so what I am aiming for is something like this:
<script type="text/javascript">
// Popup window code
function newPopup(url) {
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('trainingneeded.php',{ //my popup page
postvarposition: form["position"+row].value, //these variables must be posted to the popup page
postvarjob: form["job"+row].value, //these variables must be posted to the popup page
postvarperson: form["person"+row].value, //these variables must be posted to the popup page
postrow: row}, //these variables must be posted to the popup page
);
}
popupWindow = window.open( //open popup with the above variables posted to it
url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
How can I get the above to work? is using an href the best idea or can the div have an onclick event.
Thanks for the assistance in advance.
No, it's not possible to post to a popup window. You can include those variables in the url and to it as a get.
Or you can add target="_blank' to the form, and let it open a new window that way.
It won't be a popup window, but these days browsers mostly block those, or open them in tabs anyway, so it may not matter.
One other option is to open the popup with blank, and then use javascript to simply write() the page contents to it.
See also: asp.net/jQuery: post data with jQuery to a popup [IE]
Related
I am making a web application with Django, JavaScript, JQuery, and ajax. I've been with this problem for two days, and I can't make progress at all, the problem is the following:
I have two modals, in which a form is loaded. If I hit the create button to open the create modal, everything works fine, I can fill in the form, it is submitted and the data is saved to the database. If I give the edit button, the modal is loaded with the form with the data of the object that is being edited, and everything works perfectly. The problem is when I first open the creation modal, close it, and open the edit modal, a very strange thing happens, and that is that the value of an input that I need always returns it to me empty, despite not being empty. Here is the code (what matters, a summary):
<script>
$(document).ready(function () {
$('#edicion').on('shown.bs.modal', function (e) {
let $tipoActivo = $('#id_tipo_activo');
console.log($tipoActivo.val());
});
$('#creacion').on('shown.bs.modal', function (e) {
let $tipoActivo = $('#id_tipo_activo');
console.log($tipoActivo.val());
});
});
</script>
If I open the create modal first, close it, and then open the edit modal, let $TipoActivo = $('# id_tipo_activo'); it always empty (''), when in reality I see that its value is not empty.
I'm a long time self taught user, just never had an issue that wasn't already answered in some form or another. Awesome community thank you all!
So I am dumbfounded as to why javascript will not properly refresh my page.
I have a very large page that I use with jquery and vertical tabs tagged with url hashes. This is a new function I recently added after updating to the newest version.
Upon clicking submit the form refreshes and if $_POST[update] is set it will run a set of queries. Then I have a javascript timeout that refreshes the page (ideally to the correct tab ex: home/database.php?file=101#tab3)
an excerpt of my messy code:
if(isset($_POST['update']))
{ do a bunch of sql stuff
....
<pre>
<?PHP
//unset update variable
$_POST = array();
//print_r(get_defined_vars());
?>
</pre>
</br>
<script type="text/javascript">
function Redirect() {
$('#redirect').trigger('click');
}
var currenturl = window.location.href;
document.write("<form action=" + currenturl +"><input type=submit name=redirect value=Redirect></form>");
document.write("</br>You will be redirected back to the file in 2 seconds.");
setTimeout('Redirect()', 2000);
</script>
<?php
mysql_close($conn);
}
else
{ display usual data....check boxes etc
Now I've tried refreshing in every conceivable way. I clear out the $_POST array so the page should reload displaying information, but it doesn't. However my confirmation of queries being ran show that 0 rows updated, so its not triggering the sql but also isn't properly refreshing still.
I found a function that stored the last clicked tab in the browsers session, however when you switch files, it would skip to that tab. Instead I would want to show the default tab.
I even tried made a button that on click it goes to the proper url which is shown above. It works when I click it manually but does not work when I trigger it via javascript. Even goes to the appropriate tab.
I am updating the url in the address bar using the below function. Also using the latest version of chrome.
<script>
$( "#tabs" ).tabs({
activate: function(event, ui) {
window.location.replace('#' + $(ui.newPanel).attr('id'));
var curTab = $(ui.newPanel).attr('id');
console.log(curTab);
}
});
</script>
Why don't you instead of sending that number after <form_url>?<params>#3 send that number as a request param in the url, for example like this <form_url>?tab=3?
I am working on jsp's, I have two jsp one in configDb.jsp, in that I have written code to retrieve the values from database and display it. In this whereas I have option like newconnection.. its a popup window. When I click on that it opens popupwindow and taken the values and store them in a database, but in my parent page I am not able to display those values. After I click on the ok button in popup window, I have to refresh the parent page, then I am able to see the values which I have created few seconds back by the new connection page. Could anyone please help me out?
You can include this in your HTML for the popup window.
<script type="text/javascript">
function proceed(){
opener.location.reload(true);
self.close();
}
</script>
<form onsubmit="proceed()">
...
</form>
Actually you can obtain the answer by googling "javascript refresh parent page from popup" and you will see stackoverflow's answer :)
A better alternative without the need of refreshing the parent page can be achieved by adding a submit button listener and perform a DOM action to insert the new element with new content. This can be easily done by Javascript.
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
I want to send table values to printer.That table contails more than 50 records.so there is scrollbar or pagination on that table.Below the printer there print button, if click the button those all values should go to printer.
function print(){
window.print();
window.opener.document.location = window.opener.document.location.href;
window.close();
}
I used to code for print value.but it shows only the page, not in all table values .I ma using jsp,javascript.
I am looking for directdownload without css and open popup window, i need to do this work.
Any idea????
I'm assuming that you want to print the entire table of values. In that case, I would have a separate method (action) or different parameters/values to return the entire table unpaginated -- perhaps on it's own without the rest of the surrounding page if all you want printed is the table. Use this method (action/parameters) as the url for a new window that you pop up. The action should also return some javascript on the page that, once the load event occurs, prints the page.
function print()
{
window.open( '/foo?page=all&print=true', '_blank', '', false );
}
Then on the new page:
$(function()) {
window.print();
});
If you always want to print the whole table but nothing arround I would recommend to use a CSS print stylesheet. In this CSS file you can hide all elements except of the table. The user can than also use the print function of his browser (or CTRL + P). If you just want to print only the table when a user clicks the button, just add that CSS file on the click, fire the window.print() function and afterwards remove the CSS.