I have a list of links which when clicked opens a link's corresponding DIV. These div's are hidden by default using both jquery .hide() and css display:none.
These divs all contain a php include to a file with a jquery product zoomer in, and because of the way I've made it, only the first one works and the div's below in the source order fail to work (they are included, but the jquery doesnt work) as I'm assuming it conflicts.
I'd love to be able to fix this apparant conflict, but haven't a clue what the issue may be, and as the site is "secret" I can't show the source here without giving away what it is.
So, i was thinking - instead of including these files via php, have them load in when the link is clicked, so only one of these includes is in the page at any one time!
Is this possible using jquery and some php?
--- edit ---
On further investigation - thanks to some of your comments below, it looks like jQuery's .load() looks suitable, but won't work for me. Here is my jQuery:
`
$('.urbaneCarousel li.dowrImg').click(function(){
$('ul.urbaneCarousel').hide();
$('.dowrDiv, .dowrDiv div').show();
$('.dowrDiv .insert').load('path/to/dowr.php');
return false;
});
`
Any advice? I'm 100% certain the path/to/ part is correct.
JQuery .load http://api.jquery.com/load/ | I guess you have to try to play with .load =)
It sounds like you might have some conflicts between those php files. it shouldn't be an issue to include different php's into your hidden divs at all. In any case, couple ways you can do this:
Include all your content via php upfront and simply show the divs on the browser (sounds like what you're doing)
< div id='mydiv1' style='display:none'>
< ?php include('myfile1'); ?>
< /div>
< div id='mydiv2' style='display:none'>
< ?php include('myfile2'); ?>
< /div>
etc.
Then, on some click event, you would do $("#div1").show(), etc.
or
2) simply create your divs empty and bind click events to the .load or .get calls for specific divs
so let's say you have two buttons btn1 and btn2 for those divs.
$('#btn1').bind('click', function() {
$("#div1").get('myfile1');
$("#div1").show();
});
The only problem with the second solution that it will go to the server to fetch data every time button is clicked.
UPDATE
try specifying full path in your .load or .get just to be safe. That might be giving you problems too. Here's a quick example (I am using codeIgniter, thus base_url() reference)
$('#btn_trigger').live('click', function(){
$("#dowrInsert").load("<?php echo base_url();?>auth/index");
});
<input type='button' value='Trigger' id='btn_trigger'/>
<div id="dowrInsert">
My text
</div>
This works fine
Well, I managed to resolve the conflict which was leading to me needing to use the .load() method.
I'm sure there was something within my wordpress theme which was causing this to mess up, so thanks to all those who helped me looking for ways round this, but I managed to accidentally fix my initial conflict in any case, so no longer need the .load() method as a workaround.
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 am trying to load a specific portion of an article with using of jquery load() function when a tab is clicked. The tab is inside an article and trying to show another article within the first article from where the tab is being clicked. The jquery code I have put inside the template.php of choosen template. The main problem is that when I click nothing is comming inside the first article under the tab. I am using joomla2.5.11 version. Please give some suggestion.The jquery code what I am trying is shown below:
$(function(){
$("h3.menuheader").click(function(){
$(".active-tab").removeClass("active-tab");
$(this).addClass("active-tab");
$(".tabcontent-ul").slideUp();
$(".tabcontent").load("http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1",function(){
$(".tabcontent").slideToggle();
});
});
});
Unfortunately I don't think you've provided enough to diagnose this issue. But perhaps I can help with how I would diagnose.
To start with, try this instead:
// http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1
$(".tabcontent").load("http://www.google.co.uk",function(){
$(".tabcontent").slideToggle();
});
Then open up your developer tools and see if a call is being made to load that data.
If it is, then you need to consider that it might be loading the data and putting it in another element you can't see.
So to test, create a new container on the page near your footer, which you know will be visible with a specific #ID like <div id="testID"></div> and load into that. Once that is working, look to confirm your .tabcontent element is the one you want using something like console.log().
so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
First I want to say that the code in jsfiddle works exactly as I'm expecting. However, when I try to insert it in my page, it does not work.
I am using
get.ajax
To move html with php a mysql data into a div named #latest-divs. I have a form with an
input#search
button that gets
val()
when
.bind('input property...)
and checks if there is exact match in the child divs of #latest-divs. I call these child elements
#latestblock
If there is exact match, then the event should execute, which, as I mentioned above, works in the jsfiddle but dies on my site. I have attempted everything I could think of:
Load in php file
Load from head
Load from body
Load with and without "CDATA"
Change my jquery version
My site is codefault (dot) org.
The jsfiddle link is http://jsfiddle.net/gAnyM/10/.
As of right now, I am loading the second part (random positioning of divs) from script/latest-topics.php and the first part in head, from index.php.
are you sure you have it inside a:
$(document).ready( function() {
// code here
});
?
The dom needs to be ready before you bind things
jsfiddle adds this for you automatically
Try another kind of event
$('input#search').bind('change keyup', function()
I wish to do something iframe-like with my div i've got going here.
Basically, i've gotten as far as making links change the content of the div like so:
Open file
This works pretty well, sadly though, if i make another link inside that to change the content back to the first file, the server gets stuck in an infinite loop and crashes.
I really am just trying to find some way to dynamically change content, and to fetch that content from a file using php. If my way of approaching this is completely ludicrious, i do appreciate suggestions.
I think the best and easiest way is to use jQuery:
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").load("file.php");
return false;
});
</script>
Open File
<div id="maincontent"></div>
This script will load content of file.php into selected div using ajax call.
This looks like a good place for jQuery's load() function. Just give the div an id, add a click event to the link and have the event load the contents of your php script into the div. Maybe append a class (e.g., 'updated') to the div when you load the new data. That way your click event can check is('.uploaded') on the div and switch it back when the link is clicked again.
Put divs inside #maincontent that hold the different content that you want. Give the divs IDs. When the link is clicked hide/show the appropriate content
This is a similar thread: Tabbing in PHP?
Firstly, I'd suggest not building the event handler like that. For one thing you'll have to be really careful you correctly escape the content. I would do it this way:
<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>
and then manipulate those with Javascript. You could either set the innerHTML or simply hide/show the relevant divs. So:
<script type="text/javascript">
var content = 1;
function swap_content() {
document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
if (content == 1) {
content = 2;
} else {
content = 1;
}
}
</script>
Open File
Alternatively you could just hide/show them as appropriate rather than copying content.
Lastly, while not required this is much more trivial to do in a Javascript library like jQuery.
To me it sounds like you should use AJAX. On the clickevent (which you also shouldn't bind with inline code), you would instead load the content with an XHR request.
To make life easier for you I would recommend looking at a JavaScript Library, where my personal favorite would be jQuery (www.jquery.com). To achieve what you are trying to do you would just do:
$('#id_to_the_a_tag').click(function() {
$("#maincontent").load("file.php");
return: false;
});