$.get within a .click function - javascript

Not really sure where I'm going wrong with this one. I have a button element that when clicked, I want the following script below to be triggered. No issues seemingly in Chrome when I click the button but the file isn't fetched.
Am I missing something silly in my .click?
<script>
$( "button" ).click(function() {
$.get("testimg.php", function() {
alert("Success!");
});
});
</script>

Your code seems right. You need to make sure 2 things:
testimg.php (with m) file exists in the same directory.
The <button> is in the DOM when the script runs. I recommend using $(document).ready() event:
<script>
$(document).ready(function(){
$( "button" ).click(function() {
$.get("testimg.php", function() {
alert("Success!");
});
});
});
</script>
Working jsFiddle

Worth making it a jQuery.ajax call so you can trace errors.
$(function () {
$("button").click(function(e) {
e.preventDefault();
$.ajax({
url: "testimg.php",
success: function () {
alert("Success!");
},
error: function(x,y,z) {
alert(z);
}
});
});
});

Related

create div element with jquery is not working

I'm trying to create element with jquery and loading html file but my code is not working I tried different ways but none of them didn't work for me first code was
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("</div>", {"id": "createFreeAccountDiv"}).load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
});
});
this code was not working then I tried this one
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("body").append(jQuery("</div>", {"id": "createFreeAccountDiv"}).load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
}));
});
This was also not working then I tried simple one to create element and third one was
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
e.preventDefault();
jQuery.noConflict();
jQuery("body").append(jQuery("</div>", {id: "createFreeAccountDiv"}));
});
Then I saw that div element is not created I check the code and its syntax and its code is right don't know what is the problem.
Note: this code is working fine
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("#createFreeAccountDiv").load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
});
});
because I already created div myself in a html file.
Now finally I don't want to create div myself I want to create div with jquery and load html file which has bootstrap modal.
jQuery("</div>", need to be either jQuery("<div></div>", Or jQuery("<div>",
So code need to be:-
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
append(jQuery("<div id='createFreeAccountDiv'></div>").load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
}));
});
$('#element_name').append('<div id"element_id_ex1" name="element_name_ex1"></div>');
or
$("#clickToCreateFreeAccount").on('click',function()
{
$('#element_name').append('<div id"element_id_ex1" name="element_name_ex1"></div>');
});
$(document).ready(function(){
var config="<div>Hi Welcome</div>"
jQuery('body').append(config);
});

Jquery .focus()-loop?

I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)
try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here
According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);
$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me
You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/

JQuery Mobile, load then change possible?

I'm trying to load an external page and insert it in my HTML. Here is my code :
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(document).ready( function() {
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});
});
When I execute it, I need to press the button twice before it change my page. How can I fix this ?
Thanks !
you have wrong syntax. Please check if this works for you.
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});

jquery .on(click) not working

i have a link on html
Veja aqui ยป</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});

jquery ajaxStart/ajaxStop not working

i have very simple code that i making partial postback by jquery and i use ajaxStart/ajaxStop for doing some work. but it is not working. i just could not understand why it is not working.
here is my code
$("#imgHolder").ajaxStart(function () {
$('div#content').block({
message: '<table><tr><td><img src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
css: { border: '1px solid #a00' }
});
$('#imgHolder').empty();
$("#btnPrint").hide();
});
$("#imgHolder").ajaxStop(function () {
$("#btnPrint").show();
$('div#content').unblock();
});
$(document).ready(function () {
$.ajax({
type: "POST",
url: "UPSLabelFormUK.aspx/ProcessInfo",
data: JSON.stringify(DTO),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.d[0].Message == "SUCCESS") {
//alert(data.d[0].TrackNumber);
///alert(data.d[0].LabelImagePath);
var _images = [data.d[0].LabelImagePath];
$.each(_images, function (e) {
$(new Image()).load(function () {
$('#imgHolder').html("<img src='" + data.d[0].LabelImagePath + "' width='310' height='402' border=0/>");
}).attr('src', this);
});
}
} ,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
});
i just dont not understand why my above ajaxstart/ajaxstop did not work. please help me to understand why was wrong in my code.
but my ajaxstart/ajaxstop started working when i change the code a bit like
$(document).ajaxStart(function () {
$('div#content').block({
message: '<table><tr><td><img src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
css: { border: '1px solid #a00' }
});
$('#imgHolder').empty();
$("#btnPrint").hide();
});
$(document).ajaxStop(function () {
$("#btnPrint").show();
$('div#content').unblock();
});
the only change is $(document).ajaxStop(function () { instaed of
$("#imgHolder").ajaxStart(function () {
so please explain why my above ajaxStart/ajaxStop code did not work. thanks
Given the fact that ajaxStart is only called if there are no other
ajax requests in progress, it makes is useless if you want to use it
as an AJAX loader indicator.
have u tried with ( tell me is it working or not)
jQuery(document).ajaxStart(function(){
alert("it begins");
})
As of jQuery 1.8, the .ajaxStop() method should only be attached to document.
from jquery api web page of "ajaxStop". You can check it here.
Try this:
$("#loading").bind({
ajaxStart: function() { $(this).show(); },
ajaxStop: function() { $(this).hide(); }
});
Essentially binding your loadingAnimationElement to the globally fired ajaxStart and ajaxStop events. Only shows up when you intend it to.
When jQuery is not performing any Ajax requests and a new request is initiated, it fires an ajaxStart event. If other requests begin before this first one ends, those new requests do not cause a new ajaxStart event. The ajaxStop event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.
This combination works fine. Thanks to user #brroshan
JS of Master page
<script language="JavaScript" type="text/javascript">
$(document).ajaxStart(function () {
$("#loading").show();
});
$(function () {
// Some other code
// The end of this code block
$("#loading").hide();
$("#loading").bind({
ajaxStart: function () { $(this).show(); },
ajaxStop: function () { $(this).hide(); }
});
});
</script>
html of Master page
<div id="loading" class="display: none;">
<h2>Loading...</h2>
</div>
Try this sample code:-
var $loading = $('#div_Loader').hide();
$(document).ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
setTimeout(function () {
$loading.hide();
}, 1000);
});

Categories

Resources