I am trying to refresh a sidebar.php in wordpress on a form submit (that is in a widget on the sidebar.php).
I have video on the page and if the entire page refreshes, the video has to play from the beginning.
I need a solution to simply refresh the sidebar.php when someone submits the form ... I am not an expert php programmer so simple is best!
btw. I am using formidable plugin for the form.
thanks in advance!
Sounds like a job for ajax!
Now, you could do it from scratch, but that would be unnecessarily painful. Instead, I recommend including jquery into your page by adding this into your header
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
(which uses the latest version, which is hosted on google)
Now that you have jquery loaded, there are many easy ways to submit your data without interrupting the flow of things. Here is how I would do it (I am assuming that you are using method="post"):
Change your <input type="submit" > into a <button>, so clicking on it doesn't trigger the built-in form submit (which would interrupt your video).
Set the id attribute of your button to something so that you can reference it easily like <button id="mysubmitbutton">. (While you are at it, give id attributes to all the form fields you care about if you have not already so that you can reference them easily as well, like <input type="text" name="firstName" id="firstName"> instead of just <input type="text" name="firstName">)
Inside the <head> portion of your website, add some code that looks like something like this:
<script type="text/javascript">
//makes it so that it goes after the html document is ready for it
$(document).ready(function() {
//this ties a onclick event to your button you made
$("#mysubmitbutton").click(function(){
//when the button is clicked, it will asychronously post to where you want it to
$.post("urlthatwasinyouractionequalsattribute.php",
{
//put all your post variables here, referencing the ids you made earlier
firstName: $("#firstName").val(),
time: $("#time").val() //be sure you don't have a trailing comma on the last one
},
function(data) {
//data is whatever the other website sends back. do whatever you want here...
alert("Result: " + data);
});
});
});
</script>
Fire it up and it should work. Obviously, you will need to change the values so that it matches your form, etc.
Hope that helps! Please mark as answer if it did.
Related
I have a 'Create Post' button in which a user can use to submit a post. I only want the user to be able to create one post at a time. So the user would have to remove the first post to create another, or they would have to wait for that post to be removed by someone else - which is perfectly acceptable.
Also, I want the button to be disabled when there is already a live post of theirs.
So, basically, what's the best way to attach the state of the button to the state of the post, so that as soon as the post is removed, the button is then enabled.
Thanks.
Fortunately, spacebars makes this really easy to do. Have a look at the "Smarter Attributes" section of this post.
Here is an example:
<template name="post">
<button disabled={{isDisabled}}>Create Post</button>
</template>
Template.post.isDisabled = function () {
return Posts.findOne();
};
In this case the button will be disabled if any posts were found, but you can easily modify that to your specific requirements.
Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.
I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first.
I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU/1/):
HTML:
<form id="signup" method="post" action="">
<p id="errors" role="alert" aria-live="assertive"></p>
<p>
<label for="first">First Name (required)</label>
<input type="text" id="first">
</p>
<p>
<input type="submit" id="button" value="Submit">
</p>
</form>
JS:
$('#signup').submit(function () {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('Please enter your first name.');
}
return false;
});
Here validation does not reload page, and the "alert" area is dynamically modified.
In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?
I think there's a simple solution, but you'll have to say if it covers your cases.
I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.
For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.
If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:
$('#errors').append('Please enter your first name.');
// Make the error message focusable, but not in the default tab-order:
$('#errors').attr('tabindex', '-1').css('outline', '0');
// Set the focus on the (first) error message:
$('#errors').focus();
JSFiddle updated here.
A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:
Displaying error messages
Accessible form validation.
I am new to meteor.. I am looking for a way to perform 2 way databinding between a model/collection to template. It is my understanding that when the contents of a collection change, the template reacts to this change and updates itself. However, how to automatically the collection when a user types, for example, in a textbox?
You could use the template events binding
e.g if you have
html
<template name="home">
<input type="text" name="text" value="{{text}}"/>
</template>
client js
Template.home.text = function() {
return MyCollection.findOne({_id:"1"}).text;
}
Template.home.events({
'change input[name=text]':function(event,context) {
MyCollection.update(_id, {$set:{text:event.target.value}});
}
});
So that will make it update as soon as the textbox loses focus/enter is pressed/etc
If you want to use the submit button & for something a bit cooler have a look at the controllers branch of meteor on github for the
easy forms system currently in the works to easen this up a bit.
StumbleUpon publishes a Widget script, and documents how to use it to insert a stumbleUpon button (they call it a badge), into a website.
You can generate the markup for a button with their online tool. It looks like this:
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2" location="http://example.com"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
(function() {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
That script element is just a way to delay-load the widgets.js thing. Just from looking at it, I suppose that it works by scanning the document for the <su:badge> elements and replacing them with iframes. The iframes themselves then get their source content from stumbleupon, at a URL like this: http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com .
The iframe renders visually like this:
The stumbleupon button is the 2nd one. I show the other ones for comparison.
As you can see, the StumbleUpon rendering looks different than all the other guys. SU makes their button look like a "badge" while every other social share widget looks like...uh.... a button.
I'm trying to make the Stumbleupon widget look like a button. I'm pretty sure this is possible. For example, mashable does it (example). Here's what it looks like:
As you can see, the stumbleupon button looks like a button. It's not a badge. Mashable is not using the su:badge thing - they have rendered their own <a> tag, and styled it.
The visual rendering is not a problem; I can figure out how to make a span look like a button, no problem. The problem happens when I click the tag or span. It appears to me that, with the iframe-thing that StumbleUpon uses, it invokes this URL to submit a page for sharing:
http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever HTTP/1.1
The iframe uses javascript's window.open to request that, and restricts the resizing and so on. This is how it works on mashable. The resulting window looks like this:
This is also what the mashable page does, though it does not use the iframe. The Mashable page contains javascript that just opens the "stumbleupon submit" window directly from within the main mashable page.
But when I try the same thing from my page, the little fixed window gets a 302 redirect from StumbleUpon, and then another 302, which eventually points it to
http://www.stumbleupon.com/submit/visitor
...which does not allow sharing of the link.
This has been a long story, but:
does anyone have any insight as to how I can convince StumbleUpon to let me share a link or URL, from a button that is not contained within an iframe?
What is mashable's secret?
ok here's what I found.
The 302's that eventually pointed me to /submit/visitor happen when both of the following are true:
the user is not logged in
the article has not been stumbled in stumbleupon previously
When that happens, stumbleupon invites you (the user) to login. It won't take you just to the "submit url" page.
If the user is not logged in, but the article HAS been submitted previously, then it takes you to the submit window without a 302. Eventually you will be asked to login, if you proceed with the submission. But the first view of the stumbleupn website in this case gives you a visual indication that you are submitting something.
If the user is logged in, and the article has not been submitted previously, then you get taken right to the submit page.
So I was doing nothing wrong. I just needed to login the first time. This is just an artifact of the user experience offered by StumbleUpon. In my opinion it's sort of strange. It's surprising and therefore wrong. But that's just my opinion.
I'm using a facebox to display a form inside a lightbox, nothing too exciting (just a couple of datepickers, some textboxes and a checkbox).
However, I'm having issues with the postbacks, whenever I post back from the facebox it adds a ',' to the start of the input (so "rabbit" becomes ",rabbit")
Now, I saw that there was the same issue with the modalpopup extender from the ajaxcontroltoolkit, so I assume it's a common issue.
Can anyone either explain why this is happening, or tell me how to fix it? provide a decent way of fixing this? I have actually done it, and it works very nicely, but I don't really want to answer my own bounty question so someone else give it a go!
Cheers, Ed
EDIT
See attached answer for a correct solution (I fixed this eventually but didn't want to ruin the bounty question so left the answer until afterwards).
Why don't you trim the output? simply remove the ',' for each string
I have never programmed in ASP.NET or used facebox for that matter of fact, but here's a couple of solutions from my little research that might work.
There is a reveal function in the facebox source where the actual cloning is done:
reveal: function(data, klass) {
$(document).trigger('beforeReveal.facebox')
if (klass) $('#facebox .content').addClass(klass)
$('#facebox .content').append(data) // <--- This does the cloning
The extra comma is obviously from the original form field that has been repeated. You could bind a click() function to the submit button that submits the form and in that function remove one of the clones. Since this function should run before the form data is processed, the duplicates should be taken care of.
$("#my-submit-button").click(function() { $('#facebox .content').empty(); }
If that doesn't work, then this surely will. Facebox has a bunch of hooks to run your code after various events. One of the hooks is reveal.facebox or afterReveal.facebox. Since the cloning is done on reveal, you would have to bind a custom function to run at this event, and in that function change the id/names of all elements. Append a random word like _temp or something for each element. Not the exact code, but I hope you get the idea.
(document).bind('reveal.facebox', function() {
$("#facebox .content > *").each(
// change the id's/name's
);
});
Edit:
Looking at the html for Facebox examples, it looks like it lives inside its own <div> and copies anything that has to be shown within that div. So the structure of a sample facebox page could look like:
<html>
..
<form runat="server">
<div id="myForm">
// original form controls go here, probably hidden
<input id="theId" type="text" value="" />
</div>
<div id="facebox">
...
<div class="content">
// the original form is copied inside this space and then displayed
// this is the one the user interacts with and makes changes to
<input id="theId" type="text" value="new value" />
</div>
...
</div>
</form>
..
</html>
So based on this structure and example, the input box with id=theId appears inside div#myForm and div#facebox. div#facebox is the one with the updated values that we need.
Ok, Here's how I fixed it:
changing
function fillFaceboxFromHref(href, klass) {
....
if (href.match(/#/)) {
var url = window.location.href.split('#')[0]
var target = href.replace(url, '')
$.facebox.reveal($(target).clone().show(), klass)
....
}
to
function fillFaceboxFromHref(href, klass) {
....
if (href.match(/#/)) {
var url = window.location.href.split('#')[0]
var target = href.replace(url, '')
$.facebox.reveal($(target).show(), klass)
....
}
will stop it cloning the input and instead use the actual div.
Then, it's simply a case of re-appending the inner content to the #aspnetform (or #body as it originally used [you have to change that to allow asp.net postbacks]) before it's cleared in the close.facebox binding, like so:
$(document).bind('close.facebox', function() {
/// two added lines to add the content back to the #aspnetForm, with display:none; (i.e. invisible)
$('#facebox .content').children().css({'display' : 'none'});
$('#aspnetForm').append($('#facebox .content').html());
/// extra line to make sure there's no flashing effect as the facebox closes: the content is still in there too!
$('#facebox .content').children().css({ 'display': 'block' });
....
This will now use the original div as the content, avoiding the comma problem. However, if you wanted to use a div that is visible on the page originally then some extra twiddling would be needed in the close.facebox binding.