I am using the Jeditable plugin to edit in place. If I use it directly on the page, the plugin works perfectly; but if I use it in the modal window, it does not work anymore. The data populating the modal comes from a PHP file via AJAX, it seems that the plugin does not load in the modal.
This is the code that ajax receives from PHP:
<div class='edit2' id='div_1'>Dolor</div>
And this is the plugin call that I make:
$(document).ready(function() {
$('.edit2').editable('http://www.example.com/save.php');
});
If i do this directly on the page, it works fine; but not in the modal.
From the description and the code in the question, it looks like the problem is the time in which you call the editable() function.
Right now, you call it when the document is ready (inside the $(document).ready() function). This is fine and will work great if the element with class .edit2 is already in the page (e.g.: when you use it directly on the page), but it doesn't work if the element is not there yet (e.g.: when you load it later using AJAX).
The solution to this issue would be to move the call:
$('.edit2').editable('http://www.example.com/save.php');
from the page load into the success function of the AJAX call, right after you have added the content into the modal. That way, .edit2 will exist when the plugin is called, and it should work normally.
Related
I've looked at a lot of StackOverflow answers but can't find an answer that is working. This seems like it should be so simple.
I have a PHP single page web app. It has a nav bar that loads pages as includes. Clicking the nav bar invokes a jQuery function to load a different include and inject a class into a div. This works in the nav.
In one of the includes, I have an HTML link:
<div class="page-content">
<a class='btn-primary'>See Examples</a>
</div>
This is the jQuery I want it to execute:
$(".btn-primary").click(function() {
alert('you clicked me');
$('.page').attr('class', 'page examples');
// REPLACE THE CURRENT INCLUDE
$('.page-content').load('includes/page-examples.php');
window.scrollTo(0, 0);
});
But the link does not execute the function. Changing it to a div does not work. Clicking will not even execute the alert.
I've tried to put the link in php echo or php print, but it makes no difference. I've checked all my naming and there isn't a typo.
What is the best way to make it work?
----- EDIT -----
The jQuery is being called from a js file called from the index.php head tag, and is in the DOM ready statement. It looks like the DOM is ready before the include with the link loads. If I remove the link's js from the js file and put it in the include with the link, then the link works, but this will create a problem as other internal links are added to the site in other includes.
What is the best way to fix ?
It sounds like your javascript click binding $(".btn-primary").click(...); is executed on DOM-ready.
But at that time the .btn-primary is not yet in the DOM as it only gets inserted into the DOM after you include it (if I understood it right).
Therefore the binding never happens and after your first include gets loaded the click binding code is never executed again and therefore the .btn-primary element has no onClick event.
You need to run your javascript snippet after that .btn-primary element gets inserted in the DOM, eg. like this:
$('.page-content').load('includes/first-include.php', function(){
$(".btn-primary").click(function() {
whatever...
});
});
First step
Check if you are importing jQuery library (it seems obvious, but we
can forget to import the library sometimes or the library URL is wrong
and the browser cannot recognize it as well). And remember you need import jQuery before the function you wrote.
Second step
If you need to inject a class into some element using jQuery, the easiest way to do this is:
Instead...
$('.page').attr('class', 'page examples');
Change to...
$('.page').addClass('examples');
In this example above, you can omit the 'page' and let only 'examples', because the class ".page" is already there.
Another thing, this will only work if the element with ".page" class already exists in your HTML.
Third step:
Add a callback to .load function and see if it worked properly:
$('.page-content').load('includes/page-examples.php', function(){
alert("Nice, my content was loaded!");
// You can put this action here, so it will execute after the content is loaded
window.scrollTo(0, 0);
});
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.
I created a little DIV in HTML which gets filled by a main_login.php
main_login.php loads the homepage with member content on the side if there is a session started
If there is no session started, the main_login.php file loads the homepage with loginfields.html on the side
main_login.php: http://pastebin.com/vkhccGSB
loginfields.html: http://pastebin.com/fDJjTjsf
Now whenever loginfields.html is loaded, the button on that page doesnt execute whenever I press it. When I open the localhost/loginfields.html it works like a charm.
What is preventing the login_check.php to load?
I'm going to take a wild guess here, and say that you're loading in main_login.php via AJAX and using innerHTML (or jQuery's html()) to put it into the page. I'm also guessing that your button is powered by a <script> tag.
<script> tags loaded with innerHTML are not executed. You have to either load it in as an external script (even then I'm not sure if innerHTML will load it in), or use proper DOM functions to append the script to the page, or separate the HTML and JavaScript from the response and run the JS through eval.
If you're simply trying to load loginfields.php into the page, you could just use include('loginfields.php') instead of your fopen() function.
I have a jQuery fancybox with an iframe. It loads the code from a .php.
Inside that .php file, I have a button which does a post when clicked.
$(".next").click(function() {
$.post("update.php", {page: $(this).attr('data-page')}, function(success){
$("#dialog").html(success);
}
);
});
The issue is that when I click this for the first time it loads up the html, however it does not work the second time. It seems that jQuery is not loaded for the second time as I am using the star-rating and the star-rating is not rendered there as well.
Initially my dialog has some html code in it.
To illustrate, here's how the structure of my page. I have a main.php. I have a button inside main.php that when I click launches an iframe fancy box. The content of this fancy box is loaded from a .php file, called content.php. Inside the content.php I have another button that when clicked does a post to loader.php. loader.php echoes a bunch of html. The jQuery code to post is located at content.php When I click on the button inside the iframe for the second time, it doesn't do anything
Well, Fancybox is really just loading a div over your current content, so if the content of that div (the Fancybox "dialog") changes after the DOM is set (in other words, the page is done loading) then the events are not attached to the new content by jQuery. You'd have to modify your code to use the .live() function.
Instead of click, you have to use live. Change first line as:
$(".next").live('click', function() {
Sorry for this but I searched the whole web for a solution to my probleme but in vain :(
What I want to achieve is creating a normal Post and adding a form to it that once submitted, goes to a database and gets back a value.
I created a plugin for that and integrated it in the admin menu then set a function that queries the db :
myfunc_getcode($db, $table, $value, $return) // returns a value
how can I achieve this!? I mean, when a user inserts some data in the form (that exists inside a post or page) then he clicks on submit, Ajax talks to the db and gets the results back.
I don't even know if wordpress 3.0.1 allows such things!
I got it to work by using
add_action('the_content', 'my_function');
this hooks my plugin to the posts and pages.
then in the function I transmit the content like;
function my_function($content) {}
Then I used Ajax by integrating jquery inside my script;
<script type="text/javascript">
jQuery(document).ready(function($) {}
for submitting forms I used jquery/ajax to listen to the form
$("#my_form_id").submit(function() {
and used jquery's $.post to pass variables to a php page that handeles my results and returns them by echo.
hope this helps someone!