I'm trying to update a variable in AMPscript in order to get a list of values that contain a keyword. This value is inserted in an input and after that I click on a search button to find the results. I tried adding some jQuery code but this has not worked. How can I get the value of the input into my AMPscript and refresh the table with the values?
This is my current code:
<div>
<label for="keyword">Please enter a keyword for search</label>
<input type="text" id="keyword" name="keyword">
<button id="searchBtn">Search</button>
</div>
<div id="content">
%%[
var #rows, #rowcount, #i, #code, #value, #keyword
set #rows = LookupRows("MyDataExtension","Active",1)
set #rowcount = RowCount(#rows)
IF #rowcount > 0 THEN]%%
<table>
<tr>
<th>Code</th>
<th>Value</th>
</tr>
%%[
FOR #i = 1 TO #rowcount DO
set #row = Row(#rows, #i)
set #code = Field(#row,"Code")
set #value = Field(#row,"Value")
]%%
<tr>
<td>%%=v(#code)=%%</td>
<td>%%=v(#value)=%%</td>
</tr>
%%[NEXT #i]%%
</table>
%%[ELSE]%%
<p>
No Account Records
</p>
%%[ENDIF]%%
</div>
My suggestion is to create a second page that will retrieve the data for you and return it in a form of a JSON.
Then, using jQuery or plain JavaScript, you send an Ajax request to that page with some parameters and on callback you build your HTML dynamically.
Here is an article that you might find interesting:
https://ampscript.xyz/how-tos/how-to-enhance-your-forms-with-ajax-and-ampscript/
Related
I am unable to get the value of a string from a specific Form in a web based system my company uses.
When opened in the browser it consists of three Forms (not frames). A thin left side Menu Form, a top thin horizontal Banner Form, and the other 80% of the bottom right loads in the Form that I am building.
I need to be able to grab a string from the top banner Form named "mainForm".
This string is dynamically populated as it is not set and it just appears between the TD tags. Also the TD element it resides in has no id or name, but it is the only instance of the class "userName".
I have tried several permutations trying to access this class/string combo.
Examples of what I have tried:
document.getElementsByClassName("userName")
document.querySelector('form[name="mainForm"] .userName').innterHTML
document.getElementsByClassName("userName")[0].innerText
document.mainForm.querySelector('.userName').innerText
document.forms.mainForm.getElementsByClassName('userName')
mainForm.getElementsByClassName("userName")
window.form["mainForm"].getElementsByClassName("userName")
document.form["mainForm"].getElementsByClassName("userName")
window.parent.document.getElementsByClassName("userName")
<!--Excerpts of code-->
<form name="mainForm" style="margin: 0px;" action="">
<table>
<tr>
<td align="right" class="userName" nowrap="">Target Text</td>
</tr>
</table>
</form>
<form id="myForm" method="post" action="">
<button type="button" id="btnLog" name="btnLog" onclick="getLog()">Get
Log</button>
</form>
function getLog() {
var elementLog = document.getElementsByClassName("userName");
var log = elementLog.textContent;
alert(log);
}
I expect the alert(log) to return the string value of the userName class.
What actually happens is either the alert triggers and says "undefined" or console errors of unable to get property of undefined or null reference.
I believe what you are looking for is innerHTML (and not innterHTML):
function getLog() {
var elementLog = document.getElementsByClassName("userName")[0];
var log = elementLog.innerHTML;
console.log(log);
}
<!--Excerpts of code-->
<form name="mainForm" style="margin: 0px;" action="">
<table>
<tr>
<td align="right" class="userName" nowrap="">Target Text</td>
</tr>
</table>
</form>
<form id="myForm" method="post" action="">
<button type="button" id="btnLog" name="btnLog" onclick="getLog()">Get
Log</button>
</form>
I have a note section in my form that allows users with permissions to add information to a particular record. Part of this not section must allow users to delete their own notes or to edit their own. The issue I seem to be having is when I add a Jquery Modal Menu that appears to confirm the deletion I have menus popping up for each note, so if I have 5 notes in my record, it means 5 menu's pop up that I need to close out. Is there any way for me to target the correct note so only its assigned menu appears?
ASP Code Section:
<%
While ((Repeat1__numRows <> 0) AND (NOT RS_Notes.EOF))
%>
<%
Dim RS_Poster
Dim RS_Poster_cmd
Dim RS_Poster_numRows
Set RS_Poster_cmd = Server.CreateObject ("ADODB.Command")
RS_Poster_cmd.ActiveConnection = MM_Logistics_STRING
RS_Poster_cmd.CommandText = "SELECT EmpID, F_Name, L_Name FROM Employee INNER JOIN Notes ON Employee.EmpID = Notes.Emp_ID WHERE Notes.EMP_ID = "& RS_Notes.Fields.Item("Emp_ID").Value &""
RS_Poster_cmd.Prepared = true
Set RS_Poster = RS_Poster_cmd.Execute
RS_Poster_numRows = 0
%>
<tr>
<td colspan="4" id="Table-Row-Parent-Comments" ><br>
<div id="Table-Row-Child-CommentsTitle">
<div id="Table-Row-Child-CommentsTitle-Text">
Posted By:<%=(RS_Poster.Fields.Item("F_Name").Value)%> <%=(RS_Poster.Fields.Item("L_Name").Value)%> Date:<%=(RS_Notes.Fields.Item("Note_Date").Value)%>
<%If RS_Poster.Fields.Item("EmpID").Value = RS_User.Fields.Item("EmpID").Value Then%>
<div id="Table-Row-Child-CommentsTitle-Text-EditDelete">
<div align="right">
Edit/Delete
</div>
</div>
<%End If%>
</div>
</div>
<div id="Table-Row-Child-Comments">
<div id="Table-Row-Child-Comments-Text">
<p><%=(RS_Notes.Fields.Item("Note_Text").Value)%></p>
</div>
<br>
</div>
</td>
</tr>
<tr>
<td>
'SECTION OF MY CODE WHERE I ADD THE MODAL MENU FOR JQUERY
<form ACTION="<%=MM_noteDeleteAction%>" METHOD="POST" name="Modal-Menu-DeleteNote-Form" id="Modal-Menu-DeleteNote-Form">
<input type="hidden" name="MM_insert" value="Modal-Menu-DeleteNote-Form">
<input type="hidden" name="MM_delete" value="Modal-Menu-DeleteNote-Form">
<input type="hiddenx" name="MM_recordId" value="<%= RS_Notes.Fields.Item("Note_ID").Value %>">
<input type="submit" value="Delete"/>
</form>
</td>
</tr>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
RS_Notes.MoveNext()
Wend
%>
JQUERY Section:
//delete note
$("a#Table-Content-DeleteNotes-Link").click(function(){
$("form[id=Modal-Menu-DeleteNote-Form]").dialog("open");
})
$("form[id*=Modal-Menu-DeleteNote-Form]").dialog(
{
autoOpen:false,
modal:true,
width:800,
height:500,
title:"Delete Note",
show:{effect:"fade",duration:300},
hide:{effect:"fade",duration:300},
buttons:{
/* Delete:function(){
$("form[id=Modal-Menu-DeleteNote-Form]").submit();
},
Cancel:function(){
$("form[id=Modal-Menu-DeleteNote-Form]").dialog("close");
}*/
}
});
As it stands right now, everything works fine if I just hit the delete button created in the form tags, it's able to remove the correct record that I want, I'm just trying to add a modal menu to confirm the deletion a particular record with out having all of the note menus appear all at once as seen in the image below. Thanks.
Part of the problem is that all of your FORMs have the same ID, so when the delete link is clicked it opens all objects with the same ID.
It would be a good idea to give each a unique ID by changing this line from...
<form ACTION="<%=MM_noteDeleteAction%>" METHOD="POST" name="Modal-Menu-DeleteNote-Form" id="Modal-Menu-DeleteNote-Form">
...to...
<form ACTION="<%=MM_noteDeleteAction%>" METHOD="POST" name="Modal-Menu-DeleteNote-Form" id="Modal-Menu-DeleteNote-Form_<%= RS_Notes.Fields.Item("Note_ID").Value %>">
In this case I changed the ID to include the note ID but you could use your index variable instead, just something to make it unique.
Then change your link and JavaScript to get the FORM relevant to the delete link clicked, by changing any references to the form by ID.
Change your link from...
Delete
...to...
Delete
(So we can easily look up the ID in the click event)
And all the references from...
$("form[id=Modal-Menu-DeleteNote-Form]")
...to...
$("form[id=Modal-Menu-DeleteNote-Form_" + $(this).attr("rel") + "]")
It would, of course, be better to put this in a variable.
Note that there are several ways to do the above, and the way I have suggested is not necessarily the most efficient.
I am not sure if this is entirely possible, but I am mimicking a function from a program built in flat PHP to Symfony2. I am stuck on this one function.
1) Firstly, there is a row of input fields which are dynamically populated.
<label for="noofracks"># of racks</label>
<input type="text" name="noofitems" id="numberform">
<div id="">
<form name="dataform" method="post" action="" id="dataform">
<input type="hidden" name="lastdasearch">
<div id="racks">
<div class="rack" id="rack1">
<span id="itemno1">Search
</span>
<input type="hidden" id="subid" name="subid1" value="" placeholder="subid" disabled><br/>
<input type="text" id="dano" name="dano1" value="" placeholder="dano" disabled><br/>
<input type="text" id="partno" name="partno1" value="" placeholder="partno" disabled><br/>
<input type="text" id="rackno" name="rackno1" value="" placeholder="rackno" disabled><br/>
<input type="text" id="diecode" name="diecode1" value="" placeholder="diecode" disabled><br/>
<input type="text" id="heatcode" name="heatcode1" value="" placeholder="heatcode" disabled><br/>
<hr />
</div>
</div>
<input type="date" name="shipdate"><br/>
<input type="number" name="qtyshipped" placeholder="Qty Out"><br/>
<input type="text" name="blno" placeholder="BL #"><br/>
<button type="submit" name="submit">Submit</button>
</form>
2) The input fields under the <div id="racks"> will populate based on the number that the user inserts into <input id="numberform"... So the next populated row of inputs will have incremented numbers name="dano2", dano3... etc
3) Values are to be inserted from a popup window that lists data from the database and that is where the link Search comes in. It will open a popup with the lists from the database:
<table class="tablesorter">
<thead>
<th>DA</th>
<th>Part</th>
<th>Batch</th>
<th>Rack</th>
<th>Die Code</th>
<th>Heat Code</th>
<th>Qty</th>
<th></th>
</thead>
{% for entity in entities %}
<tr>
<td>{{ entity.dano }}</td>
<td>{{ entity.partno }}</td>
<td>{{ entity.batchno }}</td>
<td>{{ entity.rackno }}</td>
<td>{{ entity.diecode }}</td>
<td>{{ entity.heatcode }}</td>
<td>{{ entity.inqty }}</td>
<td>Select</td>
</tr>
{% endfor %}
</table>
4) I have the "Select" link go to the controller that selects that row of data from Doctrine, and I want it to load it into the input fields targeting the right input number (into dano1, partno1, rackno1..). I just.. have NO idea how to go about doing it.
/**
* #Route("/searchsub/{subid}", name="log_loaddata")
* #Method("GET")
*/
public function loadDataAction($subid) {
$em = $this->getDoctrine()->getRepository('Main');
$entity = $em->allBySub($subid);
//get the exact entity that the user selected and load the data into the target input fields.
//close the popup window
}
If anyone knows a better way to do this, it would be great as well!
EDIT: The desired behavior and action I would like is:
On the contents of each appended <div class="rack" id="rack1">, there's a search link that will give a popup window with a table with rows of data listed (the rows list the data of 'dano', 'partno', 'batchno' that is to be inserted into the input fields). Next to each row of data will have a "Select" link, which I want to grab that row of data, and populated to the parent page input fields. I want it to identify which <div class="rack" id="rack.. to go into (I haven't figured out that part yet either).
So based on what I understood so far what you are trying to do is creating a click function that will get the information from the table row and create input fields with these values. So this will be purely JS stuff.
First you will need to change HTML a little to get stuff to work.
For each input field you want to populate you should replace the id field to make it a data-name since HTML id can not be duplicated and we are going to have multiple fields of these ( aka multiple "racks" )
This:
<input type="text" id="dano" name="dano1" ... />
Should be:
<input type="text" data-name="dano" name="dano1" ... />
And the same for the rest of the inputs.
in the HTML for the popup you need to add the same data-name="[inputName]" to the <td> elements so you can identify them.
for example:
<td data-name="dano">{{ entity.dano }}</td>
Finally we can add a class to the select link to attach the click event to it:
<a class"select-link" data-id="{{ entity.subid }}" ... >Select</a>
Now once you click on the link what you basically need to do is get the information you need to populate. so something like:
var parentWindow = window.opener; // get the original window to push info to
$('.select-link').on('click', function(e) {
var cells = $(this).parent().siblings(); // Get all TD elements in the same row
var subid = $('this').data('id');
cells.each(function(i, element){
var name = $(element).data('name');
var newRack = parentWindow.$('#rack1').clone() // Clone the row
// insert data into new rack
newRack.attr('id', 'rack' + subid);
$('input[data-name=' + name + ']', newRack)
.val($(element).text())
.attr('name', name + subid);
});
// Append new rack to the main window
parentWindow.$('#racks').append(newRack);
});
This is just a concept for you to start with of course. It will need some tweaking and googling along the way. Hope it helps.
I'm writing a javascript library and I need to make a javascript function which you can call to create a form (scheduler) on your webpage.
this is the html code of the form:
<form>
<table border="1" cellpadding="5">
<tr><td id="schedulename" colspan="10">Time Schedule</td></tr>
<tr>
<td width="50">hours</td>
<td></td>
<td width="50">minutes</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>
</tr>
<tr>
<td width="50"><input type="text" id="hours" maxlength="2" size="1"></td>
<td width="2"> : </td>
<td width="50"><input type="text" id="minutes" maxlength="2" size="1"></td>
<td> <input type="checkbox" id="mon"></td>
<td> <input type="checkbox" id="tue"></td>
<td> <input type="checkbox" id="wed"></td>
<td> <input type="checkbox" id="thu"></td>
<td> <input type="checkbox" id="fri"></td>
<td> <input type="checkbox" id="sat"></td>
<td> <input type="checkbox" id="sun"></td>
</tr>
<tr>
<td colspan="10"> <input type="button" id="setbutton" value="Set schedule"></td>
</table>
</form>
my idea of the result is that a user only needs to create a div in his webpage, then in the javascript, call my function with the right parameters which in turn shows my predefined form. But I also need to add some functionality to the 'setbutton' it needs to write the data to an adres in my PLC (programmable logic controller)
what I want the function call to look like: showScheduler(id, adres);
id is the id of the division and adres is the adres in my programmable logic controller I need to write to.
What is the best way to write the form to my webpage from within a javascript function?
I hope u guys can understand but i'll gladly give you more explanation if needed.
You can do something like:
<div id="placeholder">
</div>
<script type="text/javascript">
function createForm(divId) {
var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";
document.getElementById(divId).innerHTML = formHtml;
}
</script>
And call for example createForm("placeholder") when you want.
It sounds like you are specifically wanting the user to ONLY have their html and a <script> tag that loads in your js file. You will need to require a specific id or custom css class to use as a selector. Then the html part for the user would simply look like:
<html>
...
<body>
...
<div id="customID"></div>
...
</body>
</html>
Then in your javascript file, you need to create your function to write in the content, and tie that function to an execution on window.load(). Something like:
$( //note, this causes execution when the dom is loaded, using jQuery's .ready()
function(){ showScheduler("customID"); }
);
function showScheduler(id)
{
var contents = '<form><table border="1" cellpadding="5">...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
I'm not sure exactly what you're looking for regarding the adress part, but you could easily extend the showScheduler() function to include a second parameter for the adress value, and then stick that into the middle of the rest of the contents value. Something like:
function showScheduler(id, adress)
{
var contents = '<form><table border="1" cellpadding="5">...' + adress + '...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
And further, if you prefer to have the user call the function from their page, you can skip the part about tying this to this to the dom's execution (i.e. remove the $( function(){ showScheduler("customID"); } ); part completely
I have a div tag as follows:
<div id="DataEntryForm" style="position:absolute; left:100px;top:175px;width:350px; z-index:2;background-color:yellow; visibility:hidden;border-top-color: black;">
<table id="DataEntryFormTable" style=" width:100%" style="margin-top: -50px;">
<tr><td> Build Name</td><td> <input type="text" id="BuildName" name="BuildName" value="" /></td></tr>
<tr><td> Build Description</td><td> <input type="text" id="BuildDesc" name="BuildDesc" value="" /></td></tr>
<tr><td> Software Details</td><td> <input type="text" id="SoftwareDetail" name="SoftwareDetail" value="" /> </td></tr>
<tr><td> Hardware Details</td><td> <input type="text" id="HardwareDetail" name="HardwareDetail" value="" /> </td></tr><br>
<tr><td> </td></tr>
<tr>
<td>
<input type="button" value="Save" onclick="saveRecord()" /></td>
<td> <input type="button" value="Cancel" onclick="cancelOperation()"/></td>
</tr>
<br>
</table>
</div>
I want to load the values from the database to the input type text. So, I need to get the id of each node in order to match with my json value and node id and to assign the value to it. I'm trying with the following to achieve this. But, I cannot get the id value. Anyone, please help me out on this. Thanks ..
var nodes = deform.childNodes;
index =0;
// Load the first record in the collection.
// It is expected to have only one object in JS Object collection
var dbRecord= dbRecords[0];
while (index < nodes.length)
{
if(nodes[index].type=="text")
{
nodes[index].value = dbRecord[nodes[index].id];
}
index++;
}
id is the correct property. the problem is that you are not retrieving the nodes that you are trying to retrieve from your table. Using .children() or .childNodes(), only gets direct children of your element, so you need to drill down further into your table to access the text inputs your are trying to fill. Alternatively, if you want to use jQuery, a single selector could do the trick:
$("#DataEntryFormTable input[type='text']")
If you don't use jQuery, I would use .children() recursively to find the elements you're looking for.
edit: Also, make sure you include parenthesis when calling a function, so
var nodes = deform.childNodes;
would be
var nodes = deform.childNodes();
edit again:
... I didn't see the data that you provided. since you have the ID's that you need in your JSON data, you can look up the elements directly using those ids. Try this:
dbRecord= [{"HardwareDetail":"[B","BuildDesc":"Testing1","BuildID":"BL002","BuildName":"Second Name","SoftwareDetail":"ss"}];
record = dbRecord[0];
for (attr in record){
el = document.getElementById(attr);
if (el)
document.getElementById(attr).value = record[attr];
else
console.debug('no HTML element with ID ' + attr);
}
I don't think console.debug works in some browsers (IE?), so you'll want to take that part out when you're finished testing.