Clicking several times on the link run several ajax-requests. That is why it is hang browser will and is run code js bad. how can to disable link after innitial click and enable when ajax-request is finished?
With respect
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});
change link to # after clicking
$("#link").click(function(){
var href = $(this).attr('href');
$(this).attr('href', '#');
var $this = $(this);
$('.results').load(url, function(){
$this.attr('href', href);
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
});
});
return it after ajax is done
well you could hide it and show it back after the call has finished:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
//hide it
$(id).hide();
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
//show it
$(id).show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});
Simply make the link disabled:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
// disable the link
$(id).removeAttr("href");
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
});
// enable the link again
$(id).attr("href", url);
});
$('a#YourLinkId').click(function() {
// Your ajax code
return false; // Disable the link
});
Related
I have a script that looks like this:
var baseUrl = 'http://ab3.0e7.myftpupload.com/idmatch_process.php?idmatch_process.php?quizid=". urlencode($quiz_id) ."&escalation=". urlencode($escalation) ."&correctrule=". urlencode($correctrule) ."&page=" . $next_page ."&ans=';
$(document).ready(function () {
// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e) {
e.preventDefault();
if ($(this).is(':checked')) {
// read in value
var queryString = $(this).val();
// loop through siblings (customize selector to your needs)
var s = $(this).siblings();
$.each(s, function () {
// see if checked
if ($(this).is(':checked')) {
// append value
queryString += ' OR ' + $(this).val();
}
});
// jump to url
window.location = baseUrl + queryString;
}
});
});
Basically I am getting the value of the checked box and then appending it to the and of baseUrl. Then i am automatically changing the window location. What i would like to do is have the window location changes not on checkbox click but on a button click that I will add. Anyone have an easy way of doing this?
Store your ulr in a global var.
show the button only if url is not empty and redirect on click.
var baseUrl = 'http://ab3.0e7.myftpupload.com/idmatch_process.php?idmatch_process.php?quizid=". urlencode($quiz_id) ."&escalation=". urlencode($escalation) ."&correctrule=". urlencode($correctrule) ."&page=" . $next_page ."&ans=';
var newurl="";
$(document).ready(function () {
// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e) {
e.preventDefault();
if ($(this).is(':checked')) {
// read in value
var queryString = $(this).val();
// loop through siblings (customize selector to your needs)
var s = $(this).siblings();
$.each(s, function () {
// see if checked
if ($(this).is(':checked')) {
// append value
queryString += ' OR ' + $(this).val();
}
});
// jump to url
newurl = baseUrl + queryString; //setting new url
$("#yourbutton").show();
}
});
$("#yourbutton").click(function(){
if(newurl!="")
window.location.href=newurl;
}
});
If you move the declaration of queryString to the outer scope you can use it later on click.
$(document).ready(function () {
var queryString = '';
// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e) {
e.preventDefault();
if ($(this).is(':checked')) {
// read in value
queryString = $(this).val();
// loop through siblings (customize selector to your needs)
var s = $(this).siblings();
$.each(s, function () {
// see if checked
if ($(this).is(':checked')) {
// append value
queryString += ' OR ' + $(this).val();
}
});
}
});
$('button.submit').on('click', function() {
// jump to url
window.location = baseUrl + queryString;
});
});
You can create a button that onclick does what you are doing now on document ready, that should work.
I have a forum that has a "subscribe" and "unsubscribe" button. When you hit it once, it changes but then doesn't switch back again until the page is refreshed.
http://jsfiddle.net/7QPyL/
Here's my code:
$(document).ready(function () {
// Subscribe to topic subscribedtotopic
$(".notsubscribedtotopic").click(function () {
var topicid = $(this).attr('rel');
$(this).slideUp('fast');
$(this).html('Unsubscribe From Topic');
$(this).removeClass('notsubscribedtotopic').addClass('subscribedtotopic');
$(this).slideDown();
$.get("/base/Solution/SubScribeToTopic/" + topicid + ".aspx",
function (data) {
var result = $('value', data).text();
});
return false;
});
// UnSubscribe to topic subscribedtotopic
$(".subscribedtotopic").click(function () {
var topicid = $(this).attr('rel');
$(this).slideUp('fast');
$(this).html('Subscribe To Topic');
$(this).removeClass('subscribedtotopic').addClass('notsubscribedtotopic');
$(this).slideDown();
$.get("/base/Solution/UnSubScribeToTopic/" + topicid + ".aspx",
function (data) {
var result = $('value', data).text();
});
return false;
});
});
It does not work because the class is not there when you add the event handler, so it can not find the element.
$(".notsubscribedtotopic") and $(".subscribedtotopic") do not magically select new elements as they are added to the page.
You should write one function and just toggle the state.
$(".subscribe").click(function () {
var link = $(this);
var isSubscribbed = link.hasClass("subscribedtotopic");
link.toggleClass("subscribedtotopic notsubscribedtotopic");
...
});
I would set up your code to be something like this:
$(document).ready(function () {
// Subscribe to topic subscribedtotopic
function subscribetotopic() {
var topicid = $(this).attr('rel');
$(this).slideUp('fast');
$(this).html('Unsubscribe From Topic');
$(this).removeClass('notsubscribedtotopic').addClass('subscribedtotopic');
$(this).slideDown();
$.get("/base/Solution/SubScribeToTopic/" + topicid + ".aspx",
function (data) {
var result = $('value', data).text();
});
return false;
}
// UnSubscribe to topic subscribedtotopic
function unsubscribetotopic() {
var topicid = $(this).attr('rel');
$(this).slideUp('fast');
$(this).html('Subscribe To Topic');
$(this).removeClass('subscribedtotopic').addClass('notsubscribedtotopic');
$(this).slideDown();
$.get("/base/Solution/UnSubScribeToTopic/" + topicid + ".aspx",
function (data) {
var result = $('value', data).text();
});
return false;
}
});
And then make a simple onclick call in your HTML element, like so:
<button onclick="subscribetotopic()">Subscribe</button>
If you'd prefer to keep your code the way it is, then clarify which element you want to have active.
Example (simply set a div w/ id mymainelement and button w/ id subscribebutton):
$(#mymainelement .subscribebutton).click(function() { ... });
If you'd prefer to toggle the button instead of having two separate elements, check out #epsacarello's answer.
I have ,
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
});
my problem is when I click outside arrow do not return first position what I must change ?
i can't use css and toggle whit jquery I need to use images with outside place
http://jsfiddle.net/cYCnD/9/
You should add the following handler:
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
$('.arrow').attr('src', 'select_arrow.png');
}
});
See my fiddle: http://jsfiddle.net/cYCnD/10/
The whole code should look like this:
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
allArrows.attr('src', 'select_arrow.png');
}
});
});
If I understand you correctly, you want to reset the arrows positions when a user clicks elsewhere on the page.
If so, I believe this will work:
$(document).click(function(e){
if(!$(e.target).hasClass('arrow'))
$(".arrow").attr("src", select_arrow.png)
});
I'm sure this is very simple, but I'm not getting it.
I'm using the following AJAX script to load content from a particular div of an external page into a div of the same name on my root page.
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
$el;
$(document).delegate(".dyn a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
});
});
$(".dyn a").removeClass("current");
$(".dyn a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Could someone please help me with changing the title of the root page for the title of the page I am loading?
I have tried using:
var newTitle = $(responseHtml).filter('title').text();
document.title = newTitle;
As it mentions in this post, which almost worked but stopped the ajax functioning correctly. I'm not sure, though whether I am placing this in the right place.
Thanks in advance!
Could you possibly want: window.top.document.title = newTitle; ?
I managed to achieve this by adding the following to the hashchange function:
String.prototype.toTitleCase = function(n) {
var s = this;
if (1 !== n) s = s.toLowerCase();
return s.replace(/\b[a-z]/g,function(f){return f.toUpperCase()});
}
newHash = window.location.hash.substring(1);
function changeTitle(title) {
document.title = window.location.hash.replace("#","").replace(/[_]/g,"").replace(".html","").replace("and","+").toTitleCase(); }
changeTitle("");
This takes the title from the page filenames, removes the hash and any underscores, then capitalizes the first letter of each word.
I'm certain there's a better, simpler way of doing this. What I've got will do for now.
I want to create a Javascript file to do these operations:
Pass the current link to the other page
Click on hypertext or image that is created dynamically in JavaScript file to redirect
Just I want to have a Javascript link in the html body and not other thing same this :
<div>
<script type="text/javascript" src="JScript.js"></script>
</div>
And in the JavaScript file I have these:
var DivTag = document.createElement("Div");
DivTag.setAttribute('ID', 'MyDivTagID');
$(document).ready(function () {
$("$MyDivTagID").click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + window.location;
});
});
This is not working. Please help me.
Several issues
you never added the div to the page
you used $ instead of # to access the div by ID
you do not consistently use jQuery
Plain JS: DEMO HERE
window.onload=function () {
var DivTag = document.createElement("div");
DivTag.setAttribute('id', 'MyDivTagID');
DivTag.innerHTML="Click";
DivTag.onclick = function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
}
document.body.appendChild(DivTag);
}
Using linked image:
window.onload=function () {
var DivTag = document.createElement("div");
DivTag.setAttribute('id', 'MyDivTagID');
var anchor = document.createElement("a");
anchor.href="#";
anchor.onclick = function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
}
var img = document.createElement("img");
img.src="image.gif";
img.style.border="0";
anchor.appendChild(img);
DivTag.appendChild(anchor);
document.body.appendChild(DivTag);
}
jQuery: DEMO HERE
$(document).ready(function () {
$('body').append('<div id="MyDivTagID">Click</div>');
$("#MyDivTagID").click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
});
});
A small change to the jQuery code from mplungjan:
Change:
$(document).ready(function () {
$('body').append('<div id="MyDivTagID">Click</div>').click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
});
});
To:
$(document).ready(function () {
$('body').append('<div id="MyDivTagID">Click</div>').find('#MyDivTagID').click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
});
});
If you output e.currentTarget from the anonymous click handler function you get body since the event handler was attached to the body in mplungjan's solution. All I did was add .find('#MyDivTagID') directly after the .append() function so the click handler gets attached to the div and not the body.