I'm using form for searching in db. The searching is going as the user is typing and you can see the results in a DIV (Formatted in a table).
The DIV content is changing as the user is typing (I use AJAX to change the content). When the user finds something he likes in the table, he's able to give it a "Thumb up". But, even i have this in my included .js:
$(".PlusAddImgs").click(function(){
alert(' ');
});
And the PlusAddImgs is also class of IMG's, user can click on, it's not working.
I tried to make another image with same class in the DIV, and it work's until i start typing/searching/changing content.
So I thought maybe I need to include needed .js files also in the .php page I'm using to show me the tables, the one, witch ajax is workin with, why searching and geting data from the db.
Tried that, not working..
Can you please help me to ahieve my goal? I just need to use ajax in a changing content DIV
You should use .live handler:
$(".PlusAddImgs").live("click", function(){ alert("Hi!"); });
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.
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'm currently working on a website that you'll find here: http://steadfastdesignfirm.com/rgw/. I used an ajax effect that I found online at CSS-Tricks to dynamically load content from another php page and animate it (fade in and fade out) when a navigation tab is clicked.
I have managed to get this working fine, as you will see (please note the only two working pages are "Home" and "Experience RGW"), however, all of the jQuery scripts in my document that apply to elements within the div that reloads are broken when the content is dynamically generated.
As a quick example, take a look at the text resize tool beneath the image rotator on the home page and try changing the font size. Now, click on the "Experience RGW" tab and scroll down to the text resize tool again. Notice that now that we've loaded in experience.php dynamically within the "#ajax" div, the script doesn't work. Also, if you click on the "Home" link now, you will also notice that the image rotator doesn't work.
I've looked high and low online and through multiple forums to try and figure out how to fix this, and I believe I have to incorporate the jQuery .live function, to apply the script to any element, whether it's currently visible or not. Otherwise, document.ready only runs the scripts once after the DOM loads and will not affect the ajax loaded content. Is that correct? If so, how do I apply that to multiple jQuery files executed on my page?
Well, this is totally driving me crazy and I've tried hard to get it, but I just can't quite figure it out. I'm fairly new to jQuery, but am trying to learn fast. I would post some of the code here, but there is a lot involved in this question. :)
If anyone would be willing to shoot out a quick answer, or a few lines of code, I'd greatly appreciate it.
FYI: The script that runs the ajax effect is in ./scripts/page.js. Also, please remember that I currently have only the Home page and Experience RGW page working correctly, so please don't waste time trying to diagnose problems on the other pages. I haven't gotten to them yet. :)
Here is a link to some of the code on jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.
Thanks,
Taylor
I'm behind a proxy and can't see your page, but it sounds like the events are not being re-attached to the content created through ajax.
I'll try to explain, when your page loads the first time, you are attaching jQuery events to DOM objects on document.ready(), this function will be called only once.
Every time you drop DOM objects and create new ones with the ajax response, these new objects never get jQuery events attached again, since the document.ready() function didn't fire.
You can try putting your event-attaching code in a different function and invoke that function on document.ready() AND after every DOM modification (your ajax call to change the tab content).
Hope it helps.
The problem is a breakdown in the order of executing code.
page loads
load event fires and sets up elements
click event
ajax loads the new page
The new page doesn't have any events set to it. Two solutions
use "live" links in the window.load event callback
use run the page load code again.
Solution 1 is nice but if you have an specific plugin used then it won't be the total solution.
Solution 2 can be implemented by pulling out your code in window.load and wrapping in another function. Just all it onload and then in the callback when the ajax loads.
I know how frustrating is can be. I hope this helps.
You need to rebind any events after dynamically loading in elements to a page, as Javascript sees these as totally new DOM elements.
You can achieve this by modifying the code you use to update the page:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#ajax")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #ajax", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav li").removeClass("on");
$("nav a[href='"+newHash+"']").parent().addClass("on");
// Rebind any events
documenttextsizer.setup("text-resize");
});
});
};
});
This applies to any events that happen WITHIN the updated elements in the page. So after the comment "//Rebind any events" you can add others as they are required! Hope that helps :)
I have a MySQL database with and id and a text string, I want to be able to display it, and with the click of a button display another random phrase without having to refresh the whole page.
I have look quite thoroughly and have no found no answer for this concrete question.
Is it possible to do it with PHP?
First try it WITH refresh.
You'll need to select a random text from your database (hint, use RAND() in your mysql request).
Once you know how to do that, learn how to make Javascript talk to your php page so you no longer need refresh. It's called AJAX, you can look at JQuery ( http://jquery.com/ ) for a library that will help you with it and specifically this page :
http://api.jquery.com/jQuery.ajax/
Your javascript will do a Ajax call to your php page, will get some data back and then will be able to display it in your page.
Look at the example, you should be able to do it from there.
But first do it with refresh, it's a first step.
If i were you i would use http://api.jquery.com/jQuery.get/
Create a page where you do the mysql query and then write a few lines of jquery to get the information from that specific page. You won't have to refresh the page and there are plenty of neat ways to change between the data you get from the database, with jquery
something like:
$.get("the_separate_page.php", function(data){
console.log('Your quote is : ' + data);
//check your log
});
I would like to create a pagination system for comments in my website.So far, I have been able to create pagination using php/mysql and html but the page has to refresh every time we click on the next button(for the next set of comments) or previous or a particular page....
As far as my knowledge of jquery is concerned I am thinking that, when the user clicks on the next button we post data for the page number to comments.php then echo all the comments in comments.php, then the jquery data variable recieves all the data echo'd in the file and appends it to the #comments box...
Is my solution a valid one??? or anyone has a better solution.....thanks
Your question doesn't make much sense and is very jumbled.
You can either load the entire list when the page first loads, and use jquery to paginate it by hiding the extra entries, which will work fine for lists with a few pages worth of content.
The other option is to use AJAX to fetch the next or previous page when the appropriate link is clicked.
There are plenty of pagination add ons for jquery. Maybe check them out.
Don't use a POST request to get the next page as it looks like you might be, unless you are just using the wrong terminology.
Yes, when you click 'next', you send ajax request to comments.php and replace current comments with new ones.
You can do it with a get()/getJSON() call in jQuery.
Something like
$('#next').click(function(){
$.getJSON('url?withnextpage=number',
function(data){
//update variables or the DOM
});
});
Returning it in JSON may be quicker. I hope that helps