I am using #ajax in submit button of a form created using FAPI. Now when user submits the form, I want to run some jQuery validation before the form is submitted through ajax. As #ajax prevents events related to submit button such as submit, click, mousedown, keypress etc. I am not able to catch submit event using jQuery.
For now as a workaround, I have added custom code in ajax.js (misc/ajax.js) :
Drupal.ajax = function (base, element, element_settings) {
...
beforeSubmit: function (form_values, element_settings, options) {
//my custom code
alert(1);
...
This is against drupal best practices as I am hacking the core. Please any one can help me to do the same from my custom js file or any other approach to validate the content before ajax submit.
I think the accepted answer on the following post answers your question: How to extend or "hook" Drupal Form AJAX?
(function($) {
Drupal.behaviors.MyModule = {
attach: function (context, settings) {
// Overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSubmit = function (form_values, element, options) {
// ... Some staff added to form_values
}
//Or you can overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSerialize = function (element, options) {
// ... Some staff added to options.data
// Also call parent function
Drupal.ajax.prototype.beforeSerialize(element, options);
}
//...
i put this in the attach function
for (var base in settings.ajax) {
Drupal.ajax[base].options.beforeSubmit = function(form_values, element, options){
console.log('call your func');
}
}
it works!
Related
In meteorjs's event, how do I get the id of clicked item, without adding a JQuery binding stuff?
(Ya I investigated other posts, but does not help) IMPOV)
You can do this:
{
'click p': function (event) {
console.log(event.currentTarget.id);
}
}
Read more here.
I am using plain vanilla client side validation of my MVC5/Bootstrap3/Jquery validation form, and I would like to present a spinner om submission - but only if all validation has passed.
Is that possible?
TIA
S. Dalby
Yes, you can do this by hooking to the form's submit event, and then check if the form is valid.
$(function () {
$('#myForm').submit(function () {
var $this = $(this);
if($this.valid()) {
// show loading, spinner, whatever.
}
});
});
anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});
I am working on a mvc3 controller which loads a page on search. In the main index page, there is a search button and that loads another (details list) page in the given div.
I have incorporated pagination to the child view (details list). So, upon clicking on the "Next" link, it loads the next page.
cshtml of the index page: The flat id refers to where the details list loads.
<div id='FlatDetailcontainer'>Select a Project for Flat Details.. Loading...</div>
<script type="text/javascript" language="javascript">
// $(document).ready(function () {
function login() {
var check = document.getElementById("rad").value;
$("input[name=selectproj][value="+check+"]").attr('checked', true);
//document.getElementById("selectproj").checked = document.getElementById("rad").value;
if (check != "") {
handleprojselect(check);
}
}
function handleprojselect(myRadio) {
// document.getElementById("rad").value = myobj["proj"];
$.get('#Url.Action("Details", "ProjectDetails")?id=' + myRadio,
function (viewResult) {
$("#FlatDetailcontainer").html(viewResult);
});
}
function createproj() {
var url = '#Url.Action("Create")';
window.location.href = url;
}
</script>
The details page has the links of next and url action is as follows:
#if (Model.HasNextPage)
{
#Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1 })
#Html.Raw(" ");
#Html.ActionLink(">>", "Details", new { page = Model.PageCount })
}
else
{
#:Next >
#Html.Raw(" ")
#:>>
}
However, this link always loads on a fresh page as there is no reference to the main Index page's div id. Please can someone suggest how to go ahead with this?
As far as you are loading part of the page via AJAX call you should also use AJAX to handle your pagination. You should create JS function like the following:
function nextPageClick(e)
{
e.preventDefault();
$.get($(this).attr("href"), //getting the URL from your link and loading the content via AJAX
function (viewResult) {
$("#FlatDetailcontainer").html(viewResult);
});
}
and bind it to the paging links on page load:
$(function (){
$('.nextPageLink').live('click', nextPageClick);
})
Notice that "live" jQuery method assigns click handler to the dynamically loaded content as well as on existing static content, so you have no need to reassing handler after each data reload.
You shoud add CSS class to your link to be able to locate it:
#Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1, #class="nextPageLink" })
Of course you may use IDs or any other way to uniquely identify your pagination links.
I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.
Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.
My code is as follows
$(document).ready(function() {
$('.viewOrder').click(function() {
$('#displayOrder').load(this.href, [], function() {
console.log("landed here");
$('#blah').click(function() {
console.log("submiting the form via ajax");
$.ajax({
url: "/ajax/orderupdate",
type: "GET",
data: data,
cache: false,
//success
success: function (data) {
console.log("worked:");
}
});
return false;
});
});
return false;
});
});
.viewOrder is the a href that is ajax loaded. This works fine.
I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?
IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.
The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)
So load livequery with your scripts http://docs.jquery.com/Plugins/livequery
and change
$('#orderUpdate').submit(function() {
to
$("#orderUpdate").livequery("submit", function() {