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.
Related
It's another late night and another seemingly simple issue that's causing a headache!
So, here's the situation. I have a simple HTML form that's in a Bootstrap modal. When this form is submitted, there's an AJAX POST to a receiving page, SESSIONS are set and the request is then forwarded to a simple DB query. This all works.
What I want to do is show the sessions on the original page without a page refresh.
I thought this would be easy so I tried using this on the original page;
$('#filteroptions').on('hidden.bs.modal', function () {
$("#breadcrumbs").load('includes/files/private/breadcrumb.php');
});
breadcrumb.php holds the output format and the file is populated immediately after the POST from the modal (called filteroptions)
I also tried to attach it to the POST success with a simple success process to load the file but each time, the breadcrumb.php fils to be loaded.
Curiously, if I ctrl+F5 the page after the first POST, there is no value shown BUT if I search again the DIV is updated each time I search after that.
Why would the request not fire the first time that the search is performed? Why do I need to refresh the page for everything to start working?
There is no caching to it's not a case of a dependantr file being cached after the refresh.
Thanks
The solution was to populate the div with nothing and then update it.
Previously, the div was only being drawn when it was populated thanks to the code in the breadcrumb file looking for a specific POST or SESSION variable.
It now allows for a blank value.
I am trying to create a delete-button for each printed row in a php while loop that opens a modal window. The delete query will be executed from the modal.
How can I pass the corresponding row's id, title etc to the modal?
The way it is now, I only get the data from the first table row no matter what delete-button I press.
There are many solutions out there, but I can't make them work.
Hoping someone can help me understand this...
PHP is server side, so it really needs done in Javascript.
I created a Javascript lib if you are interested called bs-delete-confirm. you add a class to your delete button, and when you click it, it stops an href from leaving the page and brings up a Bootstrap modal asking if you are sure you wish to perform the action. Clicking ok follows the link, clicking cancel doesn't. Simple!.
Check it out here https://github.com/delboy1978uk/bs-delete-confirm
X
$(document).ready(function(){
$('.delete_class').deleteConfirm();
});
and that's it! you now have a delete confirm modal :-)
I tend to create a hidden modal in the bottom of my html and clone it into a new variable, then change the data for that new modal, append it and fire it up.
That way when you delete it or need to create a second one, you always have access to your template/blueprint.
It also allows you to keep a separate reference to every modal for later use.
eg $modal1.find('.inputEmail') and $modal2.find('.inputEmail')
You can even make that dynamic afterwards if you have many inputs
I'm at my very first steps with jquery.I've got an index.php file which includes:
header.html
indexview.html
footer.html.
Into the indexview.html file there are two divs. One on the left (a menu) and one on the right(div id="content"). Whenever I click an item on the left menu, jquery is responsible to load other html pages(and eventually fetch data from the DB thanks to ajax) INTO the right div (div id="content"). I'm really liking this kind of approach, but the problem is that if, for example, I load:
Photo.html
Contacts.html
Info.html
Into the main div (the right one: div id="content") and then I press the back arrow, it just brings me to index.php with the indexview.html page loaded (instead of showing me contacts->photo->indexview).
I've already did some searches on the web and find out that I should build something that fetches the url thanks to the event handler "popstate". I've already dig a bit into that or into a little framework that can let me handle all of that, but, still I'm not fully understanding what I am supposed to do. The items on the left are NOT "<a> links" and don't have href attributes of course. Do I have to substitute every item (now a li item) with an <a> element? If so, how do I proceed to make the history work as I wish?
P.s. Of course, every time I load something into my right div (being photo.html,contacts,html etc) my url does NOT change.
Here is a little jsfiddle (not sure if it can help: doubt that). Clicking on whatever item in the menu makes jquery load() an html page in the right div ("overriding" the div where you "find Welcome, this is the integrated information management system web interface of the ...etc!").
http://jsfiddle.net/5by64tsn/
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
});
When I click listContact, the contacts.html is loaded into the content div.
What you're hoping to accomplish isn't how Ajax/browser history stuff works. Ajax calls are independent of the browser's history and do not affect the back/forward buttons without adding code to do so. You've mentioned popState, which is close to what you want. You actually want pushState.
// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);
Using your example:
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});
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.
Is there a way to update information in a div of a parent page from a pop-up/"lightbox" window. I would like to create a pop up window that contains a form that updates a database (currently i am using php/mysql with prototype).
In other words...
I would like a user to be able to use a form in a popup window to update the database, and the changes that are made to be shown on the parent page without that parent page being refreshed.
Thanks.
Erh.. Are you sure you know what you're doing here?
Your 'modal' popup has never left the 'parent' page. Therefore, you can just update any DIV from the form request you know the ID of, close the lightbox, and vwalla.
I'm a mootools guy myself, but since prototype is kinda the same i'm guessing it's something like this:
<form onsubmit="$(this).send({update: 'yourParentDiv', onComplete: function() { lightBox.close() } })">