I have a PHP page with dozens of variables and arrays. I need access to most of them in a little popup the page generates. I've seen an answer here, but I don't understand it. What is the script he's loading with json? Is that something custom written with all of the php variables? That won't work for me as the variables are dynamically assigned from the results of an XML document loaded from an API. The XML document can be different with each pull.
Basic overview of the page:
The site loads XML from an API based on the user request. I use Xpath to grab the xml, and then iterate through it to create an array of arrays. I then use another loop to create named arrays with product variables. Some of the product variables are pulled into single variables, and I write functions with both the arrays and variables. How can I make all of this data available to the popup?
The page itself is a grid of product packages. The user needs to be able to customize the product quantities within the package, and a popup seemed like the most elegant way to manage this. The popup has a picture of the package, a short description, and a list of the products with a quantity text box that the user can change(or it least it will have those things when I get access to the php variables). After the user makes changes to the quantities, I will pass the changes back to the main page form with jQuery.
I'm using the bPopup plugin to manage the popup. The popup loads an html file into an empty div. I can change the extension to PHP, if need be.The empty div looks like this, and it's at the bottom of the page:
<div id="element_to_pop_up">
<a class="b-close">x<a/>
</div>
and the jQuery to call it is:
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#economy-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
loadUrl: 'lib/page-parts/economy.html' //Uses jQuery.load()
});
});
});
})(jQuery);
So how do I pass all of the variables from the parent page into the popup page? The simplest solution is desired. I don't have any experience working with json and very limited experience with ajax. If your answer requires either of those, then please explain it to me like I'm five years old. Thanks!
Related
I am with affiliate programs that give you little forms to put on your website, but often times they're entirely composed of javascript (so, no HTML tags , ID's or classes are inside of them).
These probably pull in forms using AJAX. JS or JQuery cannot display page elements by themselves, for that they need HTML. What you can do is use the Chrome Developer Tools to find the IDs or classes in the form they load in, and then after the AJAX call edit the form from there.
If there's a form then it has to ultimately draw elements into the DOM for the page to render. There's always a way to get at those nodes if you really need to, but if they don't include IDs or names then you'll have to walk the tree and look for specific relationships based on what you see in the finished page. It will definitely be a PITA, but it's doable.
I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.
It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.
it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.
Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.
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.
how to use Pager(GridView or ListView) with html link.
is that right that this code is not SEO friendly?
thanks.
You have two questions.
First:
You can implement a pager by using post-backs. Basically you will invoke a server call at each click of a link. And the server would reply with a new page of the dataset. But the asp.net controls submit the form using javascript. It looks like:
link text
So to not use the javascript at all, you could use a HTTP GET only method. This is just one way to do it.
So what you want generated is something that, it will pass to your server a page value using a query string parameter named 'page'.
You can handle that in your aspx page any way you see fit. But it needs to generate some thing like that.
page 2
In the page load of somepage.aspx you handle it.
protected void page_load(EventArgs e){
// check if the page parameter is set in the query string
if(Request.QueryString["page"] != null){
// page is the value of the requested page
var page = Request.QueryString["page"];
}
// bind you data to the control.
}
Then when binding the data to your GridView or ListView you filter the data based on the page requested.
#pre has a good answer for your first question.
Regarding your second about SEO and JavaScript:
JavaScript has to be used correctly. In other words, the html has to have the links and all of the pieces necessary to be read by a spider. If nav elements are injected via JavaScript then you can be assured that a spider will not see them.
You can certainly use JavaScript to change the styling, reposition the pager area or add other attributes but the base anchor tags with the appropriate href attributes have to be present.
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.