I'm trying to add the following syntax to existing page in order to add the social media icon (linkedin, fb and twitter) into the page, but always bumped and it's not showing on the page.
I'm new especially for ajax and I don't know where is my mistake, I just want to load the icon on the end of the news.
Here are my code
<!--SEA New Add-->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("body").live("runScripts", function(){
$(init);
function init() {
$.get('news-sharesocial.html', inject);
}
function inject(data) {
debugger;
$('.news_sharesocial').html(data);
//$('body').html(data);
//document.write(data);
}
});
$('.news_sharesocial').trigger("runScripts");
//$("body").trigger("runScripts");
});
</script>
NOTE:
I put the code on the end of the page since this is only for news and this is a template.
Appreciate any help on this, I've been strugling with this for quite some time.
Thank you very much
-sea-
Very first thing you are using very old version of jQuery and live is deprecated tag in newer version.
Second you need to modify the code as below where you need to trigger event attach to body not to
news_sharesocial
$(document).ready(function(){
$("body").live("runScripts", function(){
$(init);
function init() {
$.get('news-sharesocial.html', inject);
}
function inject(data) {
debugger;
$('.news_sharesocial').html(data);
//$('body').html(data);
//document.write(data);
}
});
$("body").trigger("runScripts");
});
As you have attached the event to body so it will be triggered from same element.
Related
I am facing some problem with pagination inside of jquery tabs .I have used Ajax pagination for that it works good but unfortunately when I click on any page no (in pagination) second time .Then it breaks the link .
Please look at the front view how it works:
http://kelts.wpengine.com/7664-top-o-the-morning-312/
open recent related posts->click on any page of pagination
please make sure that I am using wp-pagination();.
<script type="text/javascript">
jQuery(".larger.page").live("click", function(e) {
e.preventDefault();
var href = jQuery(this).attr("href");
show_posts(href.replace(/.*page\//, ""));
});
show_posts(1);
});
function show_posts(l) {
jQuery.get("<?php bloginfo('template_directory')?>/fetch-blog-post.php", {
pageno : l
}, function(data) {
jQuery("#show_posts").html(data).show();
});
}
</script>
Change your selector jQuery(".larger.page").live(...) to jQuery(".larger.page, .page.smaller").live(...).
Onces you visit a link the class larger is replaced by smaller that is why the link is broken in the second click.
why don't you try
$('.wp-pagenavi').on('click',function(){
// code
});
because .live is deprecated from now on.
From what I see the problem is that you get paginator itself as part of the AJAX response and don't bind events to a new DOM elements.
I am trying to get this jquery tool to work with my website for file uploads: https://github.com/blueimp/jQuery-File-Upload and I have it working for the most part. The only issue I am having is trying to find a place where I can make it redirect to a new page to display the results of the upload instead of displaying them on the same page. I want to have the option for the users to do things with the images and files they just uploaded, and a new page makes more sense for this than using the same page over and over and over again...
Can anyone tell me from experience of understanding something in the documentation/code that I didn't grasp on how I can do this? Thanks :) Please note that i want the page to be redirected at the end of ALL of the uploads and not after the first if there are four more. I will be storing the data in a PHP session to access on the next page.
Should be like this (in this case redirecting to http://stackoverflow.com):
<script>
$(function () {
$('#fileupload').bind('fileuploadstop', function (e) {/* ... */});
});
</script>
Check out the docs.
<script>
$(function () {
$('#fileupload').fileupload({
// ... additional parameters
complete: function (e, data) {
window.location = "http://www.stackoverflow.com";
}
});
});
</script>
The plugin has an events called onComplete and onCompleteAll. Use them.
On my site in the bottom left hand corner there's a chat tab that you can open and close with a click. The button is named 'trigger' and the chat panel is named 'panel'. I'm not familiar with javascript really, I just cobbled this together from existing scripts, anyway, the code I use that works this is:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
What happens though is if the user opens chat then goes to another page, the chat must be reopened again. I need a way to keep the chat open if it's already open.
Maybe something in the body onload tag? And using sessions?
Note: My site's in php
With jquery-cookie you can save state of the chat class toggle. Something like this:
<script type="text/javascript">
$(document).ready(function(){
if($.cookie('panel-active')) {
$(".trigger").toggleClass("active",true);
}
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
$.cookie('panel-active', $(this).hasClass("active"), { path: '/' });
return false;
});
});
</script>
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you
There's a great tutorial on IBM's website which walked me through a simple search/results list using jQuery,PHP and Ajax.
I was able to make it work and it's really cool.
One problem. I want the results to be hyperlinks and I can't get any java script to run on the results.
Here is the script I have (includes what was in the tutorial plus the additional script necessary to ovverride the hyperlink, click behavior):
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
$("a").click(ClickInterceptor);
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
function ClickInterceptor(e)
{
window.alert("Hellow World!");
return false;
}
</script>
If i put the following html under the <body> tag:
this will work
That will display the alert window.
However, if I change the results to hyperlinks (found in find.php, listing 7 from the tutorial):
$string .= "".$row->name." - ";
It does not work.
Any idea on how to fix this?
The click function binds when it is run. You need to change it to a live binding.
$("a").live("click", ClickInterceptor);
Or you can just bind it when you update the search results by putting the following after $("#search_results").html(data):
$("#search_results a").click(ClickInterceptor);
The problem is pretty simple actually, $("a").click(ClickInterceptor); will only look for items that currently exist in the DOM. All you need to do is change that line to this:
$("a").live("click", ClickInterceptor);
I'd also advise taking the time to read more about jQuery's Events/live.