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");
Related
I've got some HTML with this image and this data-id.
<img id="test" src="image1.png" data-id="12345" />
I would like to change image1.png for image2.png, or change image2.png for image1.png when the image is clicked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#test").click(function () { var $id = $(this).attr('data-id') });
$.ajax({
url:"test.php",
type: "POST",
data: { id = $id },
success:function(){ }
});
});
</script>
And here is my test.php script.
<?php echo $dataid; ?>
I meet some difficulties with Ajax and JQuery because I'm not used to it...
store the image in a div. whenever click on image retrieve the id and pass to test.php via ajax and echo the response inside the div
mainpage
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#toggle").on('click', '#test', function()
{
var $id = $(this).attr('data-id');
$.ajax({
type: "POST",
url: "test.php",
data: { id: $id },
success: function(theResponse) {
$('#toggle').html(theResponse);
}
});
});
});
</script>
<div id="toggle">
<img id="test" src="image1.png" data-id="12345" />
</div>
test.php
<?php
# Get Id here
$id = isset($_POST['id']) ? $_POST['id'] : '';
# for testing; remove this
echo $id;
# change here date-id and src; if it is dynamic do the database select and display image
echo '<img id="test" src="image2.png" data-id="54321" />';
?>
I am trying to change the value of a span after using jQuery.ajax.
JavaScript
$(document).on('click', '.kssico', function(event) {
var for_uid = $(this).parents("li").attr('data'),
for_name = $(this).parents("li").attr('unme'),
dataString = "for_uid=" + for_uid + "&for_name=" + for_name;
$.ajax({
type: "POST",
url: "include/ajax.php",
data: dataString,
success: function (html) {
if(html=="300") {
$('#myModal .modal-body p').html("Error Please Try Again.");
$('#myModal').modal('show');
}
else {
$(this).parents("li span.mi-val").html(html);
$('#myModal .modal-body p').html("The Requested Action Has Been Notified To Your Friend.");
$('#myModal').modal('show');
}
}
});
});
HTML
<li class="mispan main-span" >
<div class="thumbnail">
<h3 class="miheader">Dewashree Singh</h3>
<a >
<div class="miprofile-pic-cnt" ></div>
</a>
<div class="caption">
<p>
<a href="#" class="btn kssico miclickks">
<img src="/lisps.png"><span class="mi-val">0</span>
</a>
<a href="#" class="btn bdico miclickbd">
<img src="/besd.png"><span class="mi-val">1</span>
</a>
</p>
</div>
</div>
</li>
When I click on a.miclickks it should complete the Ajax call and return a value too be placed inside the span on the button anchor. However, nothing is being changed!
jsFiddle
I don't know what your whole code looks like, but you should be able to modify this to do what you are trying to:
$('#id').on('click', function() {
var that = this;
$.ajax({
url: 'wherever.php',
success: function(html) {
$(that).find("li span.mi-val").html(html);
}
});
It looks like you have two problems. The first is that as #Barmar posted above, mi-val is a child of micclickks, not a parent. The second is that your ajax complete function is asynchronous, so $(this) isn't what you expect it will be. Both of these are solvable though.
Your code is a bit messy and your html is missing the proper attributes, but this is I think roughly what you want:
$('.kssico').on('click', function(event) {
var for_uid = $(this).parents("li").attr('data'); //the li element in your html doesn't have a data attribute
var for_name = $(this).parents("li").attr('unme'); //the li element in your html doesn't have a 'unme' attribute
var dataString = "for_uid=" + for_uid + "&for_name=" + for_name;
$.ajax({
type: "POST",
context: this,
url: "include/ajax.php",
data: dataString,
success: function (html) {
if(html=="300")
{
$('#myModal .modal-body p').html("Error Please Try Again.");
$('#myModal').modal('show');
}
else
{
$(this).parents("li span.mi-val").html(html);
$('#myModal .modal-body p').html("The Requested Action Has Been Notified To Your Friend.");
$('#myModal').modal('show');
}
}
});
});
I have some trouble with zend framework and ajax.
In a view I have a div with tabs. When I click on the UnitTab "#tabUnits" the Unit view is displayed with a list of items. There is also a link to add new Units, so the add view is loaded into the tab.
The link to add an unit is:
<a id="addUnit" href="idBuilding/<?= $this->idBuilding ?>" href="#"><img width="16" height="16" src="/images/icons/fugue/plus-circle-blue.png"></a>
and the ajax call is :
$(document).ready(function(){
var url = '/unit/add/'+$("#addUnit").attr('href');
// ADD
$("#addUnit").click(function(event){
event.preventDefault(); // link is not executed
$.ajax({
url: url,
type: 'GET',
success: function(data) {
$("#tabUnits").html(data);
},
error: function(){
alert('An error occurred, please check before continue...');
}
});
});
});
When no error occurred the units are added and the list is displayed again.
How can I now do the same when I want to edit an Unit, knowing that the id is changing?
It has not much in common with ZF, it's more just jQuery. If you want to use the same AJAX call for more elements, just change url variable. Something like (not tested):
<a class="link" data-url="add" id="addUnit" href="idBuilding/<?= $this->idBuilding ?>" href="#"><img width="16" height="16" src="/images/icons/fugue/plus-circle-blue.png"></a>
<a class="link" data-url="edit" id=editUnit" href="idBuilding/<?= $this->idBuilding ?>" href="#"><img width="16" height="16" src="/images/icons/fugue/plus-circle-blue.png"></a>
$(document).ready(function() {
var url;
// ADD
$(".link").click(function(event){
event.preventDefault(); // link is not executed
url = '/unit/' + $(this).data('url') + '/' + $(this).attr('href');
$.ajax({
url: url,
type: 'GET',
success: function(data) {
$("#tabUnits").html(data);
},
error: function(){
alert('An error occurred, please check before continue...');
}
});
});
});
More about data parameters: http://api.jquery.com/data/#data-html5
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'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);