Develop Reference

How to display a random quote as soon as page loads?

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
},
});
}

Issue with onclick function

Hi I have written a GSP and Javascript code to perform on click remove file functionality.
JavaScript code
function remove(attachmentId) {
$(document).ready(function(){
$('.glyphicon-remove').click ( function(e){
e.preventDefault();
$(this).parent().parent().remove();
$.ajax({
url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
data: {
attachmentId: attachmentId
},
success: function(data){
alert("Success");
}
});
});
});
}
GSP Code
<g:each in="${fileList}" var="file">
<div>
<a href="#" onclick="remove('${file.attachmentId}')">
<span class="glyphicon glyphicon-remove"></span></a>
<a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a>
</br>
</div>
</g:each>
Groovy Code
def deleteSelectedFile() {
String attachmentId= params.attachmentId
activitiService.deleteAttachemnt(attachmentId)
}
I am not getting why exactly it is taking double click for deleting the first record.
Please help me.
Note: Application is running in Internet Explorer.

The issue is you have bound a click event in a function. Because you have not called that function at page load, it is registering the click event on first click and on second click, it is getting executed.
To overcome this issue you have two ways either just use your inline handler and just call the ajax, don't try to bind any click in it:
function remove(attachmentId, elem) {
$(elem).parent().remove();
$.ajax({
url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
data: {attachmentId: attachmentId},
success: function(data){
alert("Success");
}
});
}
and in the view you have to pass this in the function:
<a href="#" onclick="remove('${file.attachmentId}', this)">
Second way is to use event delegation syntax:
$(static-parent).on(event, selector, callback);
so if you update your function as above and remove the inline event handler from the view and use data-* attribute. you can use it this way:
<a href="#" data-attachmentId='${file.attachmentId}'>
function remove() {
var attachmentId = $(this).parent().data('attachmentId');
$(this).closest('div').remove();
$.ajax({
url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
data: {attachmentId: attachmentId},
success: function(data){
alert("Success");
}
});
}
$(document).on('click', '.glyphicon-remove', remove);

I think removing the $(document).ready(function() {...}) part as well as $('.glypeicon-remove') part from the remove function but keeping the stuff happening inside of these untouched, should fix your problem.
So your code should look like:
JavaScript:
function remove(attachmentId) {
$(this).parent().parent().remove();
$.ajax({
url: '${g.createLink(controller: '
landing ', action: '
deleteSelectedFile ')}',
data: { attachmentId: attachmentId },
success: function (data) { alert('Success'); }
});
}
Hope this helps.

The problem is, in your case the jQuery event handler is registered only after the first click, so in the second click the event handler is getting triggered.
Looks like you are dealing dealing with dynamic elements. In that case instead of using inline event handlers use event delegation and remove the inline event handler
<a href="#" class="delete-attachment" data-attachment-id="${file.attachmentId}">
then
$(document).ready(function(){
$(document).on('click', '.delete-attachment', function(e){
e.preventDefault();
$(this).parent().parent().remove();
$.ajax({
url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
data: {
attachmentId: $(this).data('attachment-id')
},
success: function(data){
alert("Success");
}
});
});

I am not sure its working or not but as per jQuery rules try below code.
function remove(attachmentId) {
$(document).on('click','.glyphicon-remove', function(e){
e.preventDefault();
$(this).parent().parent().remove();
$.ajax({
url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
data: {
attachmentId: attachmentId
},
success: function(data){
alert("Success");
}
});
});
}

jQuery click doesn't work on chrome

Here is the jQuery code which works on Firefox and IE but not on Chrome.
I placed the alert() to debug and it doesnt works on chrome or safari. Any ideas?
The bxslider jquery works but not the $(".locationoption").click(function() .
Here is the code :
$(document).ready(function(){
$(".locationoption").click(function() {
var datastring = "location="+$("#locationselection").val()+"&language="+"<?php echo $language; ?>";
alert(datastring);
$.ajax({
type: "POST",
url: "includes/ajaxlocationsearch.php",
data: datastring,
cache: true,
success: function (data) {
$("#hotelselection").html(data);
}
});
});
$('#leftsidebarbanners').bxSlider({
controls:true,
nextText:" Next →",
prevText:"← Previous |",
});
});

I guess you should not use the clicking on an "option" element because it is not really a DOM element I guess. It's completely drawn by the browser and as you noticed it can act different depending on the browser.
But use the change event of the select: "#locationselection". And maybe use the following syntax to fill the data:
$("#locationselection").change(function() {
$.ajax({
type: "POST",
url: "includes/ajaxlocationsearch.php",
data: {
location: $(this).val(),
language: "<?php echo $language; ?>"
},
cache: true,
success: function (data) {
$("#hotelselection").html(data);
}
});
});

You can try using the JQuery Delegate.
Link to JQuery documentation
Had a problem with dynamicly loaded content on my site aswell and delegate worked perfectly for me.
$("id of class of outer element").delegate( "id/class/element of content that is to be clicked", "click", function() {
//do your stuff
);

jQuery Ajax Page Loading Fails

I want when I click a link with attribute "linkdata" = "page" to change the body's code to a loading image and after it's done to change the whole document's HTML to the result. Here is the current code I have:
$('a[linkdata="page"]').each(function() {
$(this).click(function () {
var attribute = $(this).attr("href");
$("body").html('<center><img src="/ajax-loader.gif" /></center>');
$.ajax({ type: "GET", url: attribute }).done(function (data) {
$(document).html(data);
});
return false;
});
});
The result:
It changes the body's HTML code to the image and always fails with the request (which is http://somelink.com/home - using CodeIgniter, tried with .fail(function() { window.location="/error/404" });)

$('a[linkdata="page"]').on('click',function(k,v){
var attribute = $(this).attr("href");
$("body").html('<center><img src="/ajax-loader.gif" /></center>');
$(document).load({ type: "GET", url: attribute });
})

$('a[linkdata="page"]').click(function(e){
e.preventDefault();
$("body").html('<center><img src="/ajax-loader.gif" /></center>');
$.ajax({url:$(this).attr("href") })
.success(function(data){$(document.body).html(data);})
.error(function(x,s,e){alert('Warning! '+s+': '+e)});
});

The button does nothing on click in jquery

I am learning jquery and i am stuck with a problem. Here is the code
$(function(){
var gotProducts=new Array();
var productsWithDelete=new Array();
$('.addProducts').on('keyup',function(event) {
var searchVal=$(this).val().trim();
if(searchVal.length > 0) {
$.ajax({
url: 'http://localhost/url',
data: { products: $(this).val(), },
type: 'POST',
dataType: 'html',
success: function(msg) {
$('#printTheProducts').html(msg);
}
});
}
});
$('.productsButton').click(function() {
alert('yes');
});
});
The response I am getting from the ajax call is a button having class productsButton.
Now when i try to click that button I got through ajax then it does not alert yes. I mean it does nothing.
Question:-
What might be the problem?

Try event delegation using .on() for generated button, As they are generated dynamically
$('#printTheProducts').on('click','.productsButton',function(){
alert('yes');
});
Where #printTheProducts is the closest parent element, you can use document or document.body also as a selector!
Syntax:
$(closestparentelement).on('event','targetselector',function(){
});