I am pretty new to ajax,jquery and javascript. So need help. I have a form. When submit button is clicked the div below the form displays the result from the php file. What i want is that it should display the php file into that div as soon as the main page loads and the div refreshes when submit button is pressed.
<script>
$(document).ready(function() {
$('#form1').ajaxForm(function() {
$('#blogup').val(''); // alert("Thank you for posting!");
$("#display").load("showartposts.php")
});
});
</script>
Here, display is the div to be displayed on page load and when the form is submitted it should refresh this div to display new posts from showartposts.php. It is just like a facebook wall post thing. j
you need to try this :
<script>
$(document).ready(function() {
$("#display").load("showartposts.php"); // call as soon as page load
$('#form1').ajaxForm(function() {
$('#blogup').val(''); // alert("Thank you for posting!");
$("#display").load("showartposts.php")
});
});
</script>
You will need to submit the form using AJAX and then take the AJAX response (assuming its HTML) and replace the contents of the #display DIV.
Should be pretty trivial using jQuery.
Related
I'm struggling with refreshing a page with an anchor.
I have a page test.php#one and send a POST form on that page. If I confirm the alert box (I use a custom alert box),
this.ok = function()
{
document.getElementById(\'dialogbox\').style.display = "none";
document.getElementById(\'dialogoverlay\').style.display = "none";
window.location.replace(document.URL);
}
the box dissapears, but the page won't refresh.
I tried every result google gave me, but the page simply won't refresh, if there is an anchor in the URL.
I would be happy for any solution that will reload the page to the same anchor and won't send the POST form twice.
Thanks for any help!
I think this is what you want.
window.location.reload(true);
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]
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 have a "calculator" if you will. It's a shopping cart, but upon change it calculates the tax and reloads the content through ajax, registering a bit of info through php. THe problem I'm running into is that once the content is reloaded through ajax, the input textbox blurs. I want to focus onto #amt again, once the #shop reloads content. Any workarounds?
$(document).delegate("#amt", "change", function() {
$("#shop").load("page.php?amt="+(this).value);
});
Try to set the focus inside load method success handler once the content is available. Try this.
$(document).delegate("#amt", "change", function() {
$("#shop").load("page.php?amt="+(this).value, function(){
$("#amt").focus();
});
})
For whatever reason I could not get it to work with the above answers. The solution I found was to call script code from inside the loaded content (page.php)
<script>
$("#amt").focus();
</script>
having some real problems with jquery at the moment. Basically what I have so far is. The form is submitted once the form is submitted a grey box pop's up with the relevant infomation.
What I need to do though is refresh the whole page then allow the grey box to appear.
I have the following code
$("#ex1Act").submit(function() {
//$('#example1').load('index.php', function()
$("#example1").gbxShow();
return true;
});
the line which is commented out load's the page again after the form is submitted the other code makes the grey box pop-up.
Is their a way to say once the:
$('#example1').load('index.php', function()
has been exucted do this:
$("#example1").gbxShow();
hope this makes sense.
This is not possible.
Once the form is submitted, the Javascript running on the page that submitted the form is completely gone; it cannot affect the page that the form returns.
Instead, you should put server-side code in the form that writes $("#example1").gbxShow(); in a separate <script> block if the form has been submitted.
Why not just submit the form normally (i.e., not using JavaScript) and add a variable to the resulting page signalling the need to display the grey box? Like so:
<?php if(isset($_POST['submit'])): ?>
<script type="text/javascript">
var showGreyBox = true;
</script>
<?php endif; ?>
...
<script type="text/javascript">
$(function(){
if(showGreyBox !== undefined){
// execute code to show the grey box
}
});
</script>
Something like that, maybe?
The problem you have is that the web page is "stateless". This means that you can't do a bit of JavaScript, refresh the page and continue on with your JavaScript. When you refresh the page, you lose your current state and the page starts from scratch.
You will need to re-engineer your design to bear in mind the page lifecycle (i.e. all JavaScript stops permanently on navigation).
One solution may be to use the jQuery AJAX forms plugin, which will submit the form to the server and give you back the result of the submission, which would avoid breaking the page lifecycle. You could then display the box as you wish.
The standard way to do this is to have the server return the gray box contents in the response to the form post.
You could probably do this in jquery by putting the page and the grey box into separate iFrames so that it would be safe from the page refresh