We Keep Coding

How to use javascript to go to previous page after running other code?

I have a reporting website that I maintain. I have it setup so that users can select a row and be taken to a form to edit parts of it. After making the edits the user will click the "Submit" button and then a query is run against the SQL DB to update the record in the DB. I want the page to then go back to the referring page. I know that there's a way to do that with javascript something like parent.history.go(-1);, but I don't know how to implement it.
Basically, after the $sth->execute(); I want something that will send the parent.history.go(-1);.
I was trying to use header('Location:') but that would only work if they had not done a search on the previous page (or any filtering or ordering). If I could have it just go back to the previous page, or maybe even reload the previous page so that their edits show up too that would be great.

You can use header('Location: '.$url) along with state saving in jQuery DataTables (since your question is tagged datatables-1.10) with stateSave option.
For example:
$('#example').dataTable( {
stateSave: true
});
It will save/restore table sorting, filtering and page so that when the same page is visited again the table will have previous state restored.

You can use the back method.
function goBack() {
window.history.back();
}

Calling a Javascript function on focus of a page based on user interaction

I have a requirement where clicking on an icon should open a new window where the user will be able to view and edit certain fields. After the user closes this window and comes back to parent window, the icon color and text should be changed( for eg:- if the user has removed certain data, the icon will change to red color and text is set to null. If the user presses cancel button, nothing changes)
I am planning to implement this using a body onload function which essentially checks with the database using AJAX requests to see if the user has changed the data, then accordingly change the icon and text.
But, I see 2 problems in this approach
1. There will be a AJAX call even if the user has not changed anything.(ie. pressed Cancel button)
2. AJAX is called every time the body is on focus. Eg:- He may be working on some other page (or a different browser altogether) and comes back to this, resulting in an AJAX call.
Can anybody suggest a better approach.
I am using Javacript, JSP, Java

Two ways to implement this
Method 1
You know the methods which changes the database in the opened form. Suppose you have a delete method, write an additional window.opener.location.reload() after the method. The downside is that opener(parent window) gets reloaded every time you change something in the child window. Which is unnecessary.
Method 2 - Using cookies
I am using MDN's A little framework: a complete cookies reader/writer with full unicode support for creating cookies. The plan of action will be this. Create a cookie and set a value for it like this after you change anything in the child window and update it in the database like this docCookies.setItem("isChildFormUpdated", "yes");. You can use the same cookie for every action you do. Now when you navigate back to the parent form, do this.
$(document).ready() {
$(window).focus(function () {
var formCookie = docCookies.getItem("isChildFormUpdated");
if (formCookie !== null && formCookie == "yes") {
//resetting the cookie. you can also remove the cookie
docCookies.setItem("isChildFormUpdated", "no");
//docCookies.removeItem("isChildFormUpdated");
// your ajax call comes here
//or you could simply reload the form so that we get fresh data
//window.location.reload(); // it will be heavier
}
});
});
I hope you get the basic idea.

I think the easiest way to do this would be to set a cookie (learn how here). You can then have the two windows communicate between each other. This wouldn't be AJAX, but it will most likely work.

Another nice way to create a popup-like box is by using a modal box. These can be complicated but they look very nice. You have to make a jQuery plugin in, but you can take the one here and learn how it works. Good luck with your requirement.

Save position of draggable div jQuery

I have a website, and I am making widgets for it. Those widgets are draggable. I was wondering how I would save the positions of the widget (And if it is hidden or not [disabled or enabled]), and load the positions and if it is hidden or not when you join the website again (With the same user). Thank you for your time, please post comments if you don't understand what I need.

I am assuming that your widgets are in a <ul>, one <li> per widget which is quite normal.
Be able to position them
You need to arrange the widgets in a specific order in the first place. Imagine you already did the hard work and have the data that a user would have. Hard-code that and get your modules to appear correctly. Change the data, see if the modules appear as you expect.The user needs to drag them. jQuery draggable is your friend.
Prove you can get your data
Be able to get the order of widgets from the page after they've moved. draggable example shows a .serialize() function. Also you need to know which is on and which is off. You can create another list using jQuery .map() which can return their ID and state if you ask it nicely. Alert to the screen, write to the document, or preferably use console.log().
Interact with the server
You can skip this if you want to test using just cookies because the browser can set those.
But if you want to store this with the user's info in case they log out, start a new session or use another computer you'll need to use a database.
You need to know about sending data from browser to the server using ajax. jQuery is your friend.
You need to learn about storing user info in the database.
Restore the positions
You want to be able to set the positions of the widgets from a list that isn't hard-coded, so be able to order the widgets correctly on page load using the data that you saved. You did this in the first step but with hard-coded data.

What you will have to do is:
Save the status at a given time. For example when you change it.
$('#toBeDragableId').draggable({
// options...
drag: funciton(event,ui){
theUserposition = ui.position;
}
});
You need to save theUserposition in a consistent way, like a database or using cookies or client side storage. Afterwards, you need to recove it and set it when you load the page.
Similar Question
Example using Cookies

AJAX database update with CSS button color change using Codeigniter

I've seen good posts here of bits and pieces of what I am attempting to do, but nothing with all areas addressed. Does anybody have any code examples or advice to help me do what I am trying to do?
First, I will build my MVC view with an array of data such as (org name, id, status) where status is a boolean value, either selected or unselected. However, rather than showing a mere checkbox, I'd like to display a particular showing either a green (selected) or red (not selected) button based on the state of the database value. CSS is not an issue.
Then, if and when a user clicks the button, I would like to change the div value from red to green (or vice versa), but also update the boolean value in the database field via an AJAX call. It would be preferable to leverage JQuery where possible.
Finally, I need to know how to do this all using CodeIgniter. I am well versed in CI but a Javascript/JQuery newbie - deer in the headlights at this point. Can anyone point me in the right direction or suggest a web site with some sample code close to what I am trying to do or a good resource other than the obvious? Thank you kindly.

OK, so CodeIgniter is a PHP framework - which means it works server-side. (I know, there's an ajax library in there, but I don't use that.) We have to understand the difference between server-side and client-side. Your javascript is client-side. I usually develop everything without javascript to begin with in codeigniter, then go back and add the javascript bits. This helps me to ensure that the system works for those that don't have javascript turned on, or can't execute javascript for whatever reason. (BTW, this is called progressive enhancement).
So, first, let's take care of the non-javascript version:
You just need to give your red/green button a url when clicked that points to the controller method that will update the database record and redirect you back to the page that you were previously on (which has the red/green buttons).
/controller/method.html is our controller method that will save to the database and redirect back to this page. -->
Check
Now, let's take care of the js version:
in your view, you just need to hijack the click, send the ajax request, and change the red/green button based on the result from the controller method. So, what we do is keep the link from redirecting the page to the href attribute (e.prevendDefault()). Then, we get the value of the href and make an ajax call to that controller method. The method will determine if this is an ajax request and save to the database, then echo back a "success" message. On success, we can update the visual component on the client side.
$('.my-button').live('click', function(e) {
e.preventDefault();
$.ajax({
// $(this).attr('href') gets the value of the links href attribute
// which is "/controller/method.html" in this case
url: $(this).attr('href'),
success: function(data) {
// update your button with whatever html to write the new button
$('.my-button').replaceWith('Check');
}
});
});
Your controller method just checks if it is an ajax request or not. If so, just returns success, if not redirects the page.
function my_controller_method()
{
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
// update your database
echo "success";
}else{
// redirect back to page
redirect($_SERVER[‘HTTP_REFERER’]);
}
}

What you want is sort of a thumbs up / like thingy...there's a demo included in the link http://www.geertdedeckere.be/lab/themeforest/thumbsup/demo/

Hide/Disable Edit button based on column's Values in Sharepoint 2010

I have a column that has 2 Categories, Done and Pending. I would like to Hide/Disable edit button once the user selects an item and if that item has a Status column of "Pending".
I would like to know how can this be done, whether in visual studio 2010 or ECMA Scripts.

I know this question is old but if someone still needs the answer:
Create a custom action in visual studio like this:
https://msdn.microsoft.com/en-us/library/office/ff408060(v=office.14).aspx
This hides the button you want, now you can set a condition via enabledscript parameter to choose in which case the button should be hidden:
Just add this code after </CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="HideEditRibbon"
CommandAction="javascript:return true;" EnabledScript="javascript:checkIfNeedsToBeHidden();" />
</CommandUIHandlers>
<CustomAction Id="yourJsReference" Location="ScriptLink" ScriptSrc="yourJsFile.js"></CustomAction>
If you need this in List-Ribbon, Edit and DisplayForm, you need to make 3 Custom Actions and change the Location-Part and maybe your js-code.

If you want to use an out of the box edit form then you're not going to do this with server side code; you'd need an entirely custom edit form to do that.
This means using Javascript on the edit page, which is fragile, and doesn't prevent users from saving the data if they know what they're doing.
The input field for every column will have a 'title' attribute with the column name. JQuery can find the element with title='column name' rather easily, so that's how you'll know if you need to hide the save button. The save button isn't quite as easy to get to. You could try getting the input with type=button and value=save.
If it's important to have actual security around this, so that no matter what someone can't edit an item in this state then you can use an event receiver on the ItemUpdating event. Just check the properties of the item and use the properties.Cancel = true; (or something like that) so that even if they disable your JavaScript and save the event anyway, it won't get saved. If you need help adding an event receiver or getting it working just ask.
Edit: In your comment that you say you just want to prevent access to the edit form entirely under certain conditions. For that, I'd make a new webpart/user control and add it to the edit page. In that section you can fetch the appropriate item (the ID of the item will be a query parameter) and see if the page should be 'viewable'. If not, then you can redirect to another page.
Another addition to the above would be attempting to edit the list view such that there is no edit link for certain items. This would be substantially harder, and I doubt it would even be possible (practically) with out of the box webparts. You would need to have an entirely custom list view page in order to control which items have links to an edit page. (Others feel free to correct me here.)