Hi I have a problem that I cannot work out I have a HTML button code is below when I click this I want a java script function to run that will display links on the page and then when I press the second button I want a separate set of links to display any ideas how to do this all my HTML elements are within a
my HTML button is this i have put type on the button because it was acting like a submit button when it was within a form.
echo"<button type=\"button\" id=\"1\" onclick =\"display(firstbox)\">";
echo "Firstbox";
echo "</button>";
this is the div that everything is displayed within
echo "<div id=\"links\">
echo "</div>";
my JavaScript function is this
$("#1").click(function(){
$("#links").text("'<div id="id">' heeellllooooo '</div>' ");
});
when I try this nothing is displayed when I get rid of the HTML elements it shows the hello is it because I have used .text do I need to change this to something else or is there a better way to do this using a different javascript or jquery functions or maybe css anything would be great
any ideas or help would be much appreciated i just cant seem to get this to work no matter what i try
in the end i would like these links within the section it says hello these are the links
<br/>
<br/>
Guide to Producing a Video
<br /><br />
Guide to Producing a Academic Exercise
<br /><br />
Questionnaire
<br /><br />
Guide to Producing a Video
<br /><br />
Guide to Producing a Academic Exercise
<br /><br />
Questionnaire
Use .html(). $.html() treats the string as HTML, $.text() treats the content as text.Try this:
$("#1").click(function(){
$("#links").html("<div id=id>heeellllooooo</div>");
});
Try this, DEMO
$("#1").click(function(){
$("#links").html('<div id="id">heeellllooooo</div>');
});
problem in quotes and tag
$("#links").html("<div id='id'> heeellllooooo </div>");
if id is a javascript variable.
Related
I'm trying to understand and figure out if the code generated by JavaScript will provide info for screenreaders like regular HTML tags. I'll show you what I mean.
I want my div1 text to change relatively.
<script>
function changeText()
{
document.getElementById('div1').innerHTML = '<input type="button" onclick="changeText2()" value="Change Text2" />';
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input type="button" onclick="changeText()" value="Change Text" />';
}
</script>
<div id="div1">
<input type='button' onclick='changeText()' value='Change Text'/>
</div>
It does the trick and I'm very excited by that, because I'm very new to coding, but I want my site to be adoptable for blind people who use screenreaders. When I checked the generated HTML code, the code does not change by pressing the button, so I assume the screenreaders will be reading this first button(in the HTML layout) without paying any attention for the generated code.
If I'm right, what can I do about it? Is there any way to change text like that.
Look at Accessible Rich Internet Applications (WAI-ARIA).
I need help with jQuery solution to pass dynamically generated values to hidden input:
<input type="hidden" id="hideme" value="">
and dynamically generated values are:
<?php $sql=mysql_query("SELECT * FROM table"); ?>
<?php while($rows = mysql_fetch_array($sql)) { ?>
<input type="hidden" name="prefix" id="prefix" value="<?php echo $rows['CardPrefix']; ?>">
<input type="image" id="logoimage" src="/assets/uploads/<?php echo $rows['Logo']; ?>" />
<?php } ?>
I tried couple of jQuery script from StackOverflow but they seem not working for me becuase both the input value and image dynamically generated and I can't figure out how to insert specific value to hidden input by clicking respective image.
Any Help will be appreciated.
Regards.
Here is link to fiddle where it is working as you wish http://jsfiddle.net/xqn6v6wp/
$( document ).ready(function() {
$(".clickableImage").click(function(event) {
var dynamicValue = $(this).data('dynamic');
alert('Button pressed with value: '+dynamicValue);
$('#hideme').val(dynamicValue);
});
});
I got rid of id's in your images because they were not unique and you don't need them in this approach. And made hideme visible so you can see it in this demostration (it will behave the same when you make it hidden):
<input id="hideme" value="">
<input class="clickableImage" type="image" src="/assets/aaa" data-dynamic="1"/>
<input class="clickableImage" type="image" src="/assets/bbb" data-dynamic="20"/>
<input class="clickableImage" type="image" src="/assets/ccc" data-dynamic="333"/>
This is more dynamic approach, I gave each image a class of clickableImage and then in javascript attached a event to it (so you can have 1 or 100 it will be the same code). Inside the event handler I will get data field from inside the clicked html tag. You can use data- attributes to send some information to your javascripts http://www.w3schools.com/tags/att_global_data.asp It's much more modern approach than having extra hidden input next to it.
It's very simple approach and it's pretty robust, independent of IDs, you are in control on which images it will be working and on which it will not (by adding the clickableImage class). Theoretically it should work on any html tag not just images. And it's clean because your dynamic values are together with images in one html tag, you don't have to have two of them and all information is self contained.
PS:You will need include jQuery javascript framework for this.
Ids have to be unique.
This will work without id="prefix" and id="logoimage" on the inputs.
$('input[type="image"]').on("click", function() {
$("#hideme").val($(this).prev("input").val());
});
fiddle
Hi before I put my code in im just going to briefly explain what im trying to do. I have a "live search" page where if a user types "A" all results that have an A in it are shown and if "AB" then all that have AB.
What I have done is made buttons appear next to each result so that when I click a particular one, another page is run and something appears on the right hand side. I'm trying to do this through ajax but it just is not working! Eventually, on the right hand side i'll have data from my sql database but for now im just trying to display basic html. Could someone help please?
the live search page:
<form name="searching" method="post">
Search<input type="text" name="search" OnKeyUp="dynamicSearch();">
<div id="sResults"></div>
</form>
Beneath this I have my "dynamicSearch" script which is just the xmlhttp request which gets my searchCars.php and displays data.
The searchCars.php page (where the ajax script will be).
echo "<input type='button' class='viewbutton'>" . $row['carName'] . "</a>";
<div id="rightdiv" style="width: 60%; float:right">
</div>
Above this button I have my SELECT * statements and that's all.
Ajax script on this page:
$( document ).ready(function() {
$(".viewbutton").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#rightdiv").empty();
$.post("test.php",
function(data) {
$("#rightdiv").append(data);
}
);
});
});
});
All that test.php contains is:
<html>
<body>
<h2>test</h2>
</body>
</html>
Any help would be great, thanks.
This line looks suspicious:
echo "<input type='button' class='viewbutton'>" . $row['carName'] . "</a>";
<input> isn't closed (like <input /> or </input>) and there's some unpaired </a> there. Something's wrong here, either:
You have opened that <a> somewhere before that code and you have <input> wrapped in <a>, or
It was an <a> before, but you have partially changed it to <input>
Anyway, your browser is trying to fix the markup and messes it up even more. As a final result, there's no .viewbutton element to bind event to or it's not the element you expect.
I would try something like this:
echo "<button type='button' class='viewbutton'>" . $row['carName'] . "</button>";
Right now it looks like you are trying to loop through each button that is appended and put a click function on each. However, you do not need to do this, and this is where your issue could reside. The way do accomplish what you want to accomplish can work like this:
$(document).ready(function(){
$(".viewbutton").click(function(){
//Put your ajax here
});
});
Example: http://pastebin.com/U029bDed
I have a page on which a list of properties is displayed (i.e houses). This list is made up using CSS. So I've built a second CSS class, which makes the properties/houses align properly in 2 columns. Until now I did this by pressing a button, posting back, and outputting different html (basicly the same, but with other Css class references).
Now I found this question on SO and I implemented a basic scenario. A div with the class "yellow" is written to the html page, and a button changes this class to "red". This happens, but the div immediately changes back to class "yellow".
I'm a very very beginner in JS but not a beginning programmer. This would be a great addition to my site, but I can't find a proper answer. I apologize if this question is redundant.
<script type="text/javascript">
function changeView() {
document.getElementById("box").className = " red";
}
Grtz, thanks in advance, Christophe,
By default a button element is of type 'submit' - which will cause your browser to post back to the server.
Try changing the type to button instead.
<input type="button" ....
More info on the difference here... Difference between <input type='button' /> and <input type='submit' />
If your button causes a postback (possibly a server control with an asp: tag), the javascript changes you made will be lost as by default an asp button submits a page to the server as a result of which your page reloads.
If all you need to change the class of a div make it a simple html button like
<input type="button" onclick="changeView()" value="Change" />
i just can't get rid of such .... error
i'm using a free textbox control on my page that is hidden by setting css properties to "none"
i want to make this free textbox available for edit whenever a user clicks on another
button actually by setting style.. to "block" without postingback my page
the result is showing the textbox but in a way that it's not enabled
i need some event to post back the page to make it available for edit
i know the reason should be something with rendering and etc but how can i solve this
in a way i achieve my targets on page such as:no postbacks ,. ...
any hep would be appreciated
thank all
using jquery
$(document).ready(function() {
$("#buttontoclick").click(function()
{
$("#textboxtoshow").show();
});
html
<input id="buttontoclick" type="submit" Text="Click me" />
<input id="textboxtoshow" type="text" style="display: none" />