I want to run a code.
function myfunc() {
$("div[id='zeus']")
.find('a')
.each(function() {
if ($(this)
.text() == "Hey Start") {
$(this)[0].click();
}
else if ($(this)
.text() == "Refresh") {
$(this)[0].click();
}
});
}
var fill= setInterval(myfunc, 2000)
I want the above code to run on a html page where it has 2 links,
1) Hey Start
2) Refresh
I want the code to press the "Refresh" link every 2 seconds(now "Hey Start" link is not present). Due to the clicking of Refresh link the "Hey Start" link appears. Now the problem is the above code is clicking both the links simultaneously from now on. I want to stop the "Refresh" clicking as soon as the "Hey Start" link appears.
Can it be done? Please show it.
If you have multiple elements to process, but need to execute only one based on option then you can
function myfunc() {
var array = ['Hey Start', 'Refresh'];
array.some(function(text) {
var $el = $("#zeus").find('a:contains("' + text + '")');
if ($el.length) {
$('#result').html('clicking on: ' + $el.text())
$el[0].click();
return true;
}
})
}
var fill = setInterval(myfunc, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zeus">
<a>Refresh</a>
</div>
<button onclick="$('#zeus').append('<a>Hey Start</a>')">Start</button>
<button onclick="$('#zeus a:contains(\'Hey Start\')').remove()">Remove</button>
<div id="result"></div>
Since you want to process the anchor elements based on priority, you need to define one, since in your case it is based on the text content, here we are using an array which has an ordered list of texts based on its priority. So if there is an anchor with text which is in the array then that anchor will the processed before an anchor whose text comes after that.
The implementation here loops through the array and checks whether there is an anchor with the given text, if so then it triggers the click event of that element, and it returns true, so that none of the elements after the current item is processed(See Array.some())
It's because you're iterating about every a found in the #zeus...
So, if you clicked one link and you don't want to click another link you must jump outside the each-loop somehow.
Break it by returning false, like on the documentation page: http://api.jquery.com/jquery.each/ when some conditions are met. E.g. add data to one link or add a class.
Simple solution:
function myfunc() {
$("div[id='zeus']")
.find('a')
.each(function() {
if ($(this)
.text() == "Hey Start") {
$(this)[0].click();
return false;
}
else if ($(this)
.text() == "Refresh") {
$(this)[0].click();
return false;
}
});
}
var fill= setInterval(myfunc, 2000)
Related
I have this function where I toggle a class on click, but also append HTML to an element, still based on that click.
The problem is that now, I'm not listening to any DOM changes at all, so, once I do my first click, yup, my content will be added, but if I click once again - the content gets added again, because as far as this instance of jQuery is aware, the element is not there.
Here's my code:
(function($) {
"use strict";
var closePluginsList = $('#go-back-to-setup-all');
var wrapper = $('.dynamic-container');
$('#install-selected-plugins, #go-back-to-setup-all').on('click', function(event) {
$('.setup-theme-container').toggleClass('plugins-list-enabled');
if ( !wrapper.has('.plugins-container') ){
var markup = generate_plugins_list_markup();
wrapper.append(markup);
} else {
$('.plugins-container').hide();
}
});
//Below here, there's a lot of code that gets put into the markup variable. It's just generating the HTML I'm adding.
})(jQuery);
Someone suggested using data attributes, but I've no idea how to make them work in this situation.
Any ideas?
You could just do something like adding a flag and check for it before adding your markup.
var flag = 0;
$('#install-selected-plugins, #go-back-to-setup-all').on('click', function(event) {
$('.setup-theme-container').toggleClass('plugins-list-enabled');
if ( !wrapper.has('.plugins-container') ){
var markup = generate_plugins_list_markup();
if(flag == 0){
wrapper.append(markup);
flag = 1;
}
} else {
$('.plugins-container').hide();
}
});
If you want to add element once only on click then you should make use of .one() and put logic you want to execute once only in that handler.
Example :
$(document).ready(function(){
$("p").one("click", function(){
//this will get execute once only
$(this).animate({fontSize: "+=6px"});
});
$("p").on("click", function(){
//this get execute multiple times
alert('test');
});
});
html
<p>Click any p element to increase its text size. The event will only trigger once for each p element.</p>
I want to check if the textarea is empty and then remove the element prev() to it. How do I do so? My attempt was this:
if($(".inputs").val().length == 0){
$(this).prev().hide();
};
Do I have to check for "keypress"? The element I am trying to hide was show() after a "keypress" event. But I want to hide it immediately if the textarea is empty.
Edit: Question 2: I was using this code to show an element after first input:
$(".inputs").one("keypress", function(){
$(this).prev().show().addClass("animated slideInUp");
});
but now that I want to hide and show depending on the length of the textarea should I do something like this:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
else if ($(".inputs").val().length == 1) {
$(this).prev().show().addClass("animated slideInUp");
}
If you want to hide the previous element when you delete content within the <textarea>, then .keyup is the way to go:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Hidden when all content is deleted, doesn't restore</div>
<textarea class="inputs"></textarea>
Keep in mind that this won't restore the previous element when you start typing again. If you'd like to do that, you'll need to extend the script a little to also .show() the previous element:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
else {
$(this).prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Hidden when all content is deleted, restores</div>
<textarea class="inputs"></textarea>
Note that input is used over keyup in case the user edits the field without using the keyboard.
Hope this helps! :)
I have two files: a html file (with the code below) and a javascript file (it creates a value for the <span id="quantity">) The code works fine, but the word only changes if I refresh the whole page.
I want the word to change from 'articles' to 'article' or vice versa as soon as the 'quantity' changes. Is this possible? And if so, how?
<span id="quantity" class="simpleCart_quantity"></span>
<span id="quantityText"></span>
<script type="text/javascript">
$(window).load(function()
{
var quantity = document.getElementById("quantity"),
quantityText = document.getElementById("quantityText");
if (parseInt(quantity.innerHTML, 10) === 1) {
quantityText.innerHTML = "article";
} else {
quantityText.innerHTML = "articles";
}
});
</script>
You might want to look into MVVC framework like Knockout JS. For example, you would set the contents of the #quantity <span></span> element to be an observable.
However, try reading this SO thread to find a solution similar to what you probably are hoping for. In summary, change events only occur from the browser on the blurring of form fields, so you'll need to implement a $("#quantity").trigger('change')
Once you have a trigger set-up after the DOM element has been loaded, you can do the following:
$('#myParentNode').on('change','#mynum', function() {
// Add your logic in here
$('#quantityText').text('articles') .... .. .. .....
});
Normally, the span element doesn't fire a change event, so you cannot subscribe to it, like you would normally do in an input element.
However, you can trigger such an event using jQuery in the same code, which changes the value of the span (I assume there is such code, because normally spans don't change value).
Here is an example which simulates this change every 10 seconds, and triggers the change event. It also includes a handler for that change event, which duplicates the value in the other span.
<span id="quantity" class="simpleCart_quantity">1</span>
<span id="quantityText"></span>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var quantity = $("#quantity"),
quantityText = $("#quantityText");
setInterval(function() {
var currentVal = parseInt(quantity.html());
if (currentVal >= 10) {
quantity.html(1);
}
else {
quantity.html(currentVal + 1);
}
quantity.trigger('change');
}, 10000);
quantity.on('change', function(sender, args) {
quantityText.html($(this).html());
});
});
</script>
I'm creating a dropdown menu for mobile site
http://gthost.dyndns.org/kudu/en/
when I click on My Account and click on Who we are, submenu still show,,
I Want to hide it after I click on the link.
this is JavaScript code
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".account").click(function () {
var X = $j(this).attr('id');
if (X == 1) {
$j(".submenu").hide();
$j(this).attr('id', '0');
} else {
$j(".submenu").show();
$j(this).attr('id', '1');
}
});
//Mouseup textarea false
$j(".submenu").mouseup(function () {
return false
});
$j(".account").mouseup(function () {
return false
});
//Textarea without editing.
$j(document).mouseup(function () {
$j(".submenu").hide();
$j(".account").attr('id', '');
});
});
i would try using:
$('.submenu').css({display:"none"});
instead of .hide();
Two things strike me as odd here.
Why are your ID's integers - valid names start with [a-z_] etc.
Why are you changing the ID? An ID is meant to be a unique identifier and should persist as long as the element does. If you wish to store information about the state of an element within the element itself, then perhaps look into data attributes.
Without seeing your HTML structure everyone is going to be guessing but rather than whatever you are trying to do with the ID's it looks like you could logically use jQuery.toggle:
$j(".account").click(function(){
$j(".submenu").toggle();
});
I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?
You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.
This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});
I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.