I've recently discovered a problem when submitting forms using TinyMCE Jquery-plugin. When trying to submitting normal input fields such as text fields, select boxes and so on, everything works as it should. However, using TinyMCE on a textarea doesn't work correctly; i have to submit two times to save. Is there a fix for this particular problem?
<script>
$(function () {
$('.message').removeClass('hidden');
});
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
var note = $("#content").text();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
</script>
HTML
<textarea id="cotent" name="content" style="width:100%"><?php echo $entry->content; ?></textarea>
Answer to my question.
I needed to add tinyMCE.triggerSave();
<script>
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
tinyMCE.triggerSave();
var note = $("#content").text();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
</script>
Related
I am working on a random quote app. Quote is display when click a new quote button but I want quote already display when page loads. I invoked a function but it still does not work. Thank you!
Here is my code:
$(document).ready(function() {
function randomQuote() {
$('#get-quote').on('click', function(e){
e.preventDefault();
// Using jQuery
$.ajax( {
url: "http://quotes.stormconsultancy.co.uk/random.json",
dataType: "jsonp",
type: 'GET',
success: function(json) {
// do something with data
console.log(json);
data = json[0];
$('#quotation').html('"'+json.quote+'"');
$('#author').html('-- '+json.author+' --');
$('a.twitter-share-button').attr('data-text',json.quote);
},
});
});
$('#share-quote').on('click', function() {
var tweetQuote=$('#quotation').html();
var tweetAuthor=$('#author').html();
var url='https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote+"\n"+tweetAuthor);
window.open(url)
});
}
randomQuote();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try removing click listener. inside randomeQuote() remove click listener.
keep your click listener out side of document.ready
$(document).ready(function() {
randomQuote(); // call initially and get random quote
});
function randomQuote() {
$.ajax( {
url: "https://quotes.stormconsultancy.co.uk/random.json",
dataType: "jsonp",
type: 'GET',
success: function(json) {
// do something with data
data = json[0];
$('#quotation').html('"'+json.quote+'"');
$('#author').html('-- '+json.author+' --');
$('a.twitter-share-button').attr('data-text',json.quote);
},
});
$('#share-quote').on('click', function() {
var tweetQuote=$('#quotation').html();
var tweetAuthor=$('#author').html();
var url='https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote+"\n"+tweetAuthor);
window.open(url)
});
}
$('#get-quote').on('click', function(e){
e.preventDefault();
randomQuote();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="get-quote">get quote</button>
<div id="quotation"></div>
Remove the onClick listeners so that when you call the function it will update directly.
function randomQuote() {
$.ajax( {
...
success: function(json) {
... //do updates
},
});
}
$(document).ready(function() {
$("#client-list").on("change", function() {
var selectedValue = $(this).val();
location.reload();
});
});
how to refresh only div with id='calender', instead of refreshing complete page, onchange dropdown list option? Complete source i have created a fiddle or how to keep slected option in drop down which was selected and refresh rest of the page?
You cannot reload only a part of your page unless you use IFRAMES.
Instead, you'll have to use AJAX. Here is a quick example:
<script>
function refreshCalendar()
{
$.ajax({
type: "GET",
url: 'http://yourdomain/api/whatever',
data: "", // You can send some data to the servers
success: function(data) {
$('#calendar').html(data);
}
});
}
</script>
You can refresh fullCalender as like this.
Put you calendar code in a function LoadCalendar then call it once on document ready and once on change of dropdown.
function LoadCalendar() {
$('#calendar').fullCalendar({
//your options
});
}
$(function(){
LoadCalendar();
$("#client-list").on("change", function() {
var selectedValue = $(this).val();
LoadCalendar();
});
});
i'm developing a jquery mobile app. In the app there is a form which the user has to submit and i've placed the submit button in the right side in the header. when the user is done with filling of the form and taps on the submit button with a class of "ui-btn-right", it fails to submit.
$(document).ready(function(){
$('.ui-btn-right').on('click', function(event) {
$("#form1").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "register.php",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
});
});
HTML
<a href='#' class='ui-btn-right' id="button" >Register</a>
Just taking a guess here, as we can't see your markup. But it looks like you're not actually submitting the form when you click the button, you're just wiring up the submit event. Try this?
$(document).ready(function(){
$('.ui-btn-right').on('click', function(event) {
$('#form1').submit();
});
$("#form1").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "register.php",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
});
Try this?
$(document).ready(function(){
$("#form1").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "register.php",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
$('.ui-btn-right').on('click', function(event) {
$("#form1").submit(event);
});
});
If your button is not in the form and you want to fired the submit event you have to do something like:
$('.ui-btn-right').on('click', function(event) {
$("#form1").submit(function(event){
event.preventDefault();
stuff();
});
});
Probably I need more data to give answer,but we can go this way.
$('.ui-btn-right').on('click', function(event) {
check here any alert/console message is working
}
now you have create $("#form1").on('submit
but to submit it you need to do
$("#form1").submit();
manually as I assume this button is outside of your form.
i have nested records of a table that i insert to a different table of a database with ajax, when i click on a particular button the value changes to data sent and so forth for the descending buttons. i perform this with two scripts that works perfectly, one insert data without refreshing and the other disables the particular button on click and changes the value to data sent. Now i want to put it all together so it becomes one.
Insertion
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function() {
Disable button
$(function(){
$(".btn-style").click(function(){
$(this).val('data sent');
$(this).attr('disabled', true);
});
});
$(function(){}); is just a shortcut for $(document).ready(function(){});
Just place both pieces of code inside a single DOM ready handler. e.g.
$(function () {
$("form").on('submit', function (event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function () {});
});
$(".btn-style").click(function () {
$(this).val('data sent');
$(this).attr('disabled', true);
});
});
Assuming ".btn-style" matches your submit button you can simplify this to:
$(function () {
$("form").on('submit', function (event) {
event.preventDefault();
// Disable submit button on this specific form
$('.btn-style', this).val('data sent').prop('disabled', true);
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function () {
});
});
});
The subsequent issue found (not working in Chrome) is down to using disabled via attr. For genuine properties (like checked and disabled) always use prop instead of attr.
I created a form on /contact-us and having action="/contact-us". Now, when I added Ajax to it, it is sending the request three times, i cannot find the reason.
Ajax:
define(['jquery', 'foundation.alert'], function($) {
return {
init: function() {
$("#success-alert").hide();
$("#error-alert").hide();
$('button').click(function(e){
$('input').map(function() {
if(!$(this).val()) {
$("#error-alert").show();
$("#success-alert").hide();
return false;
} else {
$('document').ready(function() {
var form = $('#contact_us'); // contact form
var submit = $('button'); // submit button
var status = $('#form-status'); // alert div for show alert message
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: '/contact-us', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
submit.html('Sending....'); // change submit button text
},
success: function(data) {
form.trigger('reset'); // reset form
$("#success-alert").show();
$("#error-alert").hide();
submit.html('Send'); // reset submit button text
},
error: function(e) {
console.log(e);
}
});
});
});
}
});
});
}
}
});
You are looping through all the inputs and applying on submit for every input in your form. So if it is submitting 3 times, you must have three inputs. Each time you click the button, you will be adding even more submit handlers! The whole design of this is wrong.
You should not be attaching the submit handler inside of the click event, it should be outside and have it done one time. Do your validation inside of the submit handler to make sure that it is valid before making the Ajax call.
try this solution.
var wait = false;
wait variable for global scope
if (!wait) {
wait = true;
$.ajax({
url: '/contact-us', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function () {
submit.html('Sending....'); // change submit button text
},
success: function (data) {
wait = false;
form.trigger('reset'); // reset form
$("#success-alert").show();
$("#error-alert").hide();
submit.html('Send'); // reset submit button text
},
error: function (e) {
console.log(e)
}
});
}
After going through my code i realized what mistakes i have been doing and also realized that reading code is more important than writing it.
This is how i rewrite the code and its working fine but i am still not sure if it is the best approach.
define(['jquery', 'foundation.alert'], function($) {
return {
init: function() {
$("#success-alert").hide();
$("#error-alert").hide();
$(function () {
$('#contact_us').on('submit', function (e) {
$.ajax({
type: 'post',
url: '/contact-us',
data: $('#contact_us').serialize(),
success: function () {
$("#success-alert").show();
$("#error-alert").hide();
}
});
e.preventDefault();
});
});
$('button').click(function(e){
$('input').map(function() {
if(!$(this).val()) {
$("#error-alert").show();
$("#success-alert").hide();
return false;
}
});
});
}
}
});
Note: Never take writing code as a burden.