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
},
});
}
Related
In my website (net core 2. 2) I have this code so to assign tasks to clerks
<script>
$(document).on("click", ".assignToClerk", function () {
var Assignment =
{
ID: $('#UserID').val(),
TaskID: #Model.RequestID,
}
$.ajax({
type: "POST",
url: "/Request/NewTask/",
dataType: "json",
data: Assignment,
processData: true,
success: $.notify("success assign")
});
});
</script>
The problem is that my button works only if I refresh the page.
Any idea? thank you
Try this way:
<button class="assignToClerk">
Click
</button>
$(document).ready(function() {
$('.assignToClerk').on("click", function () {
alert("Testing")
//code
});
});
Put the code inside
$( document ).ready(function() {
//your code
});
Add the scripts in the body of the page instead of the head of the page.
Try after code.
function test(){
alert("Hi");
}
window.onload = function(){
document.getElementById('btn').click();
var scriptTag = document.createElement("script");
scriptTag.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(scriptTag);
}
<button id="btn" onclick="test()">Click me</button>
On click I run a function that will do an ajax submission for each form that has the .red_active class. After the ajax submission or after the complete function I want to remove the parent's .red_active class. This is what I tried, can you help me spot my mistake?
$('.edit_old').click(function(){
$('.slider_edit').each(function(){
if($(this).hasClass('red_active')){
$(this).find('.edit_form_slide').each(function(){
$(this).on('submit', function(e) {
e.preventDefault();
var data = $(this).serialize();
var url = $(this).attr('action');
$.ajax({
type: "POST",
url: url,
data: data,
success: function (data) {
console.log('submitted '+ url);
//$(this).parent().removeClass('.red_active');
},
error: function () {
console.log('fail');
}
});
});
$(this).submit();
//$(this).submit().parent().removeClass('.red_active');
});
}
});
});
The issue is because within the success handler the this keyword does not reference the .edit_form_slide as it does in the each() handler. You need to store the reference of this in a variable:
$('.edit_old').click(function () {
$('.slider_edit').each(function () {
var $sliderEdit = $(this);
if ($sliderEdit.hasClass('red_active')) {
$sliderEdit.find('.edit_form_slide').each(function () {
var $editFormSlide = $(this); // store 'this' in a variable
$editFormSlide.on('submit', function (e) {
e.preventDefault();
var data = $editFormSlide.serialize();
var url = $editFormSlide.attr('action');
$.ajax({
type: "POST",
url: url,
data: data,
success: function (data) {
console.log('submitted ' + url);
$editFormSlide.parent().removeClass('.red_active'); // to use here, within the other scope
},
error: function () {
console.log('fail');
}
});
});
$editFormSlide.submit();
});
}
});
});
Note that I did the same for the .slider_edit selector too, just to keep things consistent. If you have nested this references it can get confusing to keep track of what is referencing what, without a named variable.
First you can optimize and remove the if and .find lines
$('.slider_edit. red_active . edit_form_slide').each(function(){
has the same effect than :
$('.slider_edit').each(function(){
if($(this).hasClass('red_active')){
$(this).find('.edit_form_slide').each(function(){
And next to find a parents with a class, the best way is to use .parents() and all beware of the this in your function, the this in the success function is not the this you are looking to. You should save the $(this) before the ajax call in a var and reuse it into success callback.
Full correction :
$('.edit_old').click(function() {
$('.slider_edit.red_active .edit_form_slide').each(function() {
var $formSlide = $(this);
$formSlide.on('submit', function(e) {
e.preventDefault();
var data = $(this).serialize();
var url = $(this).attr('action');
$.ajax({
type: "POST",
url: url,
data: data,
success: function(data) {
$formSlide.parents('.red_active:first').removeClass('.red_active');
},
error: function() {
console.log('fail');
}
});
}).submit();
});
});
total noob here:
I've got a JSON result coming to a .on('click') function which looks like this:
{"1411939719-8696.jpeg":true}
I want to remove a line in a table, based on where the call came from, but for some reason it's not working:
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
var del = $('<button/>')
.addClass('btn btn-danger')
.attr('data-type', 'DELETE')
.attr('data-url', file.deleteUrl)
.text('DELETE');
var thumb = $('<img />',
{ id: file.thumbnailUrl+'_ID',
src: file.thumbnailUrl,
alt:'MyAlt'});
$('#preview').find('tbody')
.append($('<tr>')
.append($('<td>').append(thumb))
.append($('<td>').append(del))
);
});
}
});
and the on click function is here:
$(document).on("click", ".btn-danger", function () {
$.ajax({
url: $(this).attr("data-url"),
type: $(this).attr("data-type")
}).done(function (result) {
$(this).closest("tr").remove(); // to remove the complete row after delete success
});
});
I need to remove the row that contains the delete button, along with the thumbnail image, but this code isn't working?
I think you are calling the wrong scope.
Maybe this could work:
$(document).on("click", ".btn-danger", function () {
//save scope-object to that
var that = this;
$.ajax({
url: $(this).attr("data-url"),
type: $(this).attr("data-type")
}).done(function (result) {
$(that).closest("tr").remove();
});
});
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>
I have the following JQuery code :-
$('.rpItem').on("click", "img", function (e) {
alert('here');
var text = $(this).siblings('span.rpText').text();
e.preventDefault();
e.stopPropagation();
var args = {
reportName: text
};
$.ajax({
type: "POST",
url: "Dashboard.aspx/AddToFavourites",
data: JSON.stringify(args),
contentType: "application/json;charset=utf-8;",
success: function (data) {
__doPostBack('#MainMenuUP', text);
//__doPostBack('<%= MainMenuUP.ClientID %>', text);
},
error: function () {
}
});
});
$("#reports_textSearch").keyup(function () {
var textLength = $(this).val().length;
delay(function () {
if (textLength == 0) {
emptySearchString();
}
if (textLength > 2) {
var args = {
reportName: document.getElementById('reports_textSearch').value
};
doSearchString(args);
}
}, 1000);
});
function doSearchString(args) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Dashboard.aspx/FetchReports",
data: JSON.stringify(args),
dataType: "json",
success: function (data) {
//__doPostBack('#MainMenuUP', data.d);
__doPostBack('<%= MainMenuUP.ClientID %>', data.d);
},
error: function (data) {
}
});
}
and the first time its working fine. However after the postback, the doSearch keeps on working correctly, whilst the
$('.rpItem').on("click", "img", function (e) {
fails. It is not even going through that code.
I tried to replace the
__doPostBack('<%= MainMenuUP.ClientID %>', data.d);
with
__doPostBack('<%= MainMenuUP.UniqueID %>', data.d);
but that just does a page refresh which I do not want.
Any help will be very much appreciated!
Thanks
Change your selector to this one:
$('body').on("click", ".rpItem img", function (e) {
// your code
});
If the .rpItem is replaced during your ajax call read the following:
The first time your js executes, it binds the on event to the existing rpItems.
Any new added .rpItemwill skip this binding unless you re-execute the script that accomplishes the binding.
In order to avoid this, you may use the document for the binding as #Mojtaba suggests but keep in mind that you "add" the binding to the document leading to "checking" whether an .rpItem img has been clicked or not every time something is clicked on the document.
Otherwise, you can create a function that will take your .rpItem as an argument and will accomplish the binding explicitly. After each new .rpItem added to your page, you can call this function to bind the click event. Ex:
function foo(arg) {
$(arg).on("click", "img", function (e) {
...
}
}
$(document).ready(function(){
$('.rpItem').each(function(){
foo($(this));
};
});