I am looking for a way to make all visible objects in a webpage selectable by a visitor.
For example, I take google's homepage as source, my php script already gets the homepage, and stores everything in an array.
Now I want to show the google homepage with every object (span, div, body, td etc...) selectable.
My visitor will select a few objects and then click submit (form post)
I do not know how to do this, even after searching dhtml and so ..
Thansk for your help
Mykeul
Parse the html page, if the actual element has an ID, just store, if not set an ID.
When you have all ID-s set a border for each element
Set an onClick, onMouseOver event handler
Handle clicking
Finally post the select element's id
Jquery would help you.
Related
I'm having a few problems with jQuery/AJAX and was wondering if anyone could point me in the right direction!
I have an AJAX request on my page that populates a div (call it with div 1) with a select box. Also contained is another DIV (call it div 2). After selecting an option from the select box and clicking a button, I then want to populate div 2 with some extra information. However, when I try to do this, it appears that jQuery is trying to load div 1 with the new information. When I use chrome to inspect the element, I can see that when the button is clicked that div 2 is removed for some reason. Can anyone advise?
Not really possible to answer this question without seeing your code, but here is another SO question that discusses how to populate <select> control B, based on the contents of <select> control A.
Three Ajax examples (look at the last one)
I am playing with things here above my head but am desperately trying to learn.
I have an administration page, using jquery I display a hidden div that displays a another page inside.
I do this using:
$(document).ready(function(){
$("a#fadeoutblog").click(function(){
$("#page").fadeTo("slow",0.25)
$("#terms4").fadeIn("slow")
$("#back2").fadeIn("slow")
$("#terms4").load("blogpageload.php")
}); });
So terms4 is the div on the admin page and it diplays the page blogpageload.php!
On this page is a table that displays all the posts of a really simple blog, 'a' delete post a tag and an approve post 'a' tag (which just sets the approved column to 'Y' in the database). What i want is for the page inside this div to refresh when a post in the table is deleted(or the delete 'a' tag is clicked). The problem is that when you click on the delete 'a' tag we are sent to the ammendblogdatabase.php page first so that the post can be deleted!.
I have tried multiple methods but they all have problems!
The main part that is causing problems is that to view this div that contains a page the user must first click on another a tag that uses a jquery to stop the 'display: none;'.
Im not sure what code you may need to see but please ask....
This is the information in the table cell with the delete button:
echo "<a id='refreshblog' href='deleteblogentry.php?username=".$usn."&timeleft=".$tml."'>Delete</a>";
Thank you!
The problem you're most likely having is binding to "future" elements (e.g. elements that will be on the page, but aren't yet). To overcome this, you can use .on() to avoid this.
$('#terms4').on('click','a',function(){
// will bind to anchor elements in #terms4 at the time of execution
// (most likely page ready) and look for future anchors added (in
// the case of .load() completing)
});
From there, you can bind your own show/hide event, maybe call an ajax method that deletes the entry behind the scenes, and make a re-call to .load again and refresh the page.
I need to do this using PHP and Javascript.
I have one form, with a few inputs. One of them is gender.
When they click a link/button I need to pass the value of the gender drop down to a popup.
Based on that value I show either male or females portraits.
I'd like to pass the value back to the parent window once they select a portrait and then click a button.
I have the code to display the portaits. But how do I pass the values back and forth, and how do I make a value passed from the parent window available to my PHP code in the new popup?
Any help greatly appreciated.
The problem is well defined, but the question itself is still somewhat vague. I'll give it a shot though. If you really mean a pop-up (separate window) rather than an on-page dialog (such as jQuery UI elements and so forth), then the communication channel you'll want to use is the object returned from window.open() to communicate from parent page to child page, and window.opener to communicate from child to parent. For example:
var genderPicker = document.getElementById('genderSelect');
var gender = genderPicker.options[genderPicker.selectedIndex].value;
var portraitChooserWindow = window.open("path/to/script.ext?gender=" + gender);
// portraitChooserWindow is now a reference to the newly opened pop-up (or null if the browser blocked pop-ups)
From the child window, window.opener is now a reference to the parent window.
I have a form on one page, some of the form data is pulled from various tables in my mysql database -- the tables hold the options for different selects, so the following is the way my data will look after the php scripts are run:
<select name="vehicleStyle">
<option value="empty" selected="selected">- select -</option>
<option value="coupe">Coupe</option>
etc....
</select>
I have a second form that loads over this page in an iframe, this 2nd form allows me to update the data included in this mysql table so that I can add options to the form on the fly. Everything works absolutely fine and wonderful however, if I update (add a value) to this table on the fly, I have to refresh the page in order for the new data to show up in the first form on the main page. I've played with auto-refreshing the page, but that's kind of obnoxious.
Is there a way to add this form data directly into my original page via jquery?
I think twitter does something like this when you add a tweet (I don't use twitter) but it adds your recent tweet onto the top of the page without actually reloading the entire page.
Thanks so much!
I believe the best way is to use the load jQuery function (http://api.jquery.com/load/).
It lets you load a page from a url directly from javascript.
Here is what I would do:
move the creation of the select to a new url (fillselect.php for exemple)
load the page without creating the select: create a div tag instead (name it divforselect for exemple)
in the onload javascript event of the page, write this:
$("#divforselect").load("fillselect.php") This will result in the div tag innerText set to the content of the fillselect.php page. So the url fillselect.php will not be a complete html page but will only contain the select tag.
After that you can call $("#divforselect").load("fillselect.php") whenever you want to refresh the select!
I think you want to do DOM manipulation using JS. All you have to do is append a new OPTION tag with the user-input value to the SELECT like:
var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);
Remember: this is adding an OPTION just on the client side. So if your actual form submission (in your iframe) fails to push the data to your database, this would represent an inconsistent view for your user( where he would think new OPTION is created but its actually failed).
So, you would have to tie your UI update with your backend response. Typically, you would refresh this UI in the AJAX response of the call updating the backend.
Maybe you should be using AJAX to populate the boxes? Then you could have it refresh the data anytime you want.
jQuery Ajax
The Problem
I have a page with a form on. It has a hidden field called: generic_portrait
I want the user to click a link "select portrait"
This will open a Dialog/Popup using jQuery, based on a dropdown completed earlier in the form. If the value of the dropdown called "gender" is "male" then show male options, if "gender" is set to "female" show female options.
Each portrait has a radio button, each with a name assigned "male1", "male2" etc
Depending on the radio button selected in the popup, I want the hidden field to be set to match this.
The Questions
What is the best way to show a dialog/popup using jQuery, different depending on a dropdown box on the page. Use Javascript to see what is selected, then show a corresponding Div?
I can do the check to see what the dropdown is set to using jQuery, but how can I then shown a specific popup based on that?
Once i've popped it up, how do I take the value assigned to the selected radio box, and set the hidden field called "generic_portrait" to this value.
Why i'm asking
Normally I would figure this out myself, as i'm sure it's not that difficult, but I don't use Javascript and/or PHP very often, and this is due for a client urgently. So I would really, really appreciate some help on this one.
Thanks for all replies in advance.
Moses has some good insight. But, to specifically answer your questions:
For the popup you need you might try using a "modal". Check out the jQuery UI library and specifically look at the dialog widget.
As to how to show a different modal in each circumstance, one option would be to create an empty div element which is hidden by default via CSS. Then using the dialog widget, create a different modal for each. A basic example:$("#yourID").html("your content").dialog({title:"your title",show:"fade",hide:"fade",buttons:{Done:function(){$(this).dialog("destroy");}}}); NOTE: There are a number of ways to create the modal content, including creating them in full in the HTML, while being hidden, and then simply using the dialog widget to display them.
As to how to populate your hidden field with what was selected in the dialog widget, look at dialog widget source code (e.g. the "view source" link on the page) to see how they get form values. You can then use jQuery to set the hidden field's value attribute.
Before even addressing your question, you should consider whether there is a more degradable (i.e. not reliant on js) approach to your form. Without JavaScript enabled, it sounds like your users will be dead in the water, so to speak, since they will not be able to complete the gender specific questions.
Unless your clients don't care about graceful degradation, I suggest breaking the form into pieces, and then serving the correct pieces via php depending on what the user chose. Doing so erases the need for modal dialogs (which, while cool, are not accessible) and allows much more of your audience to participate in the form.