I have some experience in PHP but not in JQuery that much.
My admin.php page has a div which has id named "table1" where content gets loaded via ajax:
document.getElementById("table1").innerHTML=xmlhttp.responseText;
xmlhttp gets data from sorgula1.php page which has some JQuery effects like highlighting table rows. When I'm trying to run the sorgula1.php alone, the highlighting works but when it is loaded via ajax to admin.php, highlighting and other JQuery effects are not working. I've tried everything to make it work but, I always failed.
For those of you who will ask me to remove the $(document).ready(function() statement, I'm informing you that it doesn't work.
Here is the sorgula.php code: sorgula1.php
please be specific about the answers guys.Thanx for all answers.
Maybe when you use innerHTML property, the javascript doesn't work. I think you can solve this problem by using jQuery load() function.
The problem is most likely that the elements loaded via ajax do not have the effects applied to them - have you tried calling the $("#myTable").tablesorter(); javascript (again) after the ajax response has been received and injected into the DOM?
Edit sorry it should probably be this code that you call:
$("tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
or use .live()
Try to rewrite your events to Live(). I would say that it doesn't work, because elements are loaded after the jQuery functions are registered. So try
$("tr").not(':first').live('hover',function(){ // CODE });
Related
I know this has been asked on SO a lot, but I have trawled through the posts for a few hours now and nothing works.
I'm working on a Wordpress blog where the prev/next buttons on a single post page have to load the prev/next post by Ajax. I have written the code (jQuery Ajax) all fine (I think - if you want to improve it, be my guest!), but in each post there a few bits of jQuery that need to work. However, after I click either of the prev/next buttons to move between posts, the jQuery won't work (it works absolutely perfectly when the page is first loaded). I know this is due to the content not being 'connected' to the JS anymore but I'm not sure what to do about it.
Here is my code:
$(".page-feed").on('click', '.post-nav>a', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var link = $(this).attr('href'); // get the value of the href attribute on the links
$(".post-content").html("Loading...");
$.get(link, function(result) {
$result = $(result);
$content = $result.find(".post-content");
$(".post-content").replaceWith($content);
}, 'html');
});
I know that you're probably going to ask what I've already tried, but if I'm honest, not a lot that would be worth putting here.
The code above is located right at the top of a file called script.js, with all the other JS below it (which doesn't currently work after the Ajax call). The script is started by the standard $(document).ready(function() { statement.
Thanks for any help :)
First, you need to accept the event object as an argument.
$(".page-feed").on('click', '.post-nav>a', function(event) {
Next, by using the jQuery event object, you can simplify the next line because event is normalized by jQuery to work cross-browser.
event.preventDefault();
Now, as far as it working on the first click but not after, that's likely because .page-feed is a dynamic element. You'll need to instead select an element that is an ancestor of .post-content. document is a decent replacement, but it would be better if you picked one more local.
$(document).on('click', '.post-nav>a', function(event) {
The problem is this:
I have a simple, two fields form which I submit with Ajax.
Upon completion I reload two div's to reflect the changes.
Everything is working perfect except a jQuery plugin. It's a simple plugin that can be called with simple
function(){
$('.myDiv').scrollbars();
}
It's simple and easy to use, but it doesn't work on Ajax loaded content. Here is the code I use to post form and reload div's:
$(function() {
$('#fotocoment').on('submit', function(e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
}).error(function() {
});
e.preventDefault();
});
});
I've tried creating a function and calling it in Ajax succes:, but no luck. Can anyone show me how to make it work ? How can that simple plugin can be reloaded or reinitialized or, maybe, refreshed. I've studied a lot of jQuery's functions, including ajaxStop, ajaxComplete ... nothing seems to be working or I'm doing something wrong here.
If you're loading elements dynamically after DOM Document is already loaded (like through AJAX in your case) simple binding .scrollbars() to element won't work, even in $(document).ready() - you need to use "live" event(s) - that way jQuery will "catch" dynamically added content:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Source: jQuery Site
Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.
I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following example
<div class="holder">
<div class="scrollme">
<img src="http://placekitten.com/g/400/300" />
</div>
</div>
.....
$('.scrollme').scrollbars();
...
fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
$('.holder').html(fakedata);
$('.scrollme').scrollbars();
});
If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.
If it doesn't help, then try to come up with some more details about your HTML structure.
I want to thank everyone of you who took their time to answer me with this problem I have. However, the answer came to me after 4 days of struggle and "inventions" :), and it's not a JS or Jquery solution, but a simple logic in the file.
Originally, I call my functions and plugins at the beginning of the document in "head" tag, like any other programmer out here (there are exceptions also ).
Then my visitors open my blog read it and they want to post comments. But there are a lot of comments, and I don't want to scroll the entire page, or use the default scroll bars, simply because they're ugly and we don't have cross browser support to style that, just yet.
So I .post() the form with the comment, and simply reload the containing all of them. Naturally .scrollbars() plugin doesn't work. Here come the solution.
If I put this :
<script>$('.showcoment').scrollbars();</script>
in the beginning of my loaded document (with load() ), will not work, because is not HTML and it's getting removed automatically. BUT !!! If i do this:
<div><script>$('.showcoment').scrollbars();</script></div>
at the same beginning of loaded document, MAGIC .... it works. The logic that got me there I found it in the basics of javascript. If your script is inside an HTML element, it will be parsed without any problem.
Thank you all again, and I hope my experience will help others.
If I understand you correctly, try this:
var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');
$(function () {
$('#fotocoment').on('submit', function (e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
api.reinitialise();
}).error(function () {
});
e.preventDefault();
});
});
reinitialise - standart api function, updates scrolbars.
I'm creating a webpage using php, mysql, html5&css3 and javascript (ajax).
To improve the performance, i decided to use AJAX to get only the content div (<div id="content">) that actually changes, i dont want to reload the whole code all the time. That works as follows: after having received the new content from a php-file, javascript does the following:
document.getElementById("content").innerHTML = new_content;
After that, the new_content is well displayed...
Now the Problem:
In the new_content, i have some javascript, too, e.g.:
<script type="text/javascript" lang="JAVASCRIPT">
alert('Hello!');
...
</script>
Unfortunately, when inserting it in the div, it isn't executed at all...when calling the php-file "naturally", the javascript code does what i want it to do, so there's no error in it.
Thanks in advance
EDIT: Problem is solved, i included jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
and used $("#content").html(new_content); in javascript as mentioned below.
Use jQuery's $.html. It will automatically execute scripts for you.
$("#content").html(new_content);
Indeed, by default script execution is disabled when just replacing HTML - makes sense if you look at it. You should really consider using a library like jQuery or Mootools to abstract issues like this away.
If you look at Mootools' Request.HTML implementation you'll see it has its evalScripts option defaulting to true, which later on during the call results in this bit of code being executed:
response.html = text.stripScripts(function(script){
response.javascript = script;
});
...
if (options.evalScripts) Browser.exec(response.javascript);
However this probably won't work on its own without Mootools' other bits of browser-abstracting code in place, so yes I'd definitely recommend including a library on your project.
I'm facing an interesting problem where everything works flawlessly. I console.log every step and it plays out just the way it should. But! I have a #div into what I .load(a-file.php). Now that "a-file.php" includes HTML mark-up as well, more specifically certain links that I'd like to make "active" onload.
Scenario; page load happens, Javascript loads and loads a file into the div. That div now has tabs and I'd like the first tab to be in an "active" state which requires me to addClass('active');. But the following seems to have no effect
$('#content').load('file.php'); // works.
$('#content a[rel="weird-page"]').addClass('active'); // does not work.
Any kind of help, even remotely nailing it, is appreciated.
change to:
$('#content').load('file.php', function() {
$('#content a[rel="weird-page"]').addClass('active');
});
jQuery load() works asynchronously and therefore your addClass() method is being called before load() has completed.
Using the load() callback function it will ensure your content has loaded:
$('#content').load('file.php', function() {
$(this).find('a[rel="weird-page"]').addClass('active');
});
shameless-plug-warning: I wrote a blog post about jQuery callback functions which you might find useful.
Debugging Ajax code with Firebug
This question is quite similar, though old and without real answers.
I'm currently putting together an app that has scripts that get loaded in with an ajax request.
An example:
var main = _main.get();
main.load( someurl );
Where someurl is a page that contains an inline script element:
<script type="text/javascript">
$(document).ready( function(){
var activities = new activities();
activities.init();
});
</script>
jQuery will do a line by line eval of js that lives in inline script tags. The problem is, I get no errors or any information whatsoever in firebug when something goes awry.
Does anyone have a good solution for this? Or a better practice for loading pages which contain javascript functionality?
Edit: A little progress... so at the top of the page that is being loaded in via ajax, I have another script that was being included like this:
<script type="text/javascript" src="javascript/pages/activities.js"></script>
When I moved the inline $(document).ready() code in the page to the end of this included file, instead, syntax errors were now properly getting thrown.
As an aside, I threw a console.log() into the inline script tag, and it was being logged just fine. I also tried removing the $(document).ready() altogether, and also switching it out for a $(window).load() event. No difference. May have something to do with the inline scripts dependency on the included activities.js, I guess.
:: shakes head :: javascript can be a nightmare.
I suggest using http://api.jquery.com/jQuery.getScript/ for lazy loading Javascript or for getting html content http://api.jquery.com/load/
respectively:
$.getScript('path/to/file.js');
.. and
$('#content-wrap').load('path/to/html/file.html');
Both of theses methods are wraps around http://api.jquery.com/jQuery.ajax/ and have optional callback function parameters.