I am using a bootstrap theme and am trying to get my page's form to stay on/open the specific registration form's confirm message. Unfortunately with several Registration Forms on the page, each is "hidden" inside it's own hidden div/tab. I am not too good with JS and have spent about 4 hours so far trying to get this to function properly:
http://middlechambersociety.com/dev/mcs2014/
On any Registration Form completion I want the user to be brought back to and shown that Registration Form's Confirmation Message AND the "Pay with Card" button when it is part of the reg process (the button currently shows when it should). However, the problem is that when my form reloads the best i can do is bring users to the Registration Section and show the Golfer's Reg Form and/or Confirm message only (because it is the default open div/tab). I have tried php and limited JS/jQuery with no success. I have tried adding Class .active to the li i want to display but no luck. I currently have the following trying to fire on each form when submitted to TRY to get the appropriate registration tab to display:
<?php
if ($reg_type == 'Diners' && !empty($confirm_msg)) {
?>
<script type="text/javascript">
alert('Working1');
$(document).ready(function() {
alert('Working');
var tab = $('#reg_diner').parent();
alert(tab);
tab.addClass('active').siblings().removeClass('active');
});
</script>
<?php
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>
please help.
For anyone who may be confused as to what i am looking to accomplish: feel free to complete one of the forms (Dining for instance) and see that the confirm message is hidden until you PHYSICALLY navigate back to the Dining registration tab.
Maybe try an ajax call and on success add active class to new content?
My bad - misunderstood. Heres where I can see your error:
In console.log You've got an $ reference error at your script calling point. Cause you load jQuery in footer. So it cant use scripts before it load fully. (Document Ready doesn't work because he doesn't know this command yet) Put jQuery into head, or your tag after calling jQuery
I understand not wanted to navigate user to a different page but sometimes it is just much easier.
One way though would be to put a $_GET string in the form post then use that to control the display message. Add it to the form action url maybe:
enter code hereaction="index.php?form=golfer1"
Then update your code :
<?php
if ($_GET['form'] == 'golfer1') {
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>
Related
I'm trying to write a feature for my Fantasy Football league that allows players to trade with each other. Functionally it all works fine, but as I've coded it all in PHP I have an annoying problem where any time a button is pressed the page is effectively refreshed twice. I've read that I can get around this with jQuery and Ajax but sadly I don't really have any experience with either.
Here's a small section of the code that allows logged in users to withdraw a trade offer they have made:
echo "<input type='submit' id='btn-danger' name='withdraw".$trade_id."' value='Withdraw'>";
if($_POST && isset($_POST['withdraw'.$trade_id])) {
$withdraw = $link->prepare("DELETE FROM trade_id_offers_out WHERE trade_id_offer_id = ".$trade_id);
$withdraw->execute();
}
This creates a "Withdraw" button for each trade offer they have sent out and has a unique name of "withdraw" plus whatever number the offer is in the SQL table.
As I say functionally it works perfectly fine. But it refreshes the page twice and I'm wondering how I can take this code and turn it into something a little more practical?
Many thanks for your time.
First you should make sure you have included jQuery into your page html before any other jQuery (there are plenty of tutorials out there).
Second you need to give the submit button a class so you can select it using a jQuery selector. Change the php code of the button to this:
echo "<input type='submit' id='btn-danger' class='withdrawTradeBtn' name='withdraw".$trade_id."' value='Withdraw'>";
Finally you would make a ajax post request to your url (same url as your page in this case). The js would look something like this and would need to be placed before the end of the html body tag or after all your buttons are rendered:
(Note: I have not tested this but it should be pretty close to what you are after)
<script>
//we need to wait for the page to be loaded in the users browser
$(document).ready(function(){
//we are selecting all the buttons with the class withdrawTradeBtn
//we are binding to the click event so whenever any of the buttons are pressed the code will be ran.
$('.withdrawTradeBtn').on('click', function(e){
//we need to prevent the button from actually reloading the page
e.preventDefault();
//now we need to make a ajax post request to the url
$.post(
'/your/url', //the url to make the post
{$(this).attr('name'):'Withdraw'}, //the submitted data
function(data, status, jqXHR) {// success callback
//here is were you would delete the button or whatever
}
);
});
});
</script>
Most likely you would want to delete the trade entry from the html. You would do that in the success callback of the ajax post. I cant really add anything here because I don't know what your html structure looks like.
Hope this helps, let me know if you need any more help!
I'm trying to use JQuery to submit a form on the same page within a DIV. It works fine, however whenever I submit the form, it reloads the form script. For example
add-album.php contains the form and PHP logic
index.php contains include("add-album.php") within the DIV tag.
While on index.php, I will fill in the form details and click 'submit' which then redirects to add-album.php. How can I prevent this from happening?
JQUERY Code:
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#container").load(this.href);
});
});
PHP _SELF form:
<form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
Thanks in advance
Just prevent form from submitting:
$('form').bind('submit', function(e){
e.preventDefault();
return false;
});
The action of the form is the address of the current script because you set it to $_SERVER['PHP_SELF']. It's a little tricky, though - it's going to be the script that runs that code, which may or may not be the one loaded directly by the browser.
This means that when you submit, either manually or with jQuery, you are going to send the data and request to whatever corresponds to $_SERVER['PHP_SELF']. If you want to arrive somewhere else, you probably want to set the action of the form to be something besides this "current script" value. In this case, add-album.php is the file that is calling <?php echo $_SERVER['PHP_SELF'] ?>, so you get add-album.php in the action.
To see what I mean, look at the rendered code of the index.php page. You will see that the form tag renders with action="add-album.php" or something similar. That's why add-album.php loads when you submit. You may find that setting the action with a static value is what you want. You left out one important detail - where do you want to send the form data?
The basics:
I have a webpage where a user can 'add an article'; when they click to 'add an article' it opens an iframe (a pop-up modal box).
In the Iframe there is a form with 'save' and 'cancel' buttons - what I'm trying to do is make it so when the user hits 'save', it will close the modal box, and then refresh the page.
I have it set so the iframe closes and the data is saved to the database, but I can't get the page to refresh (which would then display the new article)
I've been unable to do this as of yet, despite googling for days. I'm not a javascript pro, but I've learned enough in the past couple days to do a thing or two.
Here is the code for the button:
<a class="toolbar" href="#" onclick="javascript: submitbutton('save'); return false;">
Here is the end of the javascript function that handles the saving of the data:
function submitbutton(pressbutton) {
...
<?php endif; ?>
submitform( pressbutton );
parent.$('sbox-window').close();
}
}
http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity
That link is the fix that I was looking for - this question was originally aimed at the K2 Component for Joomla.
Myself and another person were able to resolve the issue by writing some code of our own. In that thread as well as the one linked in the replies, a solution is arrived upon.
EDIT: A request was made to post the solution here, so here's a short summary
If you have users creating articles from the front end and you want the 'save' button to close the model box window that pops up when they add or edit an article - just follow the steps below to achieve this:
*Note: there are a few other fixes that work to close the box, but not refresh the page - this does both.
The key is passing an extra parameter through the URL that gets created when the user clicks "Save", then we just check to see if that parameter (which I will call 'step') exists - if it does, we refresh the page.
Lets follow along, first we must add this parameter to the URL created -
Open the item.php file located at:
Yoursite->administrator->components->com_k2->models->item.php
On or around line 646 - you will see some text that resembles:
case 'save':
default:
$msg = JText::_('Item Saved');
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&tmpl=component';
else
$link = 'index.php?option=com_k2&view=items';
break;
So what we need to do is add our parameter to that URL so it will look like this (remember I called the parameter 'step', and will be setting it =1) - the code will now look like this:
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&step=1&tmpl=component';
Now when the user clicks 'save' the parameter 'step' is getting passed along, and when the form reloads to show the user their information they had entered, step=1!
So then we have to add the php to check for that - that's simple enough:
Open the form.php file located at:
Yoursite->components->com_k2->views->item->tmpl->form.php
In there you can see where the form actually begins (on or around line 249), what we want to do is just add a little bit of php that checks to see if our 'step' parameter is equal to 1. If it is - we'll refresh the parent page using some javascript, that will automatically close the model box and cause the 'item saved' text to display to the user letting them know what happened.
The existing code looks like :
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<table class="toolbar" cellpadding="2" cellspacing="4">
When finished it will look like this:
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<?php if (JRequest::getInt('step')=='1') { ?>
<script language="javascript">
var XHRCheckin = new Ajax('index.php?option=com_k2&view=item&task=checkin&cid=<?php echo $this->row->id; ?>', {
method: 'get'
});
dummy = $time() + $random(0, 100);
XHRCheckin.request("t"+dummy);
parent.$('sbox-window').close();
window.parent.location.reload();
</script>
<?php } ?>
<table class="toolbar" cellpadding="2" cellspacing="4">
That checks to see if 'step' is =1. If it is - it runs javascript to refresh the parent window - closing the box and refreshing the page automatically. It also checks in the article on the backend.
This ensures the easiest possible thing for the user (i.e. they don't have to click 'back' and 'refresh' which is extremely counter-intuitive) and gives the front end user a back-end experience.
I hope this helps people - it took me a LOT of chasing things in the wrong direction before I thought of this solution.
I'm pretty saddened the developers never helped with something that's affected so many people, but oh well - problem was solved!
Try window.location.reload
You'll also want to get rid of the "return false;" from your onclick handler. That may prevent the page from refreshing. Also in general, put any "return" statements from within the event handler function.
I think you're looking for
parent.location.reload();
Incidentally, you don't actually need to close the iframe - once you reload the parent page, it'll be gone anyway.
Check out jQuery fancyBox.
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
It' has a "Reload page after closing", function.
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
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
Currently I am using YOURLS PHP URL shorterning script.
In their functions.php, seems like they support both redirection which is with PHP header location and javascript.
Functions.php
I want to redirect with javascript, which will show me the message before redirect. I found this coding inside functions.php
// Redirect to another page using Javascript. Set optional (bool)$dontwait to false to force manual redirection (make sure a message has been read by user)
function yourls_redirect_javascript( $location, $dontwait = true ) {
if( $dontwait ) {
echo <<<REDIR
<script type="text/javascript">
window.location="$location";
</script>
<small>(if you are not redirected after 10 seconds, please click here)</small>
REDIR;
} else {
echo <<<MANUAL
<p>Please click here</p>
MANUAL;
}
}
But I don't know how to do it. Is that coding currently commented or ? What should i change to redirect with javascript ?
Please help me out. Thanks.
The function is all ready to go. A javascript redirect will occur on the client side, so this script outputs the appropriate javascript. Call it like so:
<?php # http://www.myurl.com/was/here.php
yourls_redirect_javascript('http://www.myurl.com/go/here.php');
?>
When this page loads javascript will be used to redirect the user. If the javascript fails, there will be a link for them to click to follow the redirect.
I suspect that the "here document" syntax is throwing you off a bit. Read the PHP Docs to learn more about echo <<<
http://php.net/manual/en/function.echo.php