I am developing hybrid mobile app using Framework7. I have a registration form which needs to be submitted using ajax on click of submit button. I am using below given code for the same. But it's not working.
$$(document).on('pageInit', function() {
$$('#myFrom').on('submit',function(){
....
alert('hello world');
});
});
Try submitting your form on the click of the button instead of the submit of the form
Assuming your button has the ID btnSubmit
$$(document).on('pageInit', function() {
$$("#btnSubmit").on('click', function(){
//run Ajax script here
});
});
$$(document).on('click','#btnSubmit',function(){
alert('hello world');
});
Try above. In Framework7 $$('.class/ID') will not work.
Related
If you create an ACF button and enable the Ajax call - Trigger ajax event on click setting, how do you disable the button during the AJAX request so that multiple requests are not accidentally submitted at once?
The following snippet will disable (ghost out) the button once it's pressed, and re-enable it once the AJAX request is complete.
Change my_button_name to the field name of your button. Also, ensure that the my_acf_admin_enqueue_scripts and my_acf_admin_print_scripts function names are unique.
For more information refer to the ACF Javascript API and the ACF Button Field.
add_action('acf/input/admin_enqueue_scripts', 'my_acf_admin_enqueue_scripts');
function my_acf_admin_enqueue_scripts() {
add_action('admin_print_scripts', 'my_acf_admin_print_scripts');
function my_acf_admin_print_scripts() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
acf.addAction('acfe/fields/button/before/name=my_button_name', function($el, data){
var field = acf.getField(data.field_key);
field.disable();
});
acf.addAction('acfe/fields/button/success/name=my_button_name', function(response, $el, data) {
var field = acf.getField(data.field_key);
field.enable();
});
});
</script>
<?php
}
}
I have an AJAX chat. AJAX reloads session every 750ms so it deselect text which I selected in chat. How can I solve it?
My code:
document.getElementById('content-frame').onload = msg_loading();
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#content-frame').load('<? echo('init/conversation.php?uid='.$id.'&cid='.$u['id']); ?>');
}, 750);
});
Personally I would be reloading the data via ajax on the page that contains the chat. Like so:
Right now you have your chat box reloading from the "Main page" which I think is the problematic part. I would use ajax to call a REST API instead. This will solve your problem with the page reloading and deselecting the text because the page is not reloading, the data is being updated via ajax.
setInterval(function(){
$.ajax({
url: '/conversation-rest-api.php?uid=' + uid
})
.done(function(data){
// Use templating tool to generate html from `data`
// var content = getContentFromData(data);
$('#content-output').html(content);
});
}, 750);
I have a form that needs to be submitted on all button presses or whenever a user leaves the page, is that possible if so how?
Using jquery to detect if a user leaves the page.
https://api.jquery.com/unload/
$( window ).unload(function() {
//call your function here that executes the form
return "Handler for .unload() called.";
});
using jquery to detect button presses.
$(document).on('click', '.buttonCLass', function(){
//code here
})
jquery mobile by default handles all clicks on links and form submits via ajax call. How can i achieve the same with Zepto libary?
Thanks!
haven't tested it yet but it should work like this
$(function() {
$("a").click(function(){
var link = $(this).attr("href")
$.get(link, function(response){
$("#myContainer").append(response)
})
return false
})
})
I'm using the bassistance validation plugin and have a small script that catches the second submit-button (called preview) and sends the data via ajax to fancybox. I'ld like to validate the forms before they are send to fancybox. At the moment they're only validatet, if I send the forms via the submit-button. I tried in various ways (e.g. I put the call for validation directly after the if and so on) but couldn't get it work. Maybe there's a way to let validate know that it should also react, when the preview-button is hit?
My Code:
$(function() {
$('#myform *').tooltip();
$('#myform ').validate();
});
$(document).ready(function(){
$(':submit').click(function(){
for (var i in CKEDITOR.instances){
CKEDITOR.instances[i].updateElement();
}
var value = $(this).attr("id");
if (value == 'preview') {
$.fancybox.showLoading();
$.ajax({
type : "POST",
cache : false,
url : "../mypath/",
data : $('#myform').serializeArray(),
success : function(data) {
$.fancybox(data, {
'minWidth': '100%',
'minHeight': '100%',
});
}
});
return false;
}
});
});
If i'm not wrong, the Bassistance Validator plugin relies on the fact that if you SUBMIT a form, and the requirements are not met, the function returns a "false" on that submit, enabling you to visually see the errors made.
In your source code, you correctly initialized the Bassistance validator plugin at the very beginning of your code ( I assume you created the rules for it directly on the input fields for example minlength="2" required ) but there is a problem: there is no hook for the SUBMIT event of the submit button, but only for the CLICK event on that button.
There is a simple example on the Bassistance website that shows how you can use custom submit events for the plugin:
http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html
Basically, what you need to do is to insert the intelligent part of your code into
jQuery("#yourform").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
/*
Here you can do the following:
1) Update the instances of CKEDITOR
2) Check if the submit is in the preview mode
3) If yes
- do your fancy stuff
- return false so that the real submit is not triggered
If not
- return true so that the real submit handler is evaluated by the browser and the POST is triggered
*/
});
}
});