I wonder whether someone can help me please.
I've put together this page which allows users to view a gallery of their uploaded images.
I'm now working on the deletion functionality, so that users can delete any image. From some really useful guidance from members of this site here, I've been looking at the jQuery POST method, unlinking the images from the server where they're stored.
From their guidance and subsequent research I've been doing, I think I can use the relative path i.e. $path.
I've come up with the following which I've tried to add to my script:
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ');
$(this).closest(".galleria-image"). fadeOut('slow');
$.ajax({
type: "POST",
url: "$path",
}
});
return false;
});
});
Unfortunately though, I've clearly done soemthing wrong because this has affected my gallery functionality and it no longer works. Perhaps, because I'm quite new to this, I've looked at it too simplistically, I'm not sure.
I just wondered whether someone could perhaps have a look at this and let me know where I've gone wrong.
Many thanks and kind regards
Your brackets don't match after the
$.ajax({
type: "POST",
url: "$path",
}
which is probably why the javascript is broken.
Related
I'm trying to call a function with a link in html. I found the following example:
click to run function!
if(isset($_POST['runfunction'])){
}
This works perfectly fine, the problem is that when I click the link, "?runfunction" keeps standing in my url bar. So when I submit a form on my page it goes totally wrong (it's way to long to upload here). I do some SQL queries and I'm getting weird values in my SQL database. When I type in just my normal url it works fine. So I'm pretty sure that's the problem. I found another example with ajax :
$("a").click(function(){
jQuery.ajax({
url: "path/to/controller",
type: "POST",
dataType: 'json',
data: {'mentod':'ExportExcel'},
success: successCallback,
error:failureCallback
});
});
I don't fully understand this example (because I never use AJAX) but my php script is included in the html page "include("")". So I can't type in url because it has to be the same page. Can someone give a little bit of info about this, or give an example of how I can fix this? Thanks in advance!
You can add a callback method then remove it from the url by javascript
function successCallback () {
url = window.location.href;
window.location = url.replace("runfunction", "");
}
Okie so I thought this was a neat looking bit of css and thought I would try to plug it into my website and replace my existing "recommend/recommended" bit of ajax/query that is working just fine, but is not as well, pretty.
I have gotten the text to update from "Love It" too "Loved It!" but I cannot get the numeric value (total loves/recommends) to update.
It is using that value of data-counter and I cannot seem to figure out the method to get that value to update after a successful ajax POST.
♥ Love it
<script type="text/javascript">
$(document).ready(function() {
$('#love').click(function(){
$.ajax( {
type: "POST",
url: "loved.php",
data: "id=123",
success: function(msg) {
document.getElementById('love').innerHTML = "♥ Loved!";
document.getElementsByAttribute('data-count').innerHTML = "<?=($TotalRecommendations+1);?>";
return false;
}
});
});
});
</script>
I have tried to use a few methods, include using the document.getElementsByAttribute('data-count').innerHTML = "<?=($TotalRecommendations+1);?>"; but I am getting stumped here. I also tried using document.getElementById('data-count').innerHTML but that did not work either.
Could somebody share with me what the technique is to get this data-count to be updated after a successful ajax post?
Change the way you are updating your attribute value as
document.getElementById("love").setAttribute("data-count","<?=$TotalRecommendations+1;?>");
So, I would like to know how to parse an xml document with JavaScript.
I've got it working in php (view below)
<?php
$xmlGmailFeed = file_get_contents("https://gmail_username:gmail_password#mail.google.com/mail/feed/atom/");
$unreadMessages = $xmlGmailFeed->fullcount;
echo $unreadMessages;
?>
But the only thing with this, is that it's running using the server's IP address and doesnt let users login to their gmail. It pops up saying that there was a suspicious login attempt on their account. So what Id like to know is how I would be able to do the same thing, but run it from the hosts computer. I was thinking javascript to do it? But please let me know if theres a better way!
Edit:
Heres the code that im using..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$.ajax({
type: "GET",
url: "https://mail.google.com/mail/feed/atom.",
dataType: "xml",
crossDomain: true,
success: parseXml
});
function parseXml(xml)
{
var results = $(xml).find("fullcount").text();
alert(results);
}
</script>
Here's a screen shot of my problem:
http://cbog.co.nr/SC.php?img=Admin/AE0BCBAA4F532BC69A932E5DDD8F14F2
and you can see for yourself, live at:
http://cbogausch.com/test.php
I believe you can just use a DOMParser. jQuery also offers .parseXML() if you're willing to use it.
Thanks to Samuel Liew and other great helpers, the issue has been fixed.
As putting everything here was a mess, and it was poorly explained in the overall solution, I dediced to make a explanatory in my own web site.
I leave the DEMO for you to see if that's what you're looking for, and I leave the TUTORIAL for you to learn how to do this.
TUTORIAL: http://santz.com.ar/blog/ajax-form-submit-open-modal-box/
DEMO: http://santz.com.ar/files/demos/ajax-form-submit-open-modal-box/
Hope I helped you! Thanks to all the ones that helped me!
#Samuel Liew, and other great helpers. THE ISSUE HAS BEEN FIXED. I'll leave corected code for future guys that need this.
The case: http://santz.net/index.contacto.html (no longer available)
THIS WAS THE PROBLEM:
Target: The "website" must open a dialog/modal box/modal window after successful form submission.
Issue: The form submits successfully but the dialog/modal box/modal window doesn't open (rarely, it does open if you make
another click...)
[Try it, that's why I gave you the link. There's no problem, the site
is mine and I recieve the messages]
I hope you can help me... the idea is quite simple! When the user submits the form, a dialog popsup instantly!
THANKS A LOT!
In this case, move the dialog function outside of the submit function:
$(function() {
$('#popup-wrapper').modalPopLite({
openButton: '#clicker',
closeButton: '#close-btn'
});
$('#contact-form').submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success: function() {
$('#contact-form')[0].reset();
}
});
return false;
});
});
I'm not quite sure how to word this.. but here goes :)
I have links similar to :
<img src='go.png'>
<img src='go.png'>
<img src='go.png'>
When someone clicks on the first link I want to run go.php?go=4a in the background, and change the icon on the link to stop.png, but also change the URL of this link to go.php?stop=4a.
If they think click the same link, I'd want to revert all this back to what it was.
Effectively making each link a go / stop toggle !
I seem to think jquery can do this, but I can't find any examples.
Anyone any ideas ?
Thanks :)
Provided you have jQuery loaded, and you have a container x which serves as your page content, you can use $.ajax to load dynamic content to the container and have it load/stop like:
$(function () {
$('a.tip').on(' click', function () {
var $this = $(this),
container = $('#x'),
prevHTML = container.html(),
req = {};
if ($this.hasClass('go')) {
req.abort();
container.html(prevHTML);
$this.find('img').attr('src', 'go.png');
$this.removeClass('go');
} else {
$this.find('img').attr('src', 'stop.png')
.end().addClass('go');
req = $.ajax({
url: 'go.php?go=' + $this.attr('id'),
type: 'get',
success: function (data) {
container.html(data);
$this.removeClass('go');
}
});
}
});
});
p.s. This is a rough example to get you started. Cheers!
As far as I know - what you want is not possible. Changing the URL refreshes the page, so your ajax will be lost in the nick of time.
You can use anchors though (for example if you're on go.php, you can change the url to go.php#go4a, and with the proper coding, you will be able to make the page work as if the AJAX ran.
About reverting, you will need to use a flag to see its state, then do the appropriate reverts. Not sure what you need, so this is all the information I can give you.