I am using this script to load pages in a css frame (div#maincontent). I want the links in the loaded pages to load in this frame instead of just "going" there. I want to do this using jquery. Here is my attempt:
$('#maincontent a').click(function(e) {
e.preventDefault();
ajaxpage($(this).attr("href"), 'maincontent');
});
Not sure what ajaxpage is, but if you're just loading a page into a div you can simply use load
Something like this:
$('#maincontent a').click(function(e) {
e.preventDefault();
$("#maincontent").load($(this).attr("href"));
});
Edit:
If you want the loaded page to have event handlers for click too, you can use load()'s callback function for this. Like this:
function engageLinks() {
$('#maincontent a').click(function(e) {
e.preventDefault();
$("#maincontent").load($(this).attr("href"), function() {
engageLinks();
} );
});
}
// Call the function the very first time the page is loaded.
// After that the function will call itself.
engageLinks();
Here's an example.
Replace ajaxpage with $('#maincontent').load($(this).attr("href"));
Related
I need to load content into a div using a php-script triggered in another div but I'm at my wit's end..
Something like this:
echo"<script>$('#posters').load($query->execute($sql));</script>";
Something Like this?
This gets a php file (sql-query.php) in and then changes the content in the div #update upon a button click.
$(document).ready(function () {
$('.btn').click(function(){
$.get("sql-query.php", function (result) {
$('#update').html(result);
});
});
});
How can I load a page, namely a forgot password modal: http://localhost/CI/index.php/forgot/forgotModal into a div in my login page which displays the modal. For various reasons like it needing its only controller, I cannot include it in a view for login. At the end of my page I am calling:
<script>
jQuery(document).ready(function() {
App.init();
$('#forgot-form').load('http://localhost/CI/index.php/forgot/forgotModal');
});
</script>
I am able to load the modal, but the submit button does not function.
You haven't provided enough information to solve the problem, but I will take an educated guess.. You probably have a JavaScript method which handles your form submission. This method is bound to a click event on a button displayed within your modal. The binding probably looks something like this:
$(document).ready(function() {
$('.submit').click(function() {
handleForm();
});
});
The problem is that the submit button was not part of the DOM when the page loaded and the binding was executed. What you want to do is use the .on() method and delegate to a node further up the DOM tree which IS part of the original page load. For example:
$(document).ready(function() {
$('body').on('click', '.submit', function() {
handleForm();
});
});
I have the page (index.php) that contain one link with id="t1" and one div id="container".
<a id="t1" title="Users" href="utenti.php">Users</a>
<div id="container">
<!--Where does the contained-->
</div>
When I click the link I get a built-in external page (utenti.php)
This is code of Ajax:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
and so far all is well, but if I click a link in the page that is included (utenti.php) the page is not incorporated in the same div but is opened in a direct manner.
I tried to put in the file .JS the code Ajax, to recognize the ID of the links transforming into:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
$("#click").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
Where #click is id of the link contained in the page Utenti.php,but even so
I do not incorporate the page in the div.
I also tried to include directly the page with the script inside the page utenti.php but I recognize the first link (which is fine) but everyone else does!(not all other!)
If I understand correctly this system does not include actually the page as would the classic include of PHP.
He gives him also the values already included in the index is more a kind of visualization,only that I haven't understand how to pass the value of the links contained in utenti.php inside the main page index.php.
It should be
$(document).on("click","#t1",function(e){
e.preventDefault();
var href = $(this).attr("href");
$("#container").load(href);
});
If you want links on the page that is opened in the div to also be targeted to the div you can try a delegated click handler on the div itself.
$(document).ready(function () {
$("#t1").click(openLinksInDiv);
$("#container").on("click", "a", openLinksInDiv);
function openLinksInDiv(event) {
//$("#container").hide();
$("#container").load($(this).attr("href"), function () {
$("#container").show();
});
event.preventDefault();
}
});
Demo: http://jsfiddle.net/AN56C/
Or if you want all links on the page to open in that div, use:
$(document).on("click", "a", openLinksInDiv);
Noting that loading pages via Ajax won't work for any and all pages from external domains, but will work for pages from your own domain.
This whole thing seems to be the perfect case for an iframe rather than a div, in which case you could have links to external domains.
I have two Ajax functions that are on the same div, the first one executes when complete page is fully loaded and call the ccslider method, instead the second one checks which menu ID I clicked, on the menu, to load dynamically different contents for different pages.
I can see the content loaded (eg: pictures) but unfortunately I don't see them in the ccslider; it seems that the slider is not executed.
But I know that works just because if I test it, removing the swapContent() function and place my PHP code with the MySQL query inside my main page the pictures are loaded inside the working ccslider.
Any hint on how to fix this problem?
$(window).load(function(){
$('#sliding').slider({
_Options: {
imageWidth: 300,
imageHeight: 200
}
});
});
function swapContent(cv) {
var url = "testing_cover.php";
$.post(url, {contentVar: cv}, function(data) {
$("#sliding").html(data).show();
});
}
You might have to call the slider method again inside the swapContent() function. Try this.
function swapContent(cv) {
var url = "testing_cover.php";
$.post(url, {contentVar: cv}, function(data) {
$("#sliding").html(data).show();
$('#sliding').slider({
_Options: {
imageWidth: 300,
imageHeight: 200
}
});
});
}
I have no access to the kind of plugin you're using, but from what it seems, you're probably modifying the HTML structure needed for it's functionality. Try inserting the HTML to a wrapper inside the #sliding element as opposed to directly in it.
I'm trying to load a PHP document dynamically which uses some jQuery events on the same script so after loading the webpage the jQuery effects don't work.
For example:
$(document).ready(
function(){
main();
function main()
{
$('#game1').hover(
function(){ $('#info1 p').slideDown('fast'); },
function(){ $('#info1 p').slideUp('fast'); }
);
$("#izquierda a").click(function()
{
$('#izquierda ul').hide();
$('#content').slideDown();
$('#menu').slideDown();
$('#contentMin').hide();
$("#gameContent").load("content.php", main()); // i try loading main() again so the effects would have some effect? doesn't work though
});
}
});
And in content.php I load data from a database and place it in a div called #game1 which uses the hover effect but it doesn't work after I loaded content.php. Without having it loaded from content.php the same script works.
So how can i make it work?
Sorry im new to this, thanks!
Since the server needs to render the code, you need to use AJAX here. Look up the jQuery ajax function: http://api.jquery.com/jQuery.ajax/.
$("#gameContent").ajax({
url: "content.php",
success: function(){ main(); }
});