I am using jquery ajax get method.
$.ajax({
url : 'url',
type : 'get',
cache : false,
data : {'timestamp' : '<?php echo time();?>'},
beforeSend : function()
{
},
success :function()
{
}
});
ajax cache:flase is not seem not work.I don't know what is wrong.
when a visitor click an image, will be appear image thumbnails lists.
and when each thumbnails click ,will be appear big image,But it not work.
My english is bad.please check website url.Someone please help me.
Website Link
Placing this at the top of my ajax.js worked for me
$.ajaxSetup( { cache : false } )
Related
I've implemented a tumblr post button following their docs, and the popup works great. However, I need to pass in an image URL that is dynamically created on the page, rather than hardcoding in an image url. I'm trying to do this with jQuery.
HOWEVER, the inline script required to launch the 'post' popup fires, and prevents my jQuery (being triggered by clicking the 'post' button) from firing. I tried moving the inline tumblr script to my js, which allowed my jQuery to fire, but not the tumblr popup.
Ideally, the inline script would fire AFTER my jQuery, since the jQuery is the bit that generates the image URL I need to pass in.
Is there a way to do this, maybe with onLoad or something?
My button, as generated by Tumblr is this (sorry I can't get it on multiple lines for some reason):
<a class='tumblr-share-button' data-color='blue' data-notes='right' data-posttype='photo' data-content='image URL will go here' href='https://embed.tumblr.com/share'></a> <script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://assets.tumblr.com/share-button.js';ajs.parentNode.insertBefore(js,ajs);}}(document, 'script', 'tumblr-js');</script>
And my jQuery (that is not executing) is:
$('.tumblr-share-button').click(function(e){
var svg = $("#svg")[0];
svg.toDataURL("image/png", {
callback: function(img) {
var img = img.replace("data:image/png;base64,", "");
var imgurTitle = $("meta[property='og:title']").attr("content");
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {'Authorization': 'Client-ID ******'},
type: 'POST',
data: {'image': img, 'type': 'base64', 'title': imgurTitle},
success: function(result) {
imageURL = result.data.link;
$('.tumblr-share-button').data('data-content',imageURL);
},
error: function(){
console.log('error');
}
});
}
});
});
Any help would be tremendously appreciated!!!
I am working on some wordpress project and my owl content will load via ajax. Now, what happens, when i load content via ajax, it loads content but not show is slider. Here is javascript code that i have already done:
function runAjax(objects){
var $response;
$.ajax({
url:wpAjaxUrl,
async:false,
cache:false,
type:"POST",
//data:{'action':objects.action,'product_id':objects.product_id},
data:objects,
dataType:"json",
beforeSend:function(){
$(".loader_div").show();
},
success:function(response){
$response=response;
//console.log($response.subcategory_products);
},
complete:function(response){
if(objects.action=='get_product_images'){
// var owl1=$("#owl-related-accessories");
// owl1.data('owlCarousel').reinit();
$.getScript("http://localhost/inox/wp-content/themes/inox/js/jquery.min.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel-related-accessories.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/js/owl.js");
}
$(".loader_div").hide();
}
});
return $response;
}
There are so many ajax request so that i have created a general function for requesting ajax.I hope you understand well. Here you can see that i have reload all owl's javascript code.In the following code i have get ajax response and append in owl crousal div.
$("#owl-related-accessories").html($ajaxRes.relatedHtmlData);
You something ommit, it is not only need to download script $.getScript( also is need to run it to take effects on new created elements with JS. See all calls of functions in your html page (<script> with $( document ).ready(function() </script> and without it but is functions of carousel) and after run AJAXA call it all in Browser JS console and see if it have effect. Also see in your browser js consle if no erros after you run Ajax, because error stop js script run in place where error ocur
During ajax return success: Define owl carousel there. Means after returning ajax success, define owl carousel there.
success: function(data) {
//Return ajax success response here
jQuery('#cross_container').html(data);
//run owl Carousel here
jQuery('.cross-sell-box').owlCarousel({
items: 3,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true
});
I'm trying to do a post preview, which will appears in a new Fancybox iframe. Since couple of weeks I'm looking for some help or best practices, but I can't find it.
My main problem is to pass the data from form (before updating database) to Fancybox window. My AJAX skills are very poor, so maybe my problem isn't so hard.
Please check the code:
$('.preview2').fancybox({
fitToView : false,
width : 905,
height : 505,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
ajax: {
type: "POST",
cache : false,
url: "preview.php",
data: $('#postp').serialize()
}
});
And a calling link:
<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a>
I'm almost sure everything is fine with preview.php file, just posting the variables and printing it in right places.
Can someone check Fancybox / AJAX part?
As I mentioned in my comments, your preview button should submit the form via ajax to get the POST preview values (we'll use ajax instead of iframe) so :
<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>
Then you would need to bind the preview button to a manual on("click") method to submit the form via ajax firstly ....and then post the results in fancybox secondly like :
$(document).ready(function () {
$('.preview2').on("click", function (e) {
e.preventDefault(); // avoids calling preview.php
$.ajax({
type: "POST",
cache: false,
url: this.href, // preview.php
data: $("#postp").serializeArray(), // all form fields
success: function (data) {
// on success, post (preview) returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: false,
width: 905,
height: 505,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); // ready
See DEMO (feel free to explore the source code)
I don't like the solution, so I will post my own investigation.
Why writing code with 1. .on("click", ... 2. e.preventDefault 3. $.ajax 4. this.href just to call fancybox on success, that already has all this functions inside?
If you decide to use ajax instead of iframe (like in accepted answer) you could simply add type property to fancybox() call, cause it's beening checked, and pass all other
$('.preview2').fancybox({
type: "ajax",
ajax: {
data: $('#postp').serialize()
// url: "someurl.php" not needed here, it's taken from href
// if you need it, e.g. you have a button, not a link
// use "href" property that overrides everything
// not attribute, cause it's invalid
}
// href: "url_to_add_or_override_existing_one",
// all other effects
// afterLoad: function () { // other cool stuff }
});
EDIT As #JFK pointed it's not enough, you have to get form data each time you click the link, so beforeLoad() needed instead of data. Finnaly:
$('.preview2').fancybox({
type: "ajax",
beforeLoad: function() {
this.ajax.data = $('#postp').serialize();
}
});
You can remove all data-* atrributes too
FIDDLE
KISS
I have tried a more interesting way with fancybox that works,
in the fancybox page
var myvar;
$(document).ready(function(){
myvar = parent.$("#formvariwant").val();
});
I can't resize my fancybox, when I use ajax...
This is how my code looks like:
$(".button").click(function() {
var formData = $(this).closest('form').serializeArray();
formData.push({ name: this.name, value: this.value });
$.ajax({
type : "POST",
cache : false,
url : "<?php echo plugins_url(); ?>/kryssord-opplaster/opplasting/utfoerOppgave.php",
data : formData,
success : function(data) {
$.fancybox(data);
}
});
return false;
});
how do I resize the $.fancybox(data);?
I tried ".....$.fancybox(data, {'width': '50%', 'height': '75%'})..."
but that didn't work at all.. Thanks in advance!
Update:
Seems like I only had some errors in my HTML-code..
I had set <table><form></form></table> instead of <form><table></table></form>..
And somehow the way I've coded it now, if I set a stylesheet in the php-file (the url) it affects the page in the background as well.. So the best thing would be if I could get the ajax-page inside a iframe. However if I edit the fancybox-script to ..$.fancybox(data, {'type': 'iframe'}); i get a 403 error..
could someone help me modify the above code?
Try this, add this into html source <div id="successContainer"></div>
$("#successContainer").html(data);
$("#successContainer").fancybox({'width': '50%', 'height': '75%'});
Are you trying to resize it to a certain height and width, or just have it automatically resize to fit the content?
Try throwing this into the ajax success portion:
$.fancybox.resize();
Or try:
$.fancybox({'width': '50%', 'height': '75%'});
As for the update, I'm a little unclear of what you're trying to do, could you clarify? Why do you need the iframe?
is it possible using fancybox to post a var to the iframe when opens?
I currently have:
function fancyBoxLoad(element) {
var elementToEdit = $("#" + $(element).attr("class"));
var content = encodeURIComponent($(elementToEdit).outerHTML());
$.fancybox(
{ 'href': 'loadEditor.php' },
{
frameWidth: 750,
frameHeight: 430,
overlayShow: true,
ajax: {
type: "POST",
data: 'content=' + content
},
type: 'iframe'
}
);
}
It does seem that if I take away type: 'iframe' it will post data but it doesn't appear to be in the iframe and if I take away ajax: { type: "POST", data: 'content=' + content } instead it will open in an iframe but not post the data (the example above does the same)
So my question being can it be done?
If you're simply trying to put content in a iframe, why don't you use fancybox to create the iframe, and once you know it's been created, then access it via the reference that fancybox returns to you and set your content that way. I'm not sure you want to send the content to the server and back. Just wait for the iframe to load, then on ready, query an element within it and set the content.
Looking at the source for Fancybox v1.3.1 they are in fact mutually exclusive. If you don't feel comfortable diving into the source code and editing the plugin, you might try using GET variables in your HREF as a work around. It should effectively work like a post as it is an AJAX call, just make sure the backend can receive the GET variables.