I am using echo nest API and can't find the problem with my button, why doesn't trigger my function at all! I check my button in chrome debug and shows no activity.
If I enter it trigger the function, but when I click on the button it doesn't trigger my function ?!!!
I need another pair of eyes to check my codes , pleaseeee :)
Thank you!
//Search artists.
function search(){
inputField = document.getElementById("inputField");
callApiSearch ( urlRoot + inputField , parseData);
}
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
window.addEventListener( "load", start, false );
</script>
</head>
<body>
<form id="searchForm" action="#">
<center>
<table>
<thead style="align-text:center" ><img src="images/Logo.png" style="align:center"><br/></thead>
<tr>
<td>Search Artist:</td>
<td> <input id="inputField" type="search"> </td>
<td> <input id="searchButton" type="button" value="Search"></td>
</tr>
</table>
<div id="results"></div>
</center>
</form>
</body>
</html>
in chrome --- > F12 --- > Network
should display all the activities; however mine is empty ... please correct me if I'm wrong?
try this one
html
<form action="#" id="searchForm" name="searchForm">
<img src="images/Logo.png" style="align:center" /><br />
<table>
<tr>
<td>Search Artist:</td>
<td><input id="inputField" type="search" /></td>
<td><input id="searchButton" type="button" value=
"Search" /></td>
</tr>
</table>
<div id="results"></div><br />
</form>
javascript
$("#searchButton").click(function() {
inputField = document.getElementById("inputField");
callApiSearch(urlRoot + inputField, parseData);
});
Put your 'script' block at the end of your html code. Browsers parses html document in top-down fashion and when your following method parsed by your browser
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
, it doesnt know what 'searchButton' is, since 'searchButton' hasn't been parsed yet. Thus it is unable to add event listener to your button and it doesn't work on click
Related
Let's say I have an Admin page with a list of items, and I have various capabilities to modify those records -- Change its name, Delete it, Clear its contents, etc. For example a row would be rendered similar to the following:
const row =`<tr id="id${this.id}">
<td name="name">
<input type="text" placeholder="Set name" value=${this.name} />
<input type="submit" name="setName" value="Save" />
</td>
<td name="size">${this.set.size}<td/>
<td name="elements"><b>{ ${this.renderSetElements()} }</td>
<td name="actions">
<input type="text" placeholder="Add element" />
<input type="submit" name="addElement" value="Add" />
<input type="submit" name="clearElements" value="Clear" />
<input type="submit" name="deleteSet" value="Delete" />
</td>
</tr>`
What would the proper way to add forms here? Should there be one form around the row? Should there be four forms per row -- one for each action? (setName, addElement, clearElements, deleteSet)? Or what is the suggested way to accomplish the above? Additionally, is identifying the row as id${this.id} appropriate, or what's usually the contention for something like that?
The short answer is that you can have a
The form inside a cell td.
<table>
<tr><td><form>...</form></td></tr>
<tr><td><form>...</form></td></tr>
</table>
You can have a table inside a form
<form>
<table>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</table>
</form>
Or you can ditch the form element and use JavaScript to do Ajax:
In this case, I will be using the Javascript library jQuery since it simplifies a lot of stuff; however, you can implement this with pure Javascript if you want to.
// Wait for the document to be fully loaded
$(document).ready(function(){
$(".submit").on("click", function(event){
event.preventDefault();
console.log("submit...");
var url = "https://httpbin.org/get";
var data = {
id: $('#id').val()
};
$.get(url, data, function(result){
console.log("Server received the id number: ", result.args.id);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input class="inputs" id="id" value="0"/></td>
</tr>
<tr>
<td><button class="submit" id="add">Add</button></td>
</tr>
</table>
In your particular case, you might try generate these rows dynamically and using Ajax to send the information to the server, without having to refresh the whole page. Here is an example:
(function(){
let count = 0;
function createColumn(){
let column = $('<td>');
let text = $(`<input type="text" placeholder="Set name" value="${count}">`);
let submit = $('<button class="save" type="submit" name="setName">Save</button>');
column.append(text);
column.append(submit);
return column;
}
function createRow(){
let row = $('<tr>');
row.attr("id", count++);
row.append(createColumn());
return row;
}
let table = $('#table');
$('#btnAdd').on('click', () => {
table.append(createRow());
});
table.on('click', '.save', function() {
let text = $(this).prev().val();
console.log("INPUT TEXT:", text);
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">Add Row</button>
<table id="table">
</table>
I hope you found this informative, useful, and that you can apply it to your particular issue.
So what I have is a form and part of this form will be used to create a jquery dialog. From that dialog is a button, created from asp server control, that I will click. The server control has a function in the code behind that will be called when clicked. The problem I have is that the function in the code behind is not being called. Is there something fundamental that I am missing? Here is what the aspx page look like, stripped down to the bare minimum
<head>
<script>
function PreviewForm() {
$("#emailPreview").attr("style", "");
$("#emailPreview").dialog({
title: "Preview",
width: "890px",
modal: true
});
}
</script>
</head>
<body>
<form id="EmailSend" method="post" runat="server">
<table>
<tr>
<td style="text-align:right">
<input type="button" onclick="PreviewForm();" value="Preview" />
</td>
</tr>
</table>
<div id="emailPreview" align="center" style="display:none">
<fieldset>
<table>
<tr class="Row">
<td class="required">Subject:</td>
<td><asp:Label ID="lblSubj" Runat="server" /></td>
</tr>
<tr>
<td class="field" colspan="2" style="text-align:center">
<input id="btnBack" class="button" type="button" onclick="closeDialog(false);" value="Close" />
<asp:Button ID="Send" class="button" Runat="server" Text="Send"/>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
and the function in the code behind
Private Sub CmdSendClick(ByVal sender As System.Object, ByVal e As EventArgs) Handles Send.Click
lblSubj.Text.Trim(), pBody)
End Sub
When I try debugging the code not thing happens, the break point was not being hit. If I were to make the button visible and click from outside the dialog box that I created then it would work fine.
EDIT
I also tried it where I hide the button outside of the dialog and then click the button once the dialog is closed. so the closeDialog function will look like this with a new input button
function closeDialog(send) {
console.log(send);
if (send) {
$("#emailPreview").dialog("close");
GetFormControl('<%=Send.ClientID%>').click();
console.log(send + " TRUE");
} else {
$("#emailPreview").dialog("close");
console.log(send + " false");
}
}
<div id="emailPreview" align="center" style="display:none">
<fieldset>
<table>
<tr class="Row">
<td class="required">Subject:</td>
<td><asp:Label ID="lblSubj" Runat="server" /></td>
</tr>
<tr>
<td class="field" colspan="2" style="text-align:center">
<input id="btnBack" class="button" type="button" onclick="closeDialog(false);" value="Close" />
<input type="button" onclick="closeDialog(true);" value="Send Email" />
</td>
</tr>
</table>
</fieldset>
</div>
<asp:Button ID="Send" class="button" Runat="server" Text="Send"/>
</form>
I actually get the error
SCRIPT5007: Unable to get property 'click' of undefined or null reference
EDIT 2
As requested, also I do know about using eval, the no no of it, but I am maintaining some else's code here. So let's pretend it is ok
function GetFormControl(fControlName) {
var oControl = eval('document.EmailSend.' + fControlName);
if (oControl == null)
oControl = GetPageElement(fControlName);
return oControl;
}
The problem is that the jQuery UI Dialog function is appending the HTML for the dialog box outside of the form element. See the following question for the solution: jQuery UI Dialog with ASP.NET button postback
Answer: Change
$("#emailPreview").dialog({
title: "Preview",
width: "890px",
modal: true
});
to
var diag = $("#emailPreview").dialog({
title: "Preview",
width: "890px",
modal: true
});
diag.parent().appendTo(jQuery("form:first"));
I have several forms in HTML, each with a submit button and a hidden field. The same javascript function is called when any of the submit buttons are pushed. I want to know which submit button has been pushed. I think I can do this by finding out what the hidden field value is of the corresponding form - but I'm having difficulty with this. My HTML is:
<div id="existingPhotosList">
<table><tbody><tr><td>
<img src="./userPictures/IMG0001.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0001.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
<tr>
<td>
<img src="./userPictures/IMG0002.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0002.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
</tbody>
</table>
</div>
There may be more or less table rows with images and forms on them - depending on how many images are found on the server.
The javascript I have right now is:
$('.deleteFiles').submit(deleteFile);
function deleteFile() {
var myValue = $(this).parent().closest(".picture").val();
alert(myValue);
return false;
}
I'm currently getting undefined as the result of the alert.
I want to know which submit button has been pushed.
As each of your forms only has one submit, you don't have to change your code much.
this in your submit handler will refer to the form, and the element is within the form, so:
var myValue = $(this).find("input[name=picture]").val();
No need to go up to the parent, and closest goes up the ancestry (through ancestors), not down. find goes down (descendants).
the simplest way I think will be:
var myValue = $('input[name=picture]', this).val();
should be:
var myValue = $(this).closest(".deleteFiles").find("input[type=hidden]").val();
here is the demo http://jsfiddle.net/symonsarwar/963aV/
$('.deleteFiles').click(deleteFile);
function deleteFile() {
var me=$(this).closest('tr').find('td:eq(1) input').val();
alert(me)
}
I want to hide my form when I click on the submit button. My code is as follows:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "hidden";
}
</script>
<form method="post" id="test">
<table width="60%" border="0" cellspacing="2" cellpadding="2">
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold"
align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006">
<td>
<input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>"
/>
</td>
<td>
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="javascript:hide();" />
</td>
</tr>
</table>
</form>
But when I click on the "Find" button, that particular form is not being hidden.
It should be either
document.getElementById("test").style.display = "none";
or
document.getElementById("test").style.visibility = "hidden";
Second option will display some blank space where the form was initially present , where as the first option doesn't
Set CSS display property to none.
document.getElementById("test").style.display = "none";
Also, you do not need javascript: for the onclick attribute.
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="hide();" />
Finally, make sure you do not have multiple elements with the same ID.
If your form goes nowhere, Phil suggested that you should prevent submission of the form. Simply return false in the onsubmit handler.
<form method="post" id="test" onsubmit="return false;">
If you want the form to post, but hide the div on subsequent page load, you will have to use server-side code to hide the element:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "none";
}
window.onload = function() {
// if form was submitted, PHP will print the below,
// which runs function hide() on page load
<?= ($_POST['ampid'] != '') ? 'hide();' : '' ?>
}
</script>
Using jQuery:
$('#test').hide();
Using Javascript:
document.getElementById("test").style.display="none";
Threw an error "Cannot set property 'display' of undefined"
So, fix for this would be:
document.getElementById("test").style="display:none";
where your html code will look like this:
<div style="display:inline-block" id="test"></div>
Replace hidden with none. See MDN reference.
There are two ways of doing this.
Most of the answers have correctly pointed out that style.display has no value called "hidden". It should be none.
If you want to use "hidden" the syntax should be as follows.
object.style.visibility="hidden"
The difference between the two is the visibility="hidden" property will only hide the contents of you element but retain it position on the page. Whereas the display ="none" will hide your complete element and the rest of the elements on the page will fill that void created by it.
Check this illustration
its a block element, and you need to use none
document.getElementById("test").style.display="none"
hidden is used for visibility
Maybe you can add a class like 'hide'.
Follow the example here : https://developer.mozilla.org/fr/docs/Web/API/Element/classList.
document.getElementById("test").classList.add("anotherclass");
you need to use display = none
value hidden is connected with attributet called visibility
so your code should look like this
<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>
you can use something like this....div container
<script type="text/javascript">
function hide(){
document.getElementById("test").innerHTML.style.display="none";
}
</script>
<div id="test">
<form method="post" >
<table width="60%" border="0" cellspacing="2" cellpadding="2" >
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006" >
<td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td>
<td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td>
</tr>
</table>
</form>
</div>
Through JavaScript
document.getElementById("test").style.display="none";
Through Jquery
$('#test').hide();
this should be it try it.
document.getElementById("test").style.display="none";
The basics of the functions work, but for every cancel button thats clicked, the next button will add that number of clicks to it. For example if a user clicks a cancel button once, then next time a different button with a different id is clicked, firebug shows the page that contains the form (page2) to load that many times, instead of once. This all generated dynamically, so there may be up to 10 of these div's on the parent page. What should happen is:
user clicks the readonly textbox on the parent page
onfocus empties that div from parent page and loads the child page
3.form from the child page is in the readonly's textbox space now
user either submits a comment or cancels
either action should put the readonly textbox back in the page
(up to this point, this all works)
when pressing another div to leave a comment that page should only load once, not as many times from clicking the previous buttons.
In the 1st page I have:
<head>
<script type="text/javascript">
$(document).ready(function(){
var ajaxInProgress = false;
$(function(){
if (ajaxInProgress) return;
$('.ce').focus(function(){
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=<%=intmemberid%>&cid=' + cid);
});
});
</script>
</head>
<body>
<div id="comform"
<div id="comfield2">
<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />
</div>
</div>
<div id="comdata2"></div>
<div id="comform"
<div id="comfield3">
<input class="ce" id="3" type="text" value="Write a comment..." readonly="readonly" />
</div>
</div>
<div id="comdata3"></div>
</body>
In page 2 I have
<script type="text/javascript">
$(document).ready(function() {
document.commentform2.comment.focus();
$("#cancelcomment2").click(function(){
$('#comfield2').empty();
$('#comfield2').html('<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />');
var ajaxInProgress = false;
$(function(){
$('.ce').focus(function(){
if (ajaxInProgress) return;
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=55&cid=' + cid);
});
});
});
$("#submitcomment").click(function(){
$('#formcomment').ajaxForm(function (data, textStatus){
$('#formcomment').clearForm();
$('#comfield2').empty();
$('#comfield2').html('<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />');
$('#comdata2').append(data).fadeIn(700);
var ajaxInProgress = false;
$(function(){
if (ajaxInProgress) return;
$('.ce').focus(function(){
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=55&cid=' + cid);
});
});
});
});
});
</script>
<form id="formcomment">
<textarea id="commenttext2>" name="comment" class="commentarea"></textarea>
<input type="submit" id="submitcomment" value="comment />
<button id="cancelcomment2">Cancel</button>
</form>
This may not be the "best" way to do it, but it will work.
replace all occurences of
$('.ce').focus(function(){
with
$('.ce').unbind("focus").focus(function(){
in both scripts.
The better way would be event delegation, though that will take more changes to the code.