Okay this is quite complicated to explain but i'll try and keep it as short as possible. I'm making an 'app', part of the function of which is to pull XML based data from a file using PHP DOMDocument() and a loop to display each block of information in its own DIV. My aim is to allow the user to then click a 'close' button on any of these displayed div's and they will be hidden using jQuery similar to this:
$('input[name=foo]').live('change', function(){
if ( $(this).is(":checked")) {
$('.bar').hide(500);
}
I'm pretty certain I can get it up to this stage with no issues however, when the user saves at the end of this process I want to pass params back that relate to the boxes that have been hidden/removed using $_POST and then subsequently remove the corresponding items/nodes from the original xml document. Each item and each close button has a unique ID.
Any tips on how to achieve this would be much appreicated. thanks
just get the ids or names of the div that have hidden and send that as POST and then go to their parent element. suppose their parent node is referenced in $parent and the node u want to remove is referenced in $child. Now use $parent->removeChild($child)
or u can do this
get the node reference say $node
then use
$node->parentNode->removeChild($node);
One idea is that you can check whether the div is hidden or not like $(".bar").is(':hidden'); and then not include it in the XML you're sending back.
When one of the boxes is clicked, do a xmlhttprequest using the post method.
$.post() pasing the ID and state of the box.
Related
I'm working on a wordpress template and there is one textbox and a button.
I would need to archieve that when i type something in the box and press the button, the page writes this value in the database and then adds a new row to a table on this very same page containing the newely added item. All this without the page beeing reloaded.
As far as I know i need to use jquery to do this, but how is this PROPERLY done inside a wordpress template by using the tools wordpress provides me with?
Even without knowing how wordpress handles custom javascript code, I assume that you can import a custom JS script in the document. (https://codex.wordpress.org/Using_Javascript).
What you need to do is to bind the click event of the button (.click() or with the on() function), and in the callback you can retrieve the value of the text box ($("textbox_selector").val()).
After that you can use the $.ajax() (or the $.get / $.post shorthands depending on which kind of request you need).
To add a new row to the table you can create a new tr element with $("<tr>"), adding the various <td> in the same way or using the html() function to directly set the html inside.
Then you can use the append() function on the table selector.
P.S.: you say that "As far as I know i need to use jquery to do this" so I assume it's only about the client side. Do you need even the server side? If the answer is yes, we need at least the DB structure and other server-side info, and then I can integrate the answer.
Anyway the PHP script will be part of your template and it will be responsible to add the entry in the DB and returning some useful message that will be available in the $.ajax() callback function.
Long story short I am using javascript and php to add / remove questions to a database (think notecards to study with). It all works except I can't get the table on my page to refresh whenever I hit the add question button which uses a XHR to add the data. I can refresh the page manually and see the updated table with my information, but want to use ajax to refresh the table on-screen right after I submit the new question (or delete it) seamlessly. I would rather not have to redraw the entire page, just the table and the info. I understand how to use the XHR and refresh the mysql...but how can I tell the browser to reload a table in a specific div on the page - and only that specific table - with the additional or removed info?
I can NOT use Jquery or other frameworks, just plain old JS, PHP, and html.
I have been searching, and just can't get that "ah-ha" moment yet, can't anybody help me out and push me in the right direction? Generalities, Dom commands to look up or research would be a great help, I don't need character by character coding done by the collective.
thank you, :-)
All you need to do is get it with a method such as document.getElementById or document.querySelector. Then you could change the element however you would need to.
var element = document.querySelector('#elToChange');
element.innerHTML = //something from the server
element.remove(); //for deleting
//If you delete remember to do the following so that you don't have a memory leak.
delete element;
I'd look at innerHTML you can place your table inside a div or whatever, and use innerHTML to regenerate the contents of that div.
I need help in identifying how I should set up this non public website.
Basically there are around 2000 images referenced in a database.
Each user will be able to check or uncheck each image with the use of a checkbox.
Some users might have different images checked or unchecked.
I want the checkbox to process an AJAX request to a user specific XML (PHP generated from the db) which contains a boolean variable for each image entry.
The PHP then references the XML and highlights checkedboxes and disables the uncheckedboxes.
Again each user will have different references for each image.
Im not sure if the above is the correct method to use.
I want the page to dynamically load the first 20 images and if the checkbox is changed, instantly updated and refreshed without a page reload. Then I'll paginate to the next 20.
If I'm on the right track I'll attempt a demo and post an update.
Thanks,
Depends how you want to do it. You'll need to brush up on your javascript as well to track the on change event. If you're bring in the images with ajax to begin with I would create an object for each and attach the event to element. Then on click you could post the image_id or what have you to the server. Alternatively you could use an attribute on the checkbox/image like data-imageid="1"
JSON or XML, both will work, it just depends how you want to design it. Though from my experience I would use JSON instead.
The JSON array you would return might look something like {1:true,2:false,3:true} etc, so foreach key value pair you would either check it be it true or not on false.
Consider editing your tags for javascript or jquery to see if you get some better answers. Or I could elaborate further if I'm on the right track.
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
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.