I have a query and don't know where to start - I have a image select input field on a form thats populated by an jquery ajax autocomplete. What I would like to do is the following:-
If a user wants to choose an alternative image that's not currently in the dB pop up a modal/lightbox form which contains the upload/editing form.
Once posted I want to pass this data back to the original form field and refresh the data for the autocomplete.
I already have the upload and editing forms working as standalone pages I just want to incorporate the output back into the original form.
Is it possible?
Can anyone suggest modal/lighbox script that can do this?
What data are you trying to retrieve in the parent window? Assuming your using an iframe in your lightbox? If you aren't then you should just be able to set variables and call functions from your upload script output as if it were the same page.
If you are...
I don't believe there are any lightbox/modal solutions that support this, I normally incorporate a script like below in my upload script so you can monitor the success/failure of the uploaded file and the data.
(function () {
parent.myClass.imageLocation = $output_your_image_location here;
return;
)();
You can obviously edit this to handle different situations but I always use the parent keyword as I have a similar way of handling uploads in some software I've built recently.
Related
I am modifying an existing plugin, and it has a form. The perfect place for me to add my code is at the end of the form but before the submit button. I want to add a form that will allow users to enter their credit card info, but nesting my form within the plugin's form is causing problems.
I was wondering if it would be possible for my form nesting to somehow work with AJAX. So basically, I just need 4 input areas (CC#, Exp date, CCV, amount) to be submitted that to Braintree's servers. I need to maintain PCI compliance with anything I do, so is this possible? Is it recommended? If not, what is?
EDIT - I found a question on here that made me wonder if it would be possible to separate the 2 forms but use CSS to make it look like my screenshot. Below is a quote from one of the question's answers.
Why not place the input inside the form, but use CSS to position it elsewhere on the page?
Update - I'm still confused...
It is against the standards to do nested forms like you are thinking. (See this question for more about that: Can you nest html forms?)
That doesn't mean that you can't have the form send data to multiple locations on submit. Register a submit handler for the form with two ajax methods. The first takes the four pieces of data and sends them to your server. The second grabs the rest of the data and sends it to the location specified by the form.
I have a page which opens a thickbox of another page which contains a form within it. However, upon that form being submitted (it writes the data to the DB) I need the parent page of the thickbox to update certain rows of the form (the values that have been changed).
I have been reading online, but I have never really attempted doing anything like this with Ajax before (i just normally use jQuery load()). Essentially my theory is that I could use the jQuery .submit() funciton and have a callback function which takes the post values and passes them to the previous page. I am unsure however to pass the values from the form caught in the callback function to the previous page as the form although being shown on the page in a thickbox is a different page.
Any help would be greatly appreciated!
Just to help visulaise what the page looks like:
The form showing details is under the thickbox, and once the update buttons is clicked I would like to have a way of passing the new details back to that form without having to refresh the entire page.
Many thanks,
Well there are several ways you could do it one could be to find the div that the thickbox opens then find the iframe in there which would in theory show the returned data from the server depending on how you are returning it and then using jQuery you could extract the data and update the original page.
Another way would be to just retrieve the updated data manually through the main page on the onClose event of the thickbox which IMO is a waste of a call if the iframe returns it.
That all depends on how your server returns the data to the form though.
You can do two things, first you might want to use the form submit event to trigger an update of the form on the page:
$('#myThickboxForm').submit(function() {
// take the data in one of the form fields
var fieldInputData = $('#someThickboxFormField').val();
// now update the other form using this value
$('#pageForm').find('#aPageFormField').val(fieldInputData);
});
Your thickbox also triggers an "unload" event when it gets closes, you can listen to that event like this:
$('#TB_window').on('unload', someFunction);
var someFunction = function() {
// do something when the thickbox closes
}
i have a grid view and a file upload button on a page. I have users load their data to my site and i parse their files and load onto the gridview. Then using ajax i update the javascript/jquery I allow users to edit their data right on the gridview. My problem is somehting that should be simple to fix but yet im stumped. Once the user is ready to submit the gridview data for good i have an AJAX call to a webservice that i send all the information on the grid. Then i would like to clear the grid and basically start with a clean page again. However i cant seem to clear the grid view. The data just keeps refreshing in the control with the original data. I realize that it has to do with the fact that is bound on the server but i cant unbinded!. i have tried.
window.location.reload()
but all this does its get me a crappy message from firefox telling me that the page is going to refresh.
I saw this on this site from various people
Response.Redirect(Request.RawUrl);
however i don't know how i can trigger that from an Ajax call?. Can i? I'm doing everything through Ajax partly because is where im most comfortable, but i would hate to have to put another button on the page and make the user have to click that button to restart it seems silly. I would like to do a full page refresh on my command. Is there anyway to do this via AJAX? putting a server button does not seem feasible to me due to the fact that once i load data in grid view i use jquery data table and jeditable and work pretty much on the client.
I'm open to suggestion, ideas, tips, anything at this point. So frustrated with what should be a simple task.
Thanks in advance
Miguel
To force a full page refresh without postback you can set the window.location.href value to the current window.location.href
e.g.
Imagine our current scope is the success callback of your grid data ajax submission function, so when the page reloads all new data will be fetched.
//reload the page now that data has been updated.
window.location.href = window.location.href;
If you must use server controls, you can wrap it in an UpdatePanel. This will make it ajax-enabled, but is pretty brute force.
There are nice libraries from companies like Telerik that have ajax-enabled controls. These cost some dough, but if you are doing a lot this it may be worth it.
Another option that does not support server templates/databinding is to use a jQuery based grid like jqQrid.
I'm building a site in CakePHP, and I'd like to give a 'Preview' option for pages as they're being added or edited.
In the 'Add Page' view, for instance, I have the usual form which the user uses to create their page. There is a 'Save' button, to save the data. Next to that, I'd like to have a 'Preview' button, which opens the page in a new window.
So, either I need the controller to open a new window (and I don't think this is possible), or it needs to be a link (targetting a new window) instead of a button - but in that case, how do I POST the data so that it can be shown? Do I need to use ajax or something? I'm a total newbie in ajax, but I do have a reasonable grasp of javascript.
Thanks for any help!
If the data that you are previewing is already saved on your database, then you can have an action in your controller (maybe preview()) action that references the saved data and loads the preview. And then to use it, you can just use a regular link that targets a new page and opens it there.
This would require saving the data the user is typing to your server every few seconds, though.
If you want to use the data that is still on the page, then you can use a JavaScript function to load a lightbox and populate the contents of that lightbox with data from the fields that the user is working on. You can probably use fancybox for that.
I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!
I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".
I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.
Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.