Since I am a beginner, I have a beginner's question.
Using the famous fancyBox plugin. It is called in the head like so:
$(document).ready(function() {
$(".fancybox").fancybox();
});
Normally the script is attached by adding the class-name:
<a class="fancybox fancybox.iframe">...</a>
My present difficulty arises because I would like to run the fancyBox pop-up after the user submits a form:
<form action="http://maps.google.com/maps" method="get">
...(google API stuff etc, etc)...
<input type="submit" value="...">
My research to this point has led me to conclude that I probably have to use onsubmit or onclick within the
<input type="submit">
However, my experimentation has proven a futile effort.
Any help would be greatly appreciated.
========================================
UPDATE: (1/7/2013)
I am withdrawing my question because I have apparently wandered into subject matter that is slightly above my head at the moment. I choose not to delete the question in case someone in the future may find something of some use here. Thank you for your help everyone.
My reason: it appears that Google directions does not permit display in <iframe>. That being considered, configuring a workaround for fancyBox would be far too complex. I am abandoning the fancyBox and have gone with plain old Javascript:
as shown here
Post the form using $.ajax gives you the greatest control. You can then control the success and error conditions from the client side.
To do this you will either need to catch the submit event:
$('#form').submit(function() {
ajaxUpdate();
return false;
});
Then create a function:
function ajaxUpdate(){
var formSerial = $('#form').serialize();
$.ajax({
url: '<url to post to>',
dataType: "text",
type: "POST",
data: formSerial,
success: function(text) {
$(".fancybox").fancybox();
},
error: function(text) {
alert('error in posting');
}
});
}
You can then do what you like in the success and error blocks.
To load a window you could add the following to your function:
if(confirm("Do you want to open the directions?")){
$.fancybox({
'titleShow': false,
'width': 370,
'height': 300,
'href': <URL>,
'type': 'iframe'
});
}
Using jquery submit buttoin it can be possible :
$('#target').submit(function() {
$(".fancybox").fancybox();
return false;
});
After fancy box 'ok' button click submit the form ..
Hope this idea will helpfull.
Related
I am currently trying to implement the WordPress Contact Form 7 Plugin into a WordPress-site I created. The theme uses jQuery to overwrite the default link behaviour and AJAX to load the requested page without actually reloading the whole page.
The problem is: The contact form works perfectly when the page where it is used on is loaded directly. However, if the page is loaded via AJAX, there are two strange behaviours: The Google reCAPTCHA widget is not showing up and after submit, instead of showing the div with the success-message, I am redirected to the themes "404" page. The mail gets sent successfully though. I use the plugin/contact-form in AJAX mode - so it makes an AJAX call itself to submit the data and handle the response without page refresh.
I am a bit overwhelmed where to start to solve this problem. Just for testing, I tried to hardcode all scripts from the direct pageload to the theme, so that they are also there when the contact-page is loaded via AJAX. Unfortunately, this didn't have any effect at all. I also tried to call the wpcf7InitForm() function of the plugin, as it was suggested in another question here - also with no success.
This is my ajaxload-script:
jQuery(document).ready(function($) {
// Targeting all internal links
$(document).on('click', 'a[href^="http://' + top.location.host.toString() + '"]:not([href*="wp-admin"])', function(event) {
event.preventDefault();
var url = $(this).attr('href');
$.ajax(url, {
beforeSend: function() {
if ($('#ajax-loader').length == 0) { $('body').append('<div id="ajax-loader"></div>'); }
$('#ajax-loader').fadeIn();
// Dimming static elements during loading
$('#mainbar').animate( { opacity: '0.5' } );
},
success: function(data) {
var data = $('<div />').html(data);
window.history.pushState('...', '...', url);
document.title = $(data).find('title').text();
$('#mainbar').html($(data).find('#mainbar > *'));
// Undoing design modifications to static elements
$('#mainbar').animate( { opacity: '1' }, 150 );
$('body').triggerHandler('reflow');
},
});
});
});
Help on this topic would be really appreciated and thanks in advance!
Couple ideas after reading through some stuff:
Might be a bug with the recaptcha - looks like the latest version specifically fixes recaptcha problems (not sure if they are yours though): http://contactform7.com/2015/11/23/contact-form-7-431/#more-16357
The div not showing up should be easy to debug by using absolute paths. In Wordpress, I usually use the bloginfo(); function. Try putting something like this in your form submit success callback to test path visibility between the AJAX and non-AJAX pages:
<?php
$pathCheck = bloginfo('template_directory');
echo $pathCheck;
?>
The problem with the div not showing up could also be how you are structuring the callback. From this question, it appears that the plugin has specific callback hooks you have to use that aren't in the documentation:
$(".your-form-class").on('wpcf7:mailsent', function(event){
// Show success div code would go in here
});
Great question btw. You used proper english and clearly explained your problem, pretty rare on S.O. Hope some of this gets you going.
I have a PHP page with a lot of includes which make up various parts of the page for a video website.
I have a comments section which submits information into a database (Which works fine). But I need to make it so when this is done only the included page/div refreshes.
This is the PHP:
<form id="song-comment-form">
<input type="hidden" value="<?=$rSong->id?>" class="song-id">
<textarea class="editor" id="song-comment-textarea"></textarea><br>
<input type="submit" value="Submit"><input type="button" value="Cancel" id="hide-song-comment-form">
<hr>
</form>
<div id="player-song-comments">
<?php $showComments?>
</div>
Here is my attempt at doing it with Javascript:
<script>
var $comments = $("#player-song-comments");
setInterval(function () {
$comments.load("/template/sections/player_comments.php #player-song-comments");
}, 30000);
</script>
This should reload just the comments section but instead, everything from this point onwards goes blank.
How it looks now when I press submit:
When I reload that page manually:
I don't want the whole page to refresh because it contains a video.
How can I make just that Refresh after submit is pressed OR every 30 seconds?
UPDATE:
I have tried using JQuery to execute this. I'm getting an error:
Fatal error: Call to a member function query() on a non-object in /home/content/58/12052758/html/template/sections/header.php on line 42
<script>
/*wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#song-comment-form').ajaxForm(function() {
alert("Thank you for your comment!");
});
}); */ //THIS IS LINE 42
$(document).ready(function() {
var options = {
url: 'template/sections/player_comments',
target: '#player-song-comments', // target element(s) to be updated with server response
type: 'post' // 'get' or 'post', override for form's 'method' attribute
};
// bind form using 'ajaxForm'
$('#song-comment-form').ajaxForm(options);
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#song-comment-form').ajaxForm(function() {
$("#player-song-comments").load('template/sections/player_comments.php');
alert("Thank you for your comment! The site is currently in maintenance and the comment won't show until you revisit this video");
});
});
});
</script>
For those interested. Here is the whole page: http://pastebin.com/c0kQ3tGp
You seems to load comments in PHP and as far as I know, PHP is only parsed once.
The simplest workaround I know is to use an iframe that you would refresh, but I'm not sure this is a good practice tho.
So there are two parts to your question:
How can I make just that Refresh after submit is pressed
You can use jquery-form for that. In your case, you can initialize your form to something like this:
$(document).ready(function() {
var options = {
url: 'your_form_action',
target: '#player-song-comments', // target element(s) to be updated with server response
type: 'post' // 'get' or 'post', override for form's 'method' attribute
};
// bind form using 'ajaxForm'
$('#song-comment-form').ajaxForm(options);
});
There are many other options you can play with.
OR every 30 seconds?
Try change your
$comments.load("/template/sections/player_comments.php #player-song-comments");
to
$comments.load("/template/sections/player_comments.php"); // remove the selector
According to the docs, the selector is used to insert fragments of the remote document. In other words, when load was executed, jQuery parses the returned document to find the element #player-song-comments. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.... I assume #player-song-comments is not part of your response?
I have a simple select2 control on my site placed in a div. When the site loads, everything works fine. However, if the html content of the div "simpleDiv", where the Select2 is placed, is loaded with Ajax, the Select2 is not showing the results anymore when triggered.
That means, in this case the Select2 data is got from the Server, but never shown in the Select2.
And this all happens just when the "simpleDiv" html content is loaded with Ajax. Otherwise, everything works fine.
Can anyone help, please?
<div id='simpleDiv'>
<input type="hidden" id="MedikamentID" name="MedikamentID" class="fixed-width4" />
</div>
<script>
$('#MedikamentID').select2({
placeholder: "[Medikament]",
allowClear: true,
minimumInputLength: 2,
ajax: {
url: "/Medikament/List",
dataType: 'json',
data: function (term, page) {
return {
query: term
};
},
results: function (data, page) {
return { results: data };
}
}
});
</script>
Whenever you change things using .html() or .innerHTML, essentially, the DOM gets reconstructed and all the javascript events and properties attached to them is lost. But the fix is simple. Just call Select 2 again after you finished inserting the new HTML. So something like:
$.ajax("example.php").done(function(data){
$("#simpleDiv").html(data)
$("#MedikamentID").select2(...) //rebuild select2
})
I attached a jsfiddle to illustrate this:
http://jsfiddle.net/HT3rP/1/
If I got your question correct, you may be having a similar problem related to this stackoverflow problem
You could try something like this
$(document).on("ready", "#MedikamentID", function () {
$(this).select2({
// options go here
});
});
I've been working on a little project that involves collecting/processing search results and I thought you guys may be able to lend a hand. I have a small script that takes a search value from a search input, processes it via PHP and then collects and inserts the results in a fancybox via JS. Thus far, all is going well but I can't seem to work out the next bit.
I can't manage to interact with any elements in the fancy box because it will reload the page (for example, previous and next buttons or search input). How would you go about loading new content or form inputs into a fancybox on the same page instance using AJAX?
HTML:
<form action="search.php" method="post" name="search" id="search">
<input size="35" value="" placeholder="Search" name="search" id="result" autocomplete="off">
<button id="check" data-fancybox-type="ajax" href="search/search.php" id="check">Search</button>
Script:
jQuery(document).ready(function(submit) {
$('#check').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: "search.php",
data: $("#result").serializeArray(),
success: function (data) {
// on success, post returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade'
});
}
});
});
});
The above script is largely basses on this post
Thanks for your ideas!
The fancybox API provides a number of event based callback functions for interacting with the fancybox elements, before, during and after the box is shown or loaded. This allows you a lot of flexibility.
I would use the afterLoad() callback function within the Fancybox2 API.
See this fiddle i put together: Fancybox afterLoad() callback to return a function
This is just my solution, I am still very much a student of js, so I can't say this is the best way, and I welcome feedback or edits.
Basically we will use the afterLoad() API function of fancybox so that upon successful load of the fancybox element driven from your successful $.ajax call a function is returned to then listen to the click event of an element loaded into your fancybox.
$.fancybox(echoData, {
// fancybox API options
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade',
afterLoad: function () {
return fancyUpdateMyWay = function () {
var a = Math.random();
var newHtml = "<h4>UPDATED=" + a + "</h4>";
$("#fancyResult").html(newHtml);
}
}
});
Note: I imagine that you will want to do further ajax calls from within the fancybox results, and here I only demonstrated a simple DOM update from jquery.
try changing your javascript to use 'click' instead of 'on'. this should do it
jQuery(document).ready(function(submit) {
$('#check').click(function (e) {
e.preventDefault();
$.ajax({
....
});
});
});
The $(element).scroll(function(){}); function isn't working for me when I put it into a js file but when I enter it into the console (just the scroll func), it works just fine.
I'm trying to do a scrolling pagination.
I've looked through my other js files and the only thing that I think could be conflicting is another one of the files has a $(document).ready(function(){}) but I'm pretty sure that's not the problem. I'm also using Dropkick to make pretty dropdowns but I doubt that's it either.
Here's the code, almost verbatim. It's basic for now until I can figure out how to get it to load.
$('#main').scroll(function(){
if(($('#main').prop('scrollHeight'))==
($('#main').scrollTop()+$(document).height()-10)){
//^there's a strange 10px empty space that needs to be accounted for
$('#loading').show();
$('#main').css('overflow','hidden');
addMore();
}
});
$(document).ready(function(){
addMore();
});
addmore.counter=0;
function addMore(){
$.ajax({
async: 'true',
url: 'http://mywebsite.com/bc/get',
type: 'post',
data: ({'offset':(addmore.counter)}),
success: function(data) {
$('#scrollingpagination').append(data);
$('#loading').hide();
$('#main').css('overflow','scroll');
addmore.counter++;
}
});
}
And here's the HTML (not verbatim, but same idea)
<!--I'm only including the "main" div that shows the content.-->
<div id='main'>
<div id='scrollingpagination'></div>
<div id='loading'></div>
</div>
Thanks guys, I really appreciate it!
try keeping
$('#main').scroll(function(){
......
})
inside document.ready. i think it was called before the dom was ready