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();
});
});
Related
I have this "add to cart" link that sends getdata and adding +1 when it's submitted/isset.
The problem is that when I refresh the page, and when I go back and forth, it will add again because the data is still there in the url. How can I prevent this? Im open to different solutions.
I did find something about PRG method. This method uses a redirect. But if I redirect won't it still add if I go back and forth?
Take care
Make "add to cart" into a pseudo-link, which appears as a link, but when clicked it handles it differently. For example in jQuery:
$('.add-to-card').on('click', function (e) {
e.preventDefault();
$.post({
id: put the product id here,
}).then(function () {
increase the counter in the button
})
});
This way your link will not make it into the browser history and traversing it (using back and forward buttons in the browser) will not affect your cart's state.
I reviewed other post and some helped me but as I am not proficient in Jquery or AJAX, I want to make sure I am doing what I need correctly.
On my main page (base url), I have 2 different outputs based on the view that a user wants to see. I have a toggle button on the screen and a link on either side of the button. Currently when a link is clicked, my PHP is called, sets a session variable with the selected view and returns the specified view.
This changes my URL, i.e. www.mysite.com/view/A and clicking the other toggle link will change the URL to ww.mysite.com/view/B.
My issue is that I am using pagination and I need to specify the correct URL segment for proper page navigation but to normal user navigation, if they leave the main page and then come back, the correct view will be displayed (as the selected view is in the session variable) but the URL could be www.mysite.com, etc. I do not want to write a bunch of logic to determine if the page is the base URL or ww.mysite.com/view/A, etc.
The below function currently changes my toggle button (from left to right) based on which view was selected/clicked. I want to add logic to this function to call my PHP code which would set the session variable without changing the URL, then refresh the page to show the selected view. I know this is simple and I have a similar example which I found online but I want to make sure I am doing this right.
<script>
$('#toggle-control a').click(function(){
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-bars fa-arrow-left');
});
</script>
Ok, so I'm not sure I follow and I apologize about that though you could be a little more clear. From what I grasp you want to accomplish two tasks: (1) you want to figure how to post a session variable to your PHP using jQuery AJAX and (2) you want to make sure your toggle changes position based on the view.
K, so on (1), the following enables you to pass in your script a session variable.
var sessionVar = 1;
var data = {};
data.sessionVariable = sessionVar;
jQuery.ajax({
type: "POST",
url: YOUR PHP FILE HERE
data: data,
success: function(data) {
},
});
In your PHP:
if ($_POST) {
$sessionVar = $_POST['sessionVariable'];
I would recommend using jQuery's .css() to control how the toggle button appears and where using the logic you have in place.
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.
This is my first post so I hope I am not violating any rules. I have searched quite extensively, but possibly may have not looked for the correct terms that I am looking to resolve.
At any rate, my problem is this:
I have a table generated with a list of items, the left-most column has a button when clicked calls an ajax Post and or load function to query the history of the item and list it below the table. This works in its true sense of the expected result, however, reviewing the console through FireBug, subsequent clicks on buttons in the list result in the doubling of posts. ie. 1st click shows 1 console event, 2nd click shows 2 console events, 3rd click shows 4 console events, and so on. this continues until I select a different location and the count resets.
The below is what I see in the console. This presents a problem with timing as each subsequent post takes longer.
clicking the hist-tag button 5365
>GET http://localhost/digipens/query.php?rec_id=5365
clicking the hist-tag button 5365
>GET http://localhost/digipens/query.php?rec_id=5365
clicking the hist-tag button 5365
>GET http://localhost/digipens/query.php?rec_id=5365
clicking the hist-tag button 5365
>GET http://localhost/digipens/query.php?rec_id=5365
code:
$('.hist-tag').click(function(){
var ID=$(this).closest('tr').attr('id')
itemid = $("#itemid_input_"+ID).val();
dataString = '?rec_id='+ID;
$('#item_hist').load('query.php' + dataString);
});
Any ideas or different ways to accomplish the same goal would be excellent.
Thanks!
It sounds as if you are adding a click handler as a result of your click. Do you call $('.hist-tag').click() after the table updates? If so, you are adding new click handlers each time, which means the click is handled twice, and then 4 times, and then 8 times, etc.
I can only guess, because I don't see the relevant code here.
If so, the correct solution is to only add your click handler once, and do it via an .on() call. This way, the clicks are handled for current and future elements:
$('#mytable').on('click', '.hist-tag', function(){
var ID=$(this).closest('tr').attr('id');
itemid=$("#itemid_input_"+ID).val();
dataString = '?rec_id='+ID;
$('#item_hist').load('query.php' + dataString);
});
This attaches a handler to an element that you know will always exist #mytable, or whatever the ID of your table is, and then watches for clicks on children that propagate to the table and filters them on the selector you provide, i.e. .hist-tag.
Again, I am guessing, but that's what it seems like is happening from the evidence I have.
I suspect your click event is somehow being re-bound on each return.
Perhaps the same script is included in the response from your load call?
Try this:
$('.hist-tag').off('click');
$('.hist-tag').on('click', function(){
var ID=$(this).closest('tr').attr('id');
itemid=$("#itemid_input_"+ID).val();
dataString = '?rec_id='+ID;
$('#item_hist').load('query.php' + dataString);
return false; // prevents bubbling the click to the container
});
I've encountered another problem with jQuery $.load(). I have two buttons, their visibility is mutually exclusive. A PHP conditional statement determines which is shown. All of that is contained in a div element #subDiv. Once either button is pressed, a PHP post file (two slightly different files for the two different buttons) is ran, and it writes a value to a database. Then, upon post success, I use $.load() to refresh #subDiv, which would (in theory) run the conditional again, and determine that the button that was not there last will now be shown.
My problem is the following:
When I click on the button when it is in State A, it will post correctly, and refresh the div to show the button in State B.
When I click on the button when it is in State B, it will post correctly, and refresh the div (according to Chrome Dev Tools), but the button remains in State B. Upon actual browser refresh, the button will appear in the correct State.
The two States and their respective post files are almost identical except for the minor necessary differences (one adds to a database table, one deletes from a database table). Seeing as the button correctly changes from State A to State B, but not the reverse, I'm not sure where the problem lies. To complicate things, a browser refresh will reveal the button in the correct state. $.load() is being used by myself to simulate a browser refresh of only one div element, for usability purposes and to cut down on loads. Therefore, I can only assume it is an error of the $.load() method.
Here's the jQuery code that controls the button click handling of both State A and State B:
//State A
$('#subButton').live('click',function() {
$.post("php/retailerNameNotif.php", $("#retailerNameNotif").serialize(), function(){
$('#retailerNameSubDiv').load('coupon.php #retailerNameSubDiv', function(){$( "button, input:submit, input:button, a#jql, input:radio" ).button();});
});
});
//State B
$('#unsubButton').live('click',function() {
$.post("php/retailerNameNotifUnsub.php", $("#retailerNameNotifUnsub").serialize(), function(){
$('#retailerNameSubDiv').load('coupon.php #retailerNameSubDiv', function(){$( "button, input:submit, input:button, a#jql, input:radio" ).button();});
});
});
Any help?
Edit:
As a further complication, I've noticed that occasionally, it will work correctly, switching states exactly as I want. However, on the 6th (and consistently the 6th) time, it goes back to the behavior I described here, getting stuck on one of the States.
My guess would be that the browser is caching the results of the load() call.
You could try inserting a random string to the filename to be sure that the request is made every time.
For example (not tested) :
var rnd = Math.random()
$('#retailerNameSubDiv').load('coupon.php?rnd=' + rnd + ' #retailerNameSubDiv', function(){$( "button, input:submit, input:button, a#jql, input:radio" ).button();});