I have a series of yes/no questions that I am displaying one at a time using the Cycle plugin.
The questions are in a <ul> element.
When a question is answered, an AJAX request displays the proportions of people who answered yes or no to that question using a php script, and the question is removed from the <ul>.
This is where the problem is.
The author of the cycle plugin himself says that it is necessary to stop and restart the slideshow to remove a slide.
When I try to do this by calling $element.cycle('destroy') or $element.cycle('stop'), remove the element, then restarting with $element.cycle(), the cycle does not continue as expected. Only one transition happens, and then the slideshow stops.
Here is my JS:
$j = jQuery.noConflict();
$j(document).ready(function() {
var $questions = $j('#questions');
$questions.cycle();
$j('#survey input').click(function(e) {
e.preventDefault();
question = parseInt($j(this).attr('name'));
answer = $j(this).attr('value');
$j.post( 'process.php', {
question: question,
answer: answer
}, function(data) {
$j('#result p').replaceWith('<p>' + data + '</p>');
});
$questions.cycle('destroy');
$j(this).closest('.question').remove();
$questions.cycle();
});
});
And this is my HTML:
<ul id="questions">
<li class="question">
<h3>do you like to stay at home?</h3>
<form id = "survey" action="process.php" method="post">
<input type="submit" name = "2" value = "yes" >
<input type="submit" name = "2" value = "no" >
</form>
</li>
<!-- four or five more questions here -->
</ul>
<div id="result"><p></p></div>
What is going on here?
After much fiddling (pun intended) around with this, it appears the $.('destroy') function is not properly clearing its internal state which is causing the issue; the problem persists with or without removing any slides.
I've created a workaround here: http://jsfiddle.net/eF72L/2/
I hope this helps!
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to create a function in my customizer on wordpress to display certain fields but I keep getting back undefined when everything seems to be aligned in my JS file correctly.
function cta() {
//Selector for the entire radio area that "should return" the value (either "one" or "two")
var ctaOptions = $("input[name='_customize-radio-cta-type']");
//The ID selector for option one to check if this field is "checked"
var ctaOne = $('#_customize-input-cta-type-radio-one');
//The ID selector for option Two to check if this field is "checked"
var ctaTwo = $('#_customize-input-cta-type-radio-two');
//This console log always returns undefined, but returns the element without the .val()
console.log(ctaOptions.val());
//This always returns false even when I can see in the inspector this element is checked="checked"
console.log(ctaTwo.is(':checked'));
if(ctaOne.is(':checked')) {
$('#customize-control-button-two-label').addClass('hidden');
}
else if(ctaTwo.is(':checked')) {
$('#customize-control-button-two-label').removeClass('hidden');
}
}
I am using an unscores boilerplate for my wordpress theme, but unsure if that has anything to do with the conflict in the javascript. I have also confirmed that the ID's are correct using the inspector, just for some reason it breaks when trying to get is checked or the values.
Here is the HTML of the area I am referring to
<li id="customize-control-cta-type" class="customize-control customize-control-radio" style="display: list-item;">
<span class="customize-control-title">Call To Action buttons on banner</span>
<div class="customize-control-notifications-container" style="display: none;">
<ul></ul>
</div>
<span id="_customize-description-cta-type" class="description customize-
control-description">How many buttons do you want?
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-one" type="radio" aria-
describedby="_customize-description-cta-type" value="one" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type">
<label for="_customize-input-cta-type-radio-one">one</label>
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-two" type="radio" aria-
describedby="_customize-description-cta-type" value="two" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type" checked="checked">
<label for="_customize-input-cta-type-radio-two">two</label>
</span>
</li>
Try setting up a setTimeout(function() around your current js function, it might be that your js script is loaded before the php actually populate the input.
$( document ).ready( function () {
setTimeout( function () {
//Your function goes here...
}, 1);
} );
EDIT 1: Regarding your last comment. If the input value is intended to be fetch from a user input then you should add an event listener. something like this...
$('#_customize-input-cta-type-radio-two, input[name="_customize-radio-cta-type"], #_customize-input-cta-type-radio-two').change(function(){
});
I have came to the conclusion that my problem wasn't the javascript, it was down to the root of the selector. I still haven't been able to fix it, but my question is unanswerable as it wasn't the problem. Thank you for the feedback.
Edit 1:
PROBLEM FOUND! It wasn't my JS that was the problem at all. It was the way i brought in the previous file. I needed to enqueue a JavaScript file to customize_controls_enqueue_scripts. When I took my script and added it to a new JS file and put the below code into my customize.php
function theme_slug_customizer_controls() {
wp_enqueue_script( 'theme-customizer-controls', get_template_directory_uri() . '/js/customize-controls.js', array( 'jquery' ), '20170412', true );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_customizer_controls' );
I am trying to show-hide div using jquery on click of radio buttons. It might be a weird question to ask but my brain is not digging more and i know that is easy task to do.
Below is HTML
<input type="radio" value="Active Now" class="tabActive" id="active-radio1"
/>Participations
<input type="radio" value="Not Active Now" class="tabNotActive"
id="active-radio2" />
Droppers
<div id="tabActive" class="tab-content">
</div>
<div id="tabNotActive" class="tab-content hide">
</div>
Below is JS
$("input:radio").off().on('click',function()){
var value = $(this).attr("class");
$("#"+value).show();
// I also tried
$("#"+value).toggleClass('hide'); /*Not right way, i know :)*/
$("#"+value+" .tab-content").toggleClass('hide')
});
I am not able to switch between divs due to hide class, but nothing worked
Note: The hide class is being added by framework and i can not modify it.
So, i need a perfect way to show hide these divs.
Try this.
$('input[type=radio]').on('click',function()) {
var id = $(this).attr('class'); // this is very prone to problems
$('.tab-content').addClass('hide')
$('#' + id).removeClass('hide');
});
You can try this one:
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
DEMO FIDDLE
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am a beginner to Javascript. Sorry for asking here, but I couldn't find a tutorial for this, and I hope someone can point me in the right direction.
I have an HTML page that has an unordered list on it. I have an input form that allows the user to submit a message. When the user submits a message, I want it to be added to the unordered list. This will be a permanent change to the website.
How do I make Javascript interact with the HTML like that?
---- Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>example 1</li>
<li>example 2</li>
</ul>
<form>
<input type='text' name='Message' value="">
<input type='submit'>
</form>
</body>
</html>
The question's a little vague and I think it would be helpful to understand the concepts rather than have the specific code.
What you're trying to achieve, if you just want to manipulate the HTML using javascript, is to have an understanding of how JS can work with the DOM.
You do this by targeting elements. And you can target them either by their element type (div), a CSS classname, or most commonly by an id tag attribute.
In the example you've got above, when you submit the form you will need to call a function that will target the message input, grab its value. Then target the unordered list and append the HTML to the end of it containing the new message.
Since you're new, I would recommend learning jQuery. It'll get you up and running pretty quickly and you won't have to deal with as much diversity in varying browser implementations.
This will be a permanent change to the website.
NO this wont be..you probably need to store them in you db then.Following is just a demo of how to append to unordered list
HTML,
<ul id='message'>
<li>msg 1</li>
<li>msg 2</li>
</ul>
<form onsubmit='appendMessage(); return false;'>
<input type='text' id='message_text' value="" />
<input type='submit' />
</form>
JS
function appendMessage() {
var node = document.createElement("LI");
var message = document.getElementById('message_text').value;
var textnode = document.createTextNode(message);
node.appendChild(textnode);
document.getElementById("message").appendChild(node);
}
DEMO
var button = document.getElementsByTagName("input")[1];
button.onclick = function (){
var ul = document.findElementByTagName("ul")[0];
var li = document.createElement("li");
li.appendChild(document.createTextNode(this.value));
ul.appendChild(li);
};
Perhaps you could use LocalStorage and some of the functions above to archive that.
Here are a few examples of how to use LocalStorage and how to handler with objects(html tags with content for example).
http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/
Storing Objects in HTML5 localStorage
The drawnback´s are the support for older browsers and that the changes will only be available for the client where the changes where made.
The best aproach, it´s to combine the changes in javascript with some kind of storage(localstorage, SQL, NoSQL)
http://www.mongodb.org/ <--- NoSQL database
I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.
jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});
I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...
In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!
I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.
The following code was a reply to a question posted last year. It’s the best example I can find to want I am looking to do. I have HTML knowledge but my JS is limited – thanks for your patience. You can view the code here. The thread can be found here.
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
</script>
<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
How can I get multiple images to display when a checkbox has been clicked? The images would be the same, position different.
When the images are displayed I would like to have a onclick event or mouseover that would display additional info– what is the best option for this, JS or image map (hotspots)?both? I’ve used hotspots before but only by itself not with JS. Any advice on this would be appreciated.
The following link is an example of what I am trying to achieve but on a smaller scale. http://www.cozumel.travel/learn/map.cfm
If you want to use the same code but for multiple images, you can add a function that would toggle every image you defined for the onChange event.
here is a function that would do:
function toggleMultiVisibility (a){
for (var i = 0; i < a.length; i++){
toggleVisibility(a[i]);
}
}
and here is the change you should do on the HTML:
onChange="toggleMultiVisibility(['imgemployment','imgpopulation']);"
here is a working example from your code: http://jsfiddle.net/Pu2E7/