I'm trying to load a StatCounter tracking script after the form has been successfully sent. Here's the code:
$.ajax({
type: "POST",
url: "css/sendmail.php",
data: dataString,
success: function(data) {
$('#script').load('css/script.html', function() ({
$('#overlay').css('visibility','hidden');
clearForm();
$('#alert').slideDown().delay(5000).slideUp();
});
}
});
This is the tracking script:
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=3886809;
var sc_invisible=1;
var sc_security="05496a3d";
</script>
<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter">
<a title="visit tracker on tumblr" href="http://www.statcounter.com/tumblr/" target="_blank">
<img class="statcounter" src="http://c.statcounter.com/3886809/0/05496a3d/1/" alt="visit tracker on tumblr" ></a></div></noscript>
<!-- End of StatCounter Code -->
I checked my stats and it works. The only problem is that the code is being executed twice. The first one shows up as "http://example.com/index.html" and the second one as "http://example.com/index.html#".
Couldnt it be just as simple doing it like
<div style="display:none" id="tracker">
<!-- PUT STATCOUNTERHERE -->
</div>
and in the success function do the following
$('#tracker').show();
The other way would to store the code as a var
var statcode = "<script> blahblahblah.....";
and then on success
$('#whereuwanttoshowit').html(statcode);
Related
I'm using jQuery and Ajax to load a bunch of divs into a scrollable div ("letterHolder"):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$(".letterHolder").html(result['letter_array']);
}
});
</script>
</head>
<body>
<div class="letterHolder">
</div>
</body>
</html>
The PHP script retrieves a list of filenames from the database and loads them into letterHolder, so it ends up looking like this:
<div class="letterHolder">
<div class="drag_letter">file1</div>
<div class="drag_letter">file2</div>
<div class="drag_letter">file3</div>
etc.
</div>
Now, I want to make those filename divs draggable, but this is not working:
$(".drag_letter").draggable({
cursor: 'move',
revert: true,
helper: 'clone'
});
It doesn't work if I put the draggable code into the page header, nor does it work if I put the code at the end of the page.
This was working fine before I tried creating the divs using Ajax.
I assume the reason this was working before you were using AJAX, but is not working with AJAX, is because you are calling draggable() with a selector for elements which are not yet in the DOM. If you call draggable() on the elements after receiving the AJAX result and appending the elements to the DOM it should work.
Using jQuery or java script append() function for adding DOM into an element instead of html()
add draggable after appending elements
you should send file names Like file1... file2... as a Json array From server
and rewrite this:
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$.each(result,function(k,v){
$(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
cursor: 'move',
revert: true,
helper: 'clone'
}));
});
}
});
</script>
I have not been able to use JQuery/Ajax to load the content of my PHP file into a div tag.
Here is my page that is loading the file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function init() {
reloadChat();
setInterval (reloadChat, 5000);
}
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(){
$("#chatmenu").load("chat.php");
},
});
}
</script>
<body onLoad='init()'></body>
<div id='chatmenu'></div>
The PHP file I am loading (chat.php) is in the same folder, and is just an echo statement:
<?php echo "test"; ?>
To make sure it was not a problem with my Javascript functions, I added an alert under the success function, and it did alert me every 5 seconds, so I think it is something with the load statement.
Use .load() straight away, no need to make an Ajax request first:
function reloadChat() {
$("#chatmenu").load("chat.php");
}
Update:
I notice that in your example code, you close your body-tag before your div element.
<body onLoad='init()'></body> <!-- This ain't right -->
<div id='chatmenu'></div>
Try this instead:
<body onLoad='init()'>
<div id='chatmenu'></div>
</body>
Try this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function init() {
reloadChat();
setInterval (reloadChat, 5000);
}
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(response){
$("#chatmenu").text(response);
},
});
}
</script>
<body onLoad='init()'></body>
<div id='chatmenu'>
</div>
Also, for the love of god, please use an up-to-date version of jQuery
It looks your first request from $.ajax will return 'test', and then you're using that as the URL for $("#chatmenu").load.
Try this:
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(data){
$("#chatmenu").append(data);
},
});
}
Or, if you want to replace the contents of #chatmenu the method posted by Christofer Eliasson where you just call $("#chatmenu").load("chat.php") in reloadChat will work.
Putting it all together:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="chatmenu"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
setInterval (function() {
$("#chatmenu").load("chat.php");
}, 5000);
});
</script>
</body>
</html>
this is what i have in the head tags of my html page to load the facebox plugin:
<!-- This is for the facebox plugin to work -->
<link href="<?php echo base_url();?>styles/facebox/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>styles/facebox/lib/jquery.js" type="text/javascript"> </script>
<script src="<?php echo base_url();?>styles/facebox/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : "<?php echo base_url();?>styles/facebox/src/loading.gif",
closeImage : "<?php echo base_url();?>styles/facebox/src/closelabel.png"
})
})
</script>
this is the code for my div
<?php if(isset($$j)) : foreach($$j as $row) : ?>
<div class="single-result" id="single-result">
<div class="name"><?php echo $row->Name; ?></div>
<div class="description"><?php echo $row->Description; ?></div>
</div>
<?php endforeach; ?>
<?php else : ?>
error here
<?php endif; ?>
what i am wanting, is some ajax code that calls a function when the user clicks on the div id="single-result" so that it makes an ajax call to a php controller that gets the data from the database and then loads the view into a facebox modal window.
The part i am unsure about is how to make it load into a facebox modal window, l know how to use ajax calls to make it send data to a file and then load a view into a certain div on the page, l just want it to load it into the modal window instead of a certain div on the page.
Is this possible at all? (also i am using codeigniter for the php framework)
here is my ajax code which would load the ajax request results into the content-right div when the user clicks on div.
<script type="text/javascript">
$("#single-result").click(function() {
var form_data = {
ajax: '1',
itemcode: "<?php echo $row->id; ?>"
};
$.ajax({
url: "<?php echo site_url('ajax/item_info_right'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
$('#content-right').html(msg);
}
});
return false;
});
</script>
<!-- END -->
how do i modify this code above to make it work with going into a facebox modal window? I know facebox provides this code below, but i have no idea what to do with it?
jQuery.facebox(function() {
jQuery.get('code.js', function(data) {
jQuery.facebox('<textarea>' + data + '</textarea>')
})
})
It's not really clear what you're after...
If what you want is to have the data returned from the ajax POST to be populated into a facebox, simply call facebox on the success callback of the ajax post:
$("#single-result").click(function() {
var form_data = {
ajax: '1',
itemcode: "<?php echo $row->id; ?>"
};
$.ajax({
url: "<?php echo site_url('ajax/item_info_right'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
jQuery.facebox(msg);
})
});
alternatively, it looks like if you want the facebox loading graphics while the post is processed, you can wrap the ajax POST in facebox function:
$("#single-result").click(function() {
jQuery.facebox(function() {
var form_data = {
ajax: '1',
itemcode: "<?php echo $row->id; ?>"
};
$.ajax({
url: "<?php echo site_url('ajax/item_info_right'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
jQuery.facebox(msg);
})
});
})
})
I am very new to Jquery and ajax so please be kind.
i am making a request to the server using jquery $.ajax, the ajax pulls the image from the image id stored on the server/database when the user clicks on a thumbnail of which there are loads. All works fine except with the following code i can only click on any of the thumbnails once to load the big picture from the database, after that no other thumbnail works.
Can anyone help?
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
function getimage(data){
var img = new Image();
$(img).load(function(){
$(img).hide();
$.ajax({
type: "GET",
url: "name.php?",
data: "name=" + data,
success: function(){
$("#loader").removeClass("loading").append(img);
$(img).fadeIn("slow");
}
});
}).attr("src", data +".jpg");
}
</script>
</head>
<body>
<h1>Image Loading</h1>
<div id="loader" class="loading">
</div>
<a href="name.php?name=image1" id="image1" onclick="getimage('image1'); return false;"/><img src="image1_th.jpg" /></a>
<a href="name.php?name=image2" id="image2" onclick="getimage('image2'); return false;" /><img src="image2_th.jpg" /></a>
<a href="name.php?name=image3" id="image3" onclick="getimage('image3'); return false;"/><img src="image3_th.jpg" /></a>
try this:
function getimage(data){
var img = new Image();
$(img).load(function(){
$(img).hide();
$.ajax({
type: "GET",
url: "name.php?",
data: "name=" + data,
success: function(){
$("#loader").html(''); // you need to remove the old image
$("#loader").removeClass("loading").append(img);
$(img).fadeIn("slow");
}
});
}).attr("src", data +".jpg");
I am using jQuery to load a page by AJAX using $.ajax (suppose test.html).Its a simple HTML document with a few buttons and associated animations upon clicking them (also using jQuery).The .click() properties associated are working fine when I load the page directly but the buttons fail to respond when I click them in the AJAX loaded version.Since I am too tires to actually explain all the glum that I am doing, I am simply writing all the code below, apologies for this. Here are the required codes in the files.
<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="c/js/jquery.js"></script>
<script type="text/javascript" src="c/js/jtry11.js"></script>
<link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
<button id="go1">Load Something Using AJAX</button>
<div id="msg"></div>
<div id="showButton">
<button id="showLoadedPage">Show the Page</button>
</div>
<div id="results"></div>
</body>
</html>
and the next
$(document).ready(function()
{
$('#results').hide();
$('#msg').hide();
$('#showButton').hide();
$('#loading').hide();
$('#loaded').hide();
$('#load').live('click', function()
{
$('#load').hide();
$('#loading').show();
$('#msg').show('fast');
$.ajax({
url: 'test.html',
cache: false,
success: function(html) {
$('#results').append(html);
}
});
$('#msg').ajaxSuccess(function(evt, request, settings){
$(this).append('Click the Button Below to View the Page');
$('#showButton').show('slow');
$('#hideLoadedPage').hide();
$('#loading').hide();
$('#loaded').show();
});
});
$('#showLoadedPage').live('click', function() {
$('#loaded').hide('slow');
$('#msg').hide('slow');
$('#results').show('fast');
$('.shower').hide();
$(this).hide();
$('#hideLoadedPage').show();
});
$('#hideLoadedPage').live('click', function() {
$('#results').hide('fast');
$('.shower').hide();
$(this).hide();
$('#showLoadedPage').show();
});
$('.hider').live('click', function() {
$('.shower').show();
$(this).hide();
$('p.one').hide('slow');
$('p.two').hide('medium');
$('p.three').hide('fast');
});
$('.shower').live('click', function() {
$('.hider').show();
$(this).hide();
$('p.one').show('slow');
$('p.two').show('medium');
$('p.three').show('fast');
});
$('p.*').live('click', function() {
$(this).hide('slow');
if( $('p').is(':hidden') ) {
$('.shower').show();
}
if( $('p.*').is(':hidden') ) {
$('.hider').show();
}
});
});
and the last
<!-- test.html -->
Page Loaded by Ajax.
Not the original Page
<center>
<button class="hider">
<img src="c/images/zoom_out.png" alt="zoom_out" />
Hide 'em
</button>
<button class="shower">
<img src="c/images/zoom_in.png" alt="zoom_out" />
Show it
</button>
<p class="one">Hiya</p>
<p class="two">Such interesting text, eh?</p>
<p class="three">The third Paragraph</p>
</center>
I hope I am not making some big time mistake?
Sounds like you need
$('#go1').live('click', function() {});
$.fn.live, as event handlers are only registered on initial dom creation, and you're repopulating the DOM and those aren't attached.
More info # http://docs.jquery.com/Events/live
If i'm reading that right you are adding the click handlers at the beginning. These only affect current buttons. You may just need to change that to a Live event.
$("#peopleResult_list").on('click','a', function(event){
//do you code here
});
on event work for current dom in your page and any dom loaded by ajax in the future