After looking for a few days this answer comes close but still wont fix my problem jQuery: How to assign a variable inside of .html
I'm trying to get the vaule of the textbox into the scr part of a frame. I understand that from the above link that javascript must pull out the variable or it treats it as text but after trying for a few days cant get it to work. The response lands in a div on the page
<script>
$(document).ready(function() {
$("#q").bind(
"webkitspeechchange",
function(evt) {
$('.response').html(
"<iframe width='625' height='250' border='0' src='/index.php?q=' + INPUT_HERE + ' /><br> voice search vaule:"+ $(this).val())
.fadeIn();
});
});
</script>
This works for me:
<script>
$(document).ready(function(){
$('#q').on( 'webkitspeechchange', function(e) {
$('#response').html('<iframe width="625" height="250" border="1" src="/index.php?q=' + $(this).val() + '" /><br> Voice search value: ' + $(this).val()).fadeIn();
});
});
</script>
<input type="text" name="q" id="q" x-webkit-speech="x-webkit-speech">
<div id="response"></div>
And here is the JS Fiddle
If you want to remove the surrounding div you can call $('#response').replaceWith(... instead of $('#response').html(..., but be aware that successive searches won't work anymore because #response has been removed from the DOM.
Related
I want to click on a element and get the id from another div which is not related to it.
I tried this:
$(".map_flag").on("click",function(){
var objective = ($(this).attr("data_modal"));
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="map_flag" data_modal="map_1">
<img src="img/image_1.png" alt="image one" >
</button>
<div id="map_1">
<p class="modal_content">place holder</p>
</div>
First of all, custom attributes need to start off with data- not with data_ (note the dash/underscore).
Then
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
first fades in $('#map_1') and then, after that's been done, fades in $('#map_1 .modal'). Not sure if that's intended, but if the #map_1 elements has no further children, you might want to fade in only once.
For the rest, your code should work fine.
I think what you need would be something like this:
<button class="map_flag" data-modal="map_1">
<img src="img/image_1.png" alt="image one" >
</button>
<div id="map_1">
<p class="modal_content">place holder</p>
</div>
And then in JavaScript
$(".map_flag").on("click",function(){
// You should use data-* attributs as jQuery has a special function
// .data("name") that obtains the value of property data-name for example
var objective = $(this).data("modal");
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
});
I am not very confident about my jquery skills, but dont you need to "fade out" before fade In ?
[https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein]
Dynamically added checkbox / radio buttons / rating elements are not firing the attached events in semantic ui. Below is the js fiddle for sample and its not all triggering the events when check box is checked i have tried both 'setting' option and onChange separately as well. nothing is working as expected.
Javascript :
$("#cbdiv").checkbox('setting', 'onChange', function() {
alert("Changed");
});
$("#addcheckboxes").unbind();
var chkcounter = 0;
$("#addcheckboxes").bind('click', function() {
$('#chkgrp').append("<div id='chkbx_'" + chkcounter + "class='ui checkbox'><input type='checkbox' ></div>");
$('#chkbx_' + chkcounter).checkbox({
onChange: function() {
alert('i am added. my id is : ' + $(this).attr('id'));
}
});
});
Html
<div class="field">
<div id="cbdiv" class="ui toggle checkbox">
<input type="checkbox" id="confirm" name="confirmed">
<label>Confirmed</label>
</div>
<div>
<button id="addcheckboxes">Add checkboxes</button>
<div id="chkgrp">
</div>
</div>
</div>
Jsfiddle sample
It is because of the append statement adding wrong id element. After the append statement execute, if you look at your html it will look like below.
<div id="chkgrp">
<div id="chkbx_" 0class="ui checkbox">
<input type="checkbox">
</div>
</div>
After the above code execute, you are searching for the id chkbx_0 through jquery and try to add the onChange event for that. So it is failed. Update your append element syntax like below and it will work.
$('#chkgrp').append("<div id='chkbx_" + chkcounter + "' class='ui checkbox'><input type='checkbox' ></div>");
In the above code, I have closed id string after adding chkcounter id='chkbx_" + chkcounter + "'. In your earlier code you have closed the id string before adding the chkcounter itself id='chkbx_'" + chkcounter + ".
UPDATE
Looks like your semantic css have the following styles.
.ui.checkbox input {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
outline: 0px;
}
Because of the above styles you are not able to see the checkboxs. If you want to see the styled checkbox then you have add the label to your check box and update your code like below.
$('#chkgrp').append("<div id='chkbx_" + chkcounter + "' class='ui checkbox'><input type='checkbox'><label>test</label></div>");
Also I have noticed that you are trying to get the ID of the element using $(this).attr('id'). This statement will give the output undefined, because the checkbox does not have any attribute called id. I hope you are trying to get the id chkbx_0. In that case you have to add your code like below.
$(this).parent().attr('id');
I have updated your fiddle with all the above changes and you can see the demo here.
In checkbox code ID name is not set properly that's is the reason. You can see below working code
$("#addcheckboxes").bind('click', function() {
chkcounter++; // set counter increment
$('#chkgrp').append("<div id='chkbx_"+chkcounter+"' class='ui checkbox'><input type='checkbox' name='checkboxval[]' id='checkbox_id_"+chkcounter+"' ></div>");
$('#chkbx_'+chkcounter).checkbox({onChange:function(){alert('i am added. my id is : '+$(this).attr('id'));}});
});
Hope this will help you.
I want to give user options to edit title of navigation bar. So, when user would click edit, I want to give them a text field and a submit button.
Here is the code(within PHP block)
$n1="<div id='nava' class='nav' >
<a href=#>$nava</a>
<input type='submit' id='nav1' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n2="<div id='navb' class='nav' >
<a href=#>$navb</a>
<input type='submit' id='nav2' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n3="<div id='navc' class='nav' >
<a href=#>$navc</a>
<input type='submit' id='nav3' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
if I do edit(this.id,nava),it gives me object DivElement message,when I do alert.
But I need the id of div as string.Passing the id of submit button works perfectly, but I cannot figure out how to pass the id of corresponding div to edit function. How would I do that?
parentNode is definitely the right way to go about getting the parent Div's id (without using a framework like JQuery). You can read more about it here: https://developer.mozilla.org/en/docs/Web/API/Node.parentNode
Back to your example, you could simply write a JavaScript edit() function like so:
function edit(id) {
var divId = document.getElementById(id).parentNode.id;
console.log(divId);
}
Using your HTML, I have put together a quick fiddle for you to show how this can work
http://jsfiddle.net/wj7bch3m/
Hope that helps!
You could do something like this to change the different navs
html
<div id="nav">
Link
<input type="text" for="link1" id="newLink" class="changeNav"/>
</div>
jquery
$(".changeNav").on("change", function(){
var newLink = $(this).val();
var whichNav = $(this).attr("for");
$("#" + whichNav).empty().append(newLink);
});
here is a JSFIDDLE
Hope this helps
I've been using JQuery and I tried my code on JFiddle and it worked fine but when I do it on my site it doesn't work at all, basically I need a event to be sent when a list item in my userlist is clicked.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://dl.dropbox.com/s/r5pzakk4ikvck3t/style.css?dl=1">
<script src="https://www.dropbox.com/s/2hdvqa4ma51m0pw/jquery-1.9.0.min.js?dl=1"></script>
<title>Chat</title>
</head>
<body>
<div id="userlist-container">
<div id="userlist-title">User List</div><br />
</div>
<div id="main-container">
<div id="messages">
</div>
</div>
<div id="control-container">
<input type="text" id="TxtMessage" placeholder="Message" onKeyPress="SendMsg(event)" style="text-align:center;" >
</div>
<div id="alert-container" hidden="hidden">
<div id="alert-main">
<span id="alert-content"></span>
</div>
</div>
</body>
</html>
Javascript
$("#userlist-container > li").click(function(e) {
alert("TEST");
var username = "#" + this.html + " ";
$("TxtMessage").value(username);
$("TxtMessage").focus();
});
EDIT:
Once the page has loaded it connects to the server and adds <li>lalala</li> inside the userlist-container.
Your selector in the bind is wrong:
$("#userlist-container > li")
There is no li your HTML is:
<div id="userlist-container">
<div id="userlist-title">User List</div><br />
</div>
Also you seem to be missing # for the id selector inside the event.
So your event should probably be similar to:
$("#userlist-container > div").click(function(e) {
alert("TEST");
var username = "#" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
Edit
should have probably told you guys that once it does some wizzard
stuff, li's get added so there are actually li tags in there.
I added your code to a fiddle and no li tags seem to be added when inspecting the DOM.
The fiddle
That could be just the fiddle though, not sure. I'm assuming if the li tags are injected that you need to use delegate binding using on if you are using jquery 1.7 or later or delegate if you are using 1.6 or earlier.
Similar to this:
// jQuery 1.7 or later
$("#userlist-container").on("click", ">li", function(){
alert("TEST");
var username = "#" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
// jQuery 1.4.3 to 1.6.x
$("#userlist-container").delegate(">li", "click", function(){
alert("TEST");
var username = "#" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
Your selectors are wrong, add the # prefix to indicate an id
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
If your click event isn't even firing, make sure that you are attaching the event after the document is loaded
$(document).ready(function(){
//code here
});
so, I have a div with stuff like <h2>s and <img>s in them, and I want it so that if a user doubleclicks on one of them (for example they double click on anything inside the <h2></h2> tags it will turn it into a textbox with <h2>title</h2> inside it...
I just can't figure out how to send to the javascript function what was double clicked on?
try if you are famous with jQuery:
$('#yourDiv *').dblclick(function(event)){
alert(event.target.html());
}
Here is a very bare example for single click:
<script type="text/javascript">
function foo(elem) {
elem.innerHTML = '<input type="text" value="' + elem.innerHTML + '">';
}
</script>
<h1 onClick="foo(this)">Hello</h1>
<h1 onClick="foo(this)">My</h1>
<h1 onClick="foo(this)">Friend</h1>
test live: http://jsfiddle.net/MsTzY/