I have placed a form (built with entityform) into a modal (ctools modal) using jquery.
Now, what happens is that when I click on the "submit" button, I get redirected to another page where I display the "success" message.
I'd like to avoid the redirect and display the "success" message within the modal (in the same page where the modal pop up).
Thanks in advance.
This is the jquery I used to launch the modal on click:
(function ($) {
Drupal.behaviors.tuo = {
attach: function (context, settings) {
$('#comments_button', context).click(function () {
$('#suggerimenti').dialog('open');
$('.ui-dialog-titlebar').append($('h2', '#block-views-invio-suggerimenti-block'));
$('.ui-dialog-content').append($('form', '#block-views-invio-suggerimenti-block'));
});
$('#suggerimenti').dialog({
autoOpen:false,
minWidth:500,
});
}
};
})(jQuery);
And this is the html of the form created by Drupal:
<form id="prova-invio-entityform-edit-form" class="entityform entitytype-prova_invio-form" accept-charset="UTF-8" method="post" action="/tuo_tema_dev2/?q=content/blandit-ratis-usitas-valde">
<div>
<div class="pre-intructions"></div>
<div id="edit-field-suggerimento-new" class="field-type-text-long field-name-field-suggerimento-new field-widget-text-textarea form-wrapper">
<div id="edit-field-refer" class="field-type-entityreference field-name-field-refer field-widget-entityreference-autocomplete form-wrapper">
<div id="edit-actions--3" class="form-actions form-wrapper">
<input id="edit-submit--4" class="form-submit ajax-processed" type="submit" value="invia suggerimento" name="op">
</div>
</div>
</form>
You can add a hidden form value to your form when using the modal view (check if your ajax is set in the URL). Then in your submit function remove your redirect when the form value is present. Assuming it is set using $form_state using this line:
unset($form_state['redirect']);
We can give you more help if you attach your form code. That seems more relevant to me, for this problem, than your JavaScript.
Related
I use Materializecss 0.100.2 and i need to open a modal on page load or document ready. But not work, it will be work only if i click on button, i don't know why.
The modal has class "open" but the modal have "display: none" and the div modal-overlay is hidden. It work but not completely.
jQuery(document).ready(function () {
jQuery('#modalInfo').modal();
jQuery('#modalInfo').modal('open');
});
This thing works with vanillaJS. You need to get the modal class using querySelector() and then pass it in M.Modal.init(), and with the help of this instance you can call open() method.
HTML -
<div class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS -
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instanceModal = M.Modal.init(Modalelem);
instanceModal.open();
});
I'm still new with angularJS. I've been trying to make a custom button and attach it to my form instead of using regular button. I've tried couple of approaches and so far none of them worked well. now when I press enter inside the input field I get the "results" view perfectly loaded to the main page. but when I click the search button "a" link tag the view loads then disappears instantly. as well as the location of the browser changes to "results" then goes back to "/#/" only. I have no idea why and what's causing this.
here's my html:
<div id="search-container" ng-controller="SearchController">
<form ng-submit="submitQuery()">
<div>
<input id="keywords" name="keywords" ng-model="query.keywords" placeholder="please enter query" value="" required/><br>
<img src="/Images/search-icon.png" alt="Search" title="Search" />
</div>
</form>
</div>
here is my model and ngjs controllers:
var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
$routeProvider.when('/results', {
templateUrl: 'PartialViews/results.html',
controller: 'ResultsController'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
bfapp.controller('ResultsController', function ($scope) {
});
bfapp.controller('SearchController', function ($scope, $location) {
$scope.query = { keywords: "" };
//on form submit
$scope.submitQuery = function () {
if ($scope.query.keywords !== null) {
$location.path('/results');
}
};
//on button click
$scope.submitForm = $scope.submitQuery;
});
well I feel so stupid. I've just found the solution after banging my head for couple of hours. Although this has never been mentioned on any site. All I needed is to remove "#" from <a href="#" id="search-btn" ng-click="submitForm()">. Now it works like charm.
I'm trying to implement adaptive payments as embedded payment with lightbox.
It works fine until a user makes a payment, but after user completes the payment
page specified by return url gets loaded within the iframe.
I'm expecting it to be loaded in the window NOT in the iframe.
Following is the code that I have. Am I missing something?
Environment
Java(play framework)
PayPal_Platform_Java_SDK_N
Expected Page Transfer Scenario
PageA - ("pay with paypal" button click)
→ paypal dialog - ("close" button click)
→ PageB
PageA.html
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame">
<dl>
<dt></dt>
<dd>
<input id="type" type="hidden" name="expType" value="light">
<input id="paykey" type="hidden" name="paykey" value="AP-KEY">
<input type="submit" id="paypalSubmitBtn" value="Pay with paypal" />
</dd>
</dl>
</form>
<script type="text/javascript">
var dgFlow;
$(function(){
dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'paypalSubmitBtn' });
});
</script>
PageB.html
<p>Thank you for your payment!</p>
<script type="text/javascript">
function handleEmbeddedFlow() {
if (top && top.opener && top.opener.top) {
top.opener.top.dgFlow.closeFlow();
}
else{
top.dgFlow.closeFlow();
}
top.close();
}
jQuery.event.add(window, "load", function(){
alert("window.load");
handleEmbeddedFlow();
});
</script>
I also noticed that dgFlow can not be resolved in else case's top.dgFlow.closeFlow(); in PageB.html.
You can try to detect if the page is running in an iframe, and if so redirect to the page directly.
How to detect:
How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
How to redirect:
Redirect the parent page from IFrame
On a MVC View (.aspx) enclosed in a Form, there are several controls - grids, textboxes - that display data relating to a subject, a person. The form does not require a submit button because the great majority of data is for viewing only. However, there is a grid (Telerik MVC) that displays comments. A user should be able to add a comment - in a textbox - and that comment should then appear in the grid. Because the comments data comes from two different database sources and are merged in a stored procedure, I'm not able to use inline grid editing.
Question 1.
Is it poossible to asynchronously postback the just contents of the wrapping DIV - i.e. the textbox with the new comment - to a controller without a complete Form postback and page flicker?
Thanks,
Arnold
You could make a button that would "submit" the contents of the text box (the new comment) to a Controller Action by using a jQuery / JavaScript post function that occurs when clicking the button.
The controller action could then store the new comment in the specific database and if you add a "success" method after that occurs you could just call an ajaxRequest() to refresh the grid.
$("#submitButton").click(function () {
var comment = $("#commentTextbox").val();
$.ajax({ type: "POST",
url: "/Controller/UpdateCommentsGrid",
datatype: "json",
traditional: true,
data:
{
'comment': comment
},
success: function () {
var grid = $('#YourGridName').data('tGrid');
grid.ajaxRequest();
}
});
});
Hope this helps.
Yes it is possible. Let's take as an example the following form where you want to post only the second DIV:
<form action="/foo" method="post">
<div id="section1">
<input type="text" name="item1" />
<input type="text" name="item2" />
</div>
<div id="section2">
<input type="text" name="item3" />
<input type="text" name="item4" />
</div>
</form>
and you could send an AJAX request like this:
var form = $('#section2').wrap('<form/>').parent();
$.post('/foo', form.serialize(), function(result) {
alert('successfully posted');
});
I´m working on a website with a purchase process. I have a form generated by some PHP that looks like this:
<form name="order_form" action="'.$thePayreadApi->get_server_url().'" method="post" id="payer-form">
'.$thePayreadApi->generate_form().'
<input type="submit" value="Klicka för betalning" />
</form>';
When the form is submitted it will go to a new page (located on another server) where the purchase is performed.
Basically what I want is the form to be submitted through AJAX and then load the new page in a Modal Window. I use jQuery throughout the website so I´d like a solution based on that lib.
I´ve found these sites that might be a hint:
http://pixeline.be/blog/2008/javascript-loading-external-urls-in-jqmodal-jquery-plugin/
http://dev.iceburg.net/jquery/jqModal/
Any help is really appreciated!
I haven't tried this exactly, but the theory is what I would go for:
$("form[name='order_form']").submit(function() {
//Validate in here
var validate = false;
if($("input[form='element1']").val()!="") {
validate = true;
}
if(validate) {
this.submit();
} else {
return false;
}
});
<form action="shopping.php" target="targetIframe" method="post">
<input type="submit" value="Click Me" />
</form>
<iframe name="targetIframe" src=""></iframe>