I have a table in a div. The table contains a link to add a row. Clicking on the link opens a fancybox2 with the form to add the new row.
I am facing the following issues: the lightbox close and the entire page reload.
UPDATED: through more debugging seems that the form is posted to the page but in Firebug I see that the target page is marked in red, receive the posted values but returns nothing.
I open the fancybox with:
$('.new').fancybox({
type: 'ajax',
autoSize : true,
padding: 5,
closeClick: false,
autoResize:true
});
the form page is:
<script type="text/javascript">
function ajax_submit(){
$.ajax({
type: "POST",
url: "bp/new_row1.php",
data: $('#new_row').serialize(),
success: function(data){$.fancybox(data);}
})
}
$(document).ready(function(){
$('#insert').click(function(){ajax_submit();});
});
</script>
<form name="new_row" id="new_row">
<div class="sez-form"><label>Descrizione: </label><input tabindex="10" name="descr" id="descr" size="100" maxlength="256"></div>
<div class="sez-form"><label>Tempestivo ammesso: </label><input tabindex="10" name="descr" id="descr" size="65" maxlength="65"></div>
<div class="sez-form"><label>Tardivo ammesso: </label><input tabindex="10" name="descr" id="descr" size="65" maxlength="65"></div>
<div class="sez-form"><button id="insert"><?php echo $azione; ?></button><button id="undo">Annulla</button></div>
</form>
The destination page for the posted values is just:
<?php echo 'Hello World'; ?>
Thank eveyone who will help me!
Try either one should work, inside the success function.
parent.jQuery.fancybox.close(); Or parent.window.close();
Related
I have a form and I need it to do 2 things once the submit button is clicked:
I need the form data to be processed in the acknowledge.php that I have created.
I need the modal dialog to display confirmation.
My form:
<form class="quote-form" method="post" action="acknowledge.php">
<div class="form-row">
<label>
<span>Full Name</span>
<input type="text" name="name">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<label>
<span>Phone</span>
<input type="number" name="phone">
</label>
</div>
<div class="form-row">
<label>
<span>Nature of Enquiry</span>
<select name="enquiry">
<option selected>General Enquiry</option>
<option>Logo Design</option>
<option>Web Design</option>
<option>Branding</option>
<option>Social Media</option>
<option>Email/Web Hosting</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
</div>
<div class="form-row">
<button type="button" name="send">Get A Quote</button>
</div>
</form>
I'm new to Javascript and AJAX but I have copied some code from some similar threads and tried to customize it to my site
<script type="text/javascript">
$(".quote-form").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: $(".quote-form").serialize(),
url: 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
<!--Modal container-->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
When the submit button is clicked nothing happens. Even the acknowledge.php does not execute. What am I doing wrong?
you need to wrap your code in a document.ready() function:
<script type="text/javascript">
$(function(){
$(".quote-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $(".quote-form").serialize(),
url : 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
UPDATE
you need to change the type of your button to submit like this
<button type="submit" name="send">Get A Quote</button>
A number of things that have been holding you up:
In your javascript, you have a trailing }); right at the end.
Your button is doing nothing to trigger the submit event in the javascript. You should alter the button or use a proper submit input. Or use type="submit".
You're not doing anything with data in your success callback. So when the modal opens, nothing else happens.
Your URL in the AJAX request is not set. You could use this.action to use the form's action URL here.
I've made some changes that you can preview in my fiddle.
There are some parts of the fiddle that you should ignore, such as the ajax url and data options. Those should be something like:
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
//...
});
What we obviously do not know now is whether you have included your dependency scripts like jQuery and bootstrap into your page.
For example: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> is the bootstrap javascript.
Make sure that jQuery is above bootstrap, or bootstrap will fail to load as it depends on jQuery. You may need to use the bootstrap CSS as well.
Lastly, you need to check that your action in the form is the correct URL, and that the data in your form that is sent is processed and echoed back as HTML.
You will also want to go to the bootstrap documentation, get a better example of the modal, and check out the forms area to spruce up this form.
You could use developer tools in your browser and note any errors thrown by javascript in the console if you still have problems. (Ctrl+Shift+I).
You didn't need to wrap anything in a document ready.
You doing two things wrong
First you need to wrap your code with document.ready
$(function(){
});
Then you need to fix your url
var form = $(".quote-form");
$.ajax({
type : 'POST',
data: form .serialize(),
url : form.attr('action'),
success: function(data) {
$("#myModal").modal("show");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
I am searching a table for specific values based on the user input which queries the database for the LIKE condition. This works perfectly but I have to manually scroll to the buttom of the page to see my filtered table. I really want to redirect the user to the div of the table underneath the page. This is the form with the search box:
<form method="post">
<div class="col-lg-6 pull-right" style="margin-right:130px; width:30%;">
<div class="input-group">
<input required type="text" class="form-control" name="search" placeholder="Search Alerts for Today...">
<span class="input-group-btn">
<button class="btn btn-default" name="searchnow" type="submit" value="Submit">Go!</button>
</span>
</div>
</div>
</form>
This code below then checks to see if the button is clicked and then sets the variable that populates the table to equals the current search result from the database.
var searchIP = "";
if (Request.Form["searchnow"] != null & IsPost)
{
searchIP = Request.Form["search"];
alertForTheDay = dbConnection.searchDashboardTable(searchIP);
// Response.Redirect("Dashboard.cshtml#search");
}
Using Response.Redirect refreshes the table back to its original state. Commenting out the Response redirect as shown above allows the filter to be possible but I have to manually scroll down the page. I want this to redirect to the id of the div in that redirect. Please what can I do?
I guess you are doing a complete server round trip. From my point of view this is unnecessary.
I would suggest to do this via AJAX.
Change the HTML like this to call an AJAX operation on your button click:
<form method="post">
<div class="col-lg-6 pull-right" style="margin-right:130px; width:30%;">
<div class="input-group">
<input required type="text" class="form-control" name="search" id="search" placeholder="Search Alerts for Today...">
<span class="input-group-btn">
<button class="btn btn-default" name="searchnow" id="theButton">Go!</button>
</span>
</div>
</div>
</form>
Handle the button click and link to your anchor on success. (Assuming that the anchor to your table is present. In your case something like Dashboard.cshtml#contact)
$.fn.gotoAnchor = function(anchor) {
location.href = this.selector;
}
$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#theButton").click(function() {
$.ajax({
type: "POST",
url: "<YOUR URL>",
data: { search: $('#search').val() },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// If everything is successful link to your anchor tag
$('#search').gotoAnchor();
}
});
});
});
sorry for the dumb question but I can't seem to get this going and I figured I best give you more info than not enough -
I have a form that I am running inside a loop in php like this:
<form name="primaryTagForm'.$post->ID.'" id="primaryTagForm'.$post->ID.'" method="POST" enctype="multipart/form-data" >
<fieldset class="tags">
<label for="post_tags'.$post->ID.'">Tags:</label>
<input type="text" value="" tabindex="35" name="postTags'.$post->ID.'" id="postTags'.$post->ID.'" />
</fieldset>
<fieldset>
<input type="hidden" name="submitted" id="submitted" value="true" />
'.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
<button class="button" type="submit">Tag</button>
</fieldset>
</form>
I have tried adding my ajax under that form (Still within the loop so I can grab the post_id) and in my console it my tag-ajax.php file is posted just fine. Here is my weak attempt at that based on this: Save data through ajax jQuery post with form submit and other like questions.
<script>
jQuery(document).ready(function($) {
$(".button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "'.get_stylesheet_directory_uri().'/tags-ajax.php",
data: "primaryTagForm'.$post->ID.'",
success: function(data){
//alert("---"+data);
alert("Tags have been updated successfully.");
}
});
});
});
</script>
And lastly here is what is in my tags-ajax.php file -
if(isset($_POST['submitted']) && isset($_POST['post_nonce_field']) && wp_verify_nonce($_POST['post_nonce_field'], 'post_nonce')) {
wp_set_object_terms( $post->ID, explode( ',', $_POST['postTags'.$post->ID] ), 'product_tag', true );
echo'Success!';
}
So when I try running this a couple of things happen by looking in the console, if I hit submit on one of the forms then all them forms on that page post to tags-ajax.php (Im sure it is because I am doing this in a loop but not sure how else to do it and bring in post->ID on tags-ajax.php)
The second, most important thing is that nothing actually saves, I click the "Tag" but (submit) and I get those success alerts (for each post unfortunately) but when I click through those the tags are not actually saved.
My question: How do I get the data to actually save with the ajax/php and how can I have that post refresh without reloading the page so the user sees they actually were added?
Latest Update: After making the serialize edits mentioned below I submit my form and check the console and see the post method is getting a 500 internal server error.. Im thinking if my problem is coming from because I have the form and an inline script with the ajax running in a loop? So there are technically 20 posts/forms/inline scripts on a page and when you submit one, all of them submit which may be causing the 500 internal error?
The data: option in ajax should be
data: $("#primaryTagForm'.$post->ID.'").serialize(),
Use serialize
You have to change
data: "primaryTagForm'.$post->ID.'",
to
data: $("#primaryTagForm'.$post->ID.'").serialize(),
Simplify your markup. You dont have to use id attributes everywhere. Just include a hidenn tag in your form with the value of $post->id. Also echo the ajax url at the form's acton attribute.
So the html should be similar to this:
<form method="POST" action="' . get_stylesheet_directory_uri() .'/tags-ajax.php" >
<input type='hidden" name="id" value="'.$post->ID.'">
<fieldset class="tags">
<label>Tags:</label>
<input type="text" value="" tabindex="35" name="tags" />
</fieldset>
<fieldset>
<input type="hidden" name="submitted" id="submitted" value="true" />
'.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
<button class="button" type="submit">Tag</button>
</fieldset>
</form>
Then you can use a script like this:
jQuery(document).ready(function($) {
$(".button").click(function(e) {
e.preventDefault();
var $target = $(e.target),
$form = $target.closest('form');
$.ajax({
type: "POST",
url: $form.prop('action'),
data: $form.serialize(),
success: function(data){
//alert("---"+data);
alert("Tags have been updated successfully.");
}
});
});
});
I'm currently trying to make a ajax comment function work once a user clicks "open comments".
Currently I'm getting data back from my php script and the status of the ajax call is "200 OK" so it definetely works but I'm just unable to get the correct value for the current comment which has been clicked on in order to post it to the php script.
What I'm asking is how do I get the value of the ".posted_comment_id" class and then how do I load the data which is returned into the ".commentView" class?
jQuery/AJAX:
$(".closedComment").click(function(){
var $this = $(this);
$this.hide().siblings('.openComment').show();
$this.siblings().next(".commentBox").slideToggle();
$.ajax({
type: "POST",
url: "http://example.dev/comments/get_timeline_comments",
data: {post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").val()},
dataType: "text",
cache:false,
success:
function(data){
$this.closest(".commentView").load(data);
}
});
return false;
});
HTML:
<div class="interactContainer">
<div class="closedComment" style="display: none;">
open comments
</div>
<div class="openComment" style="display: block;">
close comments
</div>
<div class="commentBox floatLeft" style="display: block;">
<form action="http://example.com/comments/post_comment" method="post" accept-charset="utf-8">
<textarea name="comment" class="inputField"></textarea>
<input type="hidden" name="post" value="13">
<input type="hidden" name="from" value="5">
<input type="hidden" name="to" value="3">
<input type="submit" name="submit" class="submitButton">
</form>
<div class="commentView"></div>
<div class="posted_comment_id" style="display:none;">13</div>
</div>
</div>
Replace .val by .html or .text. This will return the innerHTML of the element.
data: {
post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").text()
}
You might need to convert the string to an integer to make it work.
If the query selector fails, this selector might do the job instead:
$this.parent().find(".posted_comment_id")
To add the returned data on your webpage, use the success handler. Here's an example of how it's done:
success: function(json) {
// Parse your data here. I don't know what you get back, I assume JSON
var data = JSON.parse(json),
content = data.whatever_you_want_to_print;
// Assuming your selector works, you put in in the element using .html
$this.closest(".commentView").html(content);
}
});
You probably want to do something like:
$(this).parents('.interactContainer').find(".posted_comment_id").text()
I have a form that works just fine when I try it out (with the correct address of course).
When I use that for in my site, inside a fancybox it doesn't work. Nothing happens (no error in the console either).
The relevant code is:
<a class="fancybox" href="#inline1" id="link_consultar">
Consultar
</a>
<div style="display: none">
<div id="inline1">
Producto: {$product->
name|escape:'htmlall':'UTF-8'}
<br>
<br>
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
Nombre:
<input type="text" name="firstname">
<br>
<br>
Consulta:
<br>
<textarea rows="4" cols="50">
</textarea>
<br>
<br>
<input type="submit" value="Enviar Consulta" />
</form>
</div>
</div>
The JS:
$(document).ready(function() {
$('#myForm').submit(function(){
alert("submitted");
});
});
I have also tried:
$(document).ready(function() {
$("#myForm").on("submit", function(event){
alert("submitted");
});
});
I have included the form plugin like this:
<script src="http://malsup.github.com/jquery.form.js"></script>
With no success, the end goal is to send form by AJAX, this is a simplified example to debug.
What I don't understand either is that even when I remove all js it wont direct me to the action page.
You can see a live example here (When you click consulta).
The problem is shown on your live site. Upon examining the source code, you can see that you're adding a form within another form
<form id="buy_block" action="http://danielvi.com/index.php?controller=cart" method="post">
[...]
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
[...]
</form>
</form>
Which invalidates the second form you're working with. That is why it's not doing anything. Other than that, the code is valid.
On the live site, you seem to be missing the <form> element in the #fancybox-content.
You've got the contact form inside form#buy_block which is invalid. Try moving the whole <div id="inline1"> outside of the <form id="buy_block
$("input[type='submit']").click(function(){
$.ajax: {
type : "POST",
cache : false,
url : "http://danielvi.com/send_mail.php",
success: function(data) {
$.fancybox({
'width': 400,
'height': 400,
'enableEscapeButton' : false,
'overlayShow' : true,
'overlayOpacity' : 0,
'hideOnOverlayClick' : false,
'content' : data
});
}
}
});