I have a table created with PHP/MySQL results, http://www.fsma.co.uk/help/table.jpg.
When the user clicks the resend confirmation button, I have a jQuery script that runs a PHP script to send the email to that customer.
What I need is for that button to then change to text and give the returned mesage from the PHPscript, or for a new row to be added underneath to show the returned message.
I had it working, but no matter which button you clicked it used the same row. However, due to playing around with so many ideas, I no longer have that code.
Something like that:
$(".buttonClass").click(function(event) {
event.preventDefault();
$.post(url, data, function(response) {
// hide the clicked button
$(this).hide();
// insert content from the called php function after the button
$(this).after(response);
});
});
Your php function has to echo the content you want to display instead of the button.
Related
I have a div that loads up with data and buttons depending on what some variables are in a SQL database. When we click those buttons, it changes those SQL variables because of paypal api calls or whatever (such as a "de-activate this account" button.
Right now, when I click the buttons, everything works but the page stays the same, so the "deactivate button" still says "deactivate button" instead of saying "account is deactivated" and other examples like that. When the page is refreshed they change because the SQL database has changed
Right now, I'm using the following code:
location.reload();
which effectively refreshes the page, but then you have to click a couple times to get back to the div you were working in. not a huge deal but annoying none the less.
What I'm wanting to know is if there is a way that when someone clicks the button that, for example, deactivates the account, it displays the message "Account successfully deactivated" then it freshes that DIV only, and loads up the new information based on the SQL database changes.
So far I tried this:
var url = 'index.php';
$('#div1-wrapper').load(url + ' #div1');
Which actually did what I wanted but after the reload, none of my "clicky" divs (such as a + in the top left corner) would work anymore and therefore the div wouldn't expand like its supposed to. It's like when it reloaded it didn't contain the right names on the divs but when I viewed source it was the original information so the reload either didn't happen or it doesn't update in the source.
I just need to know if there is a way to reload a div as if the page has been refreshed (so that the PHP code is re-run and the variables re-evaluated) but without refreshing the page.
Also I'd like to do it with JQuery since when you click my buttons, its running jquery $.post and in that post after it alert(data) it does the refresh.
My button calls look like this:
$("[id^=cancelbtn_]").click(function(){
var formid = this.id;
var myRegexp = /^cancelbtn_(\d+)$/;
var match = myRegexp.exec(formid);
var which_row = match[1];
var username = $("#cancelbtn_"+which_row).attr("attr1");
$.post('post.php', {'administrator':7,'username':username}, function(data) {
alert(data);
location.reload();
});
});
I am developing a wordpress plugin which has a form for voting purpose and has a progress bar for showing the votes result. After submitting the form it redirects to another page for processing. But I want to submit the form without page refresh. I could do it with jquery/ajax. But the problem is, after submitting the form without page reload ajax will submit the form data to a php page and it will keep those data to database ,but the voting poll result will not be updated (progress bar will not display latest information ,after submitting ajax data,though data is updated in database) if user does not reload the page.
Please give me an idea how could I do that.
After the poll data has processed, send a script back to the main page:
<script>
document.getElementById('myProgressBarId').setAttribute("width","50%");
</script>
If you have the code for calculating % (which I assume you do have) then you can do the following in your AJAX call.
Store data in db.
Retrieve the updated data
Fire up your 'calculation code'
Now you have the %.
Update the width attribute of image onSuccess of AJAX call.
The jQuery way:
$.ajax({
//other code
success : function(data) {
$('#progress-bar-image').attr('width', data);
}
//data is the calculated percentage.
});
See jQuery.ajax() doc
We are using jQuery accordion to process our records.
The first accordion called Builds contains two dropdownlistboxes and an input textbox.
The code below works well in populating the dropdownlistboxes.
getBuilds() populates the buildingID dropdownlistbox
The second dropdownlistbox gets populated based on selection from buildingID dropdownlist.
User manually enters data into the input textbox.
Then there is the second accordion called Previews.
As the name suggests, once user clicks on the Preview accordion, the value of the two dropdownlistboxes and the input textbox should display on this screen.
If data is correct, user clicks the submit button to the database.
If not, user can make changes before submitting.
How do I get the values from the code below to display on the Preview accordion?
I can handle the rest with your generous assistance on the preview bit.
Thanks a lot in advance.
Please see code below:
<script type="text/javascript">
$(document).ready(function() {
getdates();
$('#datesID').change(function() {
gettimers( $(this).val() );
});
});
I have a standard PHP form that has a series of checkboxes, radio, selects and text. The form works fine and proceeds to a search results page. My problem is that when you click Back browser in any browser the search page shows the previous selects. How do I ensure that the back button displays the form as if its the first time the visitor visits the page?
You can reset form on window.onload or $(document).ready(for jQuery)
function formReset()
{
document.getElementById("formId").reset();
}
you can do one thing.
Using jquery onReady function you can make form reset.
So, whenever user will press back button of browser page will be reload and onReady function your code for form reset will work.
$(document).ready(function() {
$('#myform').get(0).reset();
});
You shouldn't reset it automatically. Provide a reset button.
The back button returns the user to the previous page, in the state he left it. This includes the settings of any form. I'm relying heavily on this feature, cannot count the times this back button saved me from loosing my efforts that went into a textbox for answering questions...
It's a different game if the user is on your result page and clicks a link that takes him to the search page again, but does not use the back button.
I'm not sure why I'm not getting it. Either way this is frustrating me beyond belief. I've looked through 2 jquery books, web tutorials, and stack overflow posts and i still dont understand.
I am trying to build a search filter bar where a user can select filters and upon clicking "refine result" it modifies the query output.
How do I submit the value of whichever form radio box the user selects using jquery/ajax to a php page which will display results dependent upon the input, without page refresh.
Form-->
user selects radio button value and clicks submit-->
form data gets sent via jquery/ajax to the .php page whose output is to be displayed in without page refresh-->
.php file processes the user input and creates output based on it
I've honestly looked through alot of different answers but all of them assume that the reader has a greater basic knowledge of javascript/jquery than I do.
Like, do I have to put the jQuery/ajax in a function that runs "onclick" of my submit button? Or do I just add a .click event handler for my button id?
Can someone explain it all to me assuming I'm a complete jQuery/ajax noob?
You just have to attach your ajax call to the "submit" event that comes from the form when the submit button is clicked :
$('form').submit(function(e){
e.preventDefault();
$('.content').load(this.action+" .content", $(this).serialize(), function(){
// code to execute after result display if needed
});
return false;
});
I assumed your results are displayed in an element that has the "content" class.
$('form') selects your form, you can personalize it
.submit attach an event handler to the form "submit event
e.preventDefault() and return false prevents the form to be actually submitted
$('.content').load will fill the element with "content" class with the ajax call results
this.action is the URL to submit the form to
" +.content" is here to extract only the result part from the response, instead of the entire html page
$(this).serialize() passes the form fields data to the ajax request
finally the last anonymous function is called after the results are displayed and can be used to trigger some visual effect indicating that the results were updated