list in jQuery mobile - html

I want to add a link in List but I'm creating list dynamically. When I click the list item, it display the detail view. For example
When I click land end it goes to detail of lands then I click coupon ,it goes to particular page, but I want set a link for save and email then I want to place the name which is in that image?
listItem.innerHTML = "<img src='" + image + "' class='ui-li-icon' style='height:20px; width:20px;'></img> <a href='#' data-role='button' id='" + i + "' data-theme ='c' rel='external' data-inline='true' style='margin-left:1.5em; margin-top:2px;' ><font size='2' face='Arial, Helvetica, sans-serif'>" + prodName[i] + "</font></a>";

You can not execute javascript that are placed on the ajax retrieved pages, as jquery mobile is not designed for that purpose, but you can use it's event system that will help you http://jquerymobile.com/demos/1.0a4.1/docs/api/events.html

Related

Browser can not parse HTML properly - Grails 2

I am generating HTML from controller (Backend) but browser can not parse that HTML properly.
Controller code:
def getValue (returnIndex) {
String dropDown = "<select name='" + returnIndex + "' style=''>"
def CatArr = new BudgetViewDatabaseService().executeQuery("SELECT c.id,c.name AS categoryName FROM chart AS a LEFT JOIN crtClass AS b ON a.id=b.chart_class_type_id LEFT JOIN chart_group AS c ON b.id=c.chart_class_id WHERE c.status=1")
if (CatArr.size()) {
for (int i = 0; i < CatArr.size(); i++) {
def catId = CatArr[i][0]
def ProductArr
ProductArr = new BudgetViewDatabaseService().executeQuery("SELECT id,accountCode,accountName FROM bv.crtMsr where status='1' AND chart_group_id='" + catId + "'")
if (ProductArr.size()) {
dropDown += "<optgroup label='" + CatArr[i][1] + "'>"
for (int j = 0; j < ProductArr.size(); j++) {
dropDown += "<option value='" + ProductArr[j][1] + "' >" + ProductArr[j][1] + " " + ProductArr[j][2] + "</option>"
}
dropDown += "</optgroup>"
}
}
}
dropDown += "</select>"
return dropDown
}
view page's code:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getValue('formFourGLAccount')}
</div>
issue:
Generated HTML looks like:
When I am opening that HTML on edit mode from browser then its looks like:
<select name='formFourGLAccount' style=''><optgroup
label='Overige immateriële bezittingen'><option value='0430' >0430 Overige niet
materiële bezittingen</option></optgroup><optgroup label='Computers en
computerapparatuur'><option value='0210' >0210 Computers en
computerapparatuur</option><option value='0211' >0211 Afschrijving computers en
computerapparatuur</option></optgroup><optgroup label='Overige materiële
bezittingen'><option value='0250' >0250 Overige materiële
bezittingen</option><option value='0251' >0251 Afschrijving overige materiele
bezittingen</option></optgroup><optgroup label='Waarborgsommen'><option
value='0300' >0300 Waarborgsommen</option></optgroup><optgroup
label='Deelnemingen in andere bedrijven'><option value='0310' >0310 Aandeel of belang
in andere bedrijven</option></optgroup><optgroup label='Strategische langlopende
beleggingen'><option value='0320' >0320 Strategische langlopende
beleggingen</option></optgroup><optgroup label='Verstrekte langlopende leningen
(hypotheek ed)'><option value='0330' >0330 Verstrekte langlopende leningen (hypotheek
ed)</option></optgroup><optgroup label='Overige financiële
bezittingen'><option value='0340' >0340 Overige financiële bezittingen</option></optgroup><optgroup label='Voorraad'><option
If I copy returns result (HTML) from controller and past it on browser manually then its working fine
You have not shown how that HTML is being rendered so it isn't clear specifically how to fix it, but what is happening is the content is being HTML encoded, which you do not want if you want the browser to evaluate the HTML tags.
EDIT Based On Comment:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getGLAccountExpanseBudgetForReconcilationOthersDropDown('formFourGLAccount')}
</div>
There is no good reason to create an instance of a taglib. You should invoke the tag as a GSP tag.
You are returning hardcoded HTML from your controller as a model variable. That is a bad idea, but not what you are asking about. If you really do want to do that, then you will need to prevent the data from being HTML encoded in your GSP. You can use the raw(your unescaped html code here) method in your GSP as one way to avoid the encoding.

Ionic Collection repeat height issue

I am building an application that uses collection-repeat however it asks me to provide the item height as it cannot calculate it. It cannot calculate it as the list isn't visible when the page is loaded, is there a way to set a dynamic height that is responsive as the current method i am using is not responsive.
Html code
<ion-list ng-show="query[queryBy]">
<!-- Creates each item through collection-repeat and is filtered by the query linked to the search field -->
<!-- ng-click opens the modal that will have the enlarged office address and the map of the office -->
<ion-item class="item-text-wrap item-icon-right" id="output" collection-repeat="office in offices|filter:query" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long); lastview(office.id);" collection-item-height="getItemHeight(office, office.$index)" collection-item-width="100%">
<!-- Outputs all the data from offices.json -->
<h3 id="LocName">{{office.LocationName}}</h3>
<p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<!-- Creates the favourite icon on each list item, when the star is clicked the togglefav function is run -->
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
Height Control
$scope.getItemHeight = function(item, index) {
//Make evenly indexed items be 10px taller, for the sake of example
return (index % 2) === 0 ? 50 : 60;
};

Display label and <a> same line inside a table

"<td style=max-width:0px;>" +
"<span> Issuer: <a href=/app?"+JSON.stringify(issuer)+" target='_blank'> <span> " + celldata[rowIndex].hiddenprops.issuer +" </span></a> </span>"+
"</td>"
The result should be: "issuer: rojioijoijrieroirjg"
but I get
: "issuer:
rojioioijoij"
on two different lines. I tried display:inline on every tag and tried to insert tags and stuff but nothing is working?
Any idea how I should proceed. All I want is a label on the same line than my link inside a <td>

Search: what should the form page look like?

I'm new to html and am trying to implement a search function. I've created an input box and search buttons but I have no idea what the form page should look like. Please Help. Thank you!
Here's the code:
"<form name=MB method=\"POST\" action=\"formpage-->not sure what this page should look like">\n "
"<p align=MIDDLE>Search for Tokens: " + //Search Description
"<input name=\"term\" type=\"text\" onkeypress=\"if(event.keyCode==13) " +
"document.MB.exact.click();\" size=30> </p> \n" + //Search Box
"\n<FONT FACE=\"Geneva,Arial,Helvetica,lucida sans,san-serif\"><STRONG>" + //search buttons
"<input name=\"exact\" type=\"submit\" value=\"Find Exact\"" +
"\n<input name=\"AND\" type=\"submit\" value=\"Find All Tokens\">" +
"\n<input name=\"OR\" type=\"submit\" value=\"Find Any Tokens\">" +
"\n</STRONG></FONT></TD>\n</TR>\n</TABLE>\n</form>\n"
PS the reaszon it's all in quotes is because its a java program that generates the htmlenter code here
This is a pretty vague question but you probably want something like:
<form action="URL_FOR_SEARCH_HERE" method="GET">
<input type="text" name="query"/><br />
<input type="submit" value="Search"/>
</form>
(URL_FOR_SEARCH_HERE would be replaced by something like "/search.php", depending on what server-side technology you're using to do the actual search processing.)
It depends what you are searching for as well. If you are searching through a database then your form should point to some code that executes a sql search function.

Can someone add fundamental reasons why appending html markup to field variables is wrong

html += '<tr style="display:none;"><td class="leftval">ID:</td><td><span id="' + _uniqueId + '-id">' + one + '</span></td></tr>';
html += '<tr><td class="leftval"><label for="' + _uniqueId + '-itemdesc" title="This is the descriptive text that will actually appear in the email.">Description: </label></td>';
html += '<td><input value="' + four + '" class="CDinput" name="itemdesc" id="' + _uniqueId + '-itemdesc" type="text"></td></tr>';
html += '<tr><td class="leftval"><label for="' + _uniqueId + '-title" title="This is the title text that is used in the email. The text usually is used as the anchor text of a link.">Title: </label></td>';
html += '<td><input value="' + five + '" class="CDinput" name="title" id="' + _uniqueId + '-title" type="text"></td></tr>';
html += '<tr><td class="leftval"><label style="color:#f16d44;" for="' + _uniqueId + '-enddate" title="This is the expiration of the offer. The formating here is arbitrary and does not impact how the end date would look in the actual template.">End Date: </label></td>';
html += '<td><input style="width:230px" value="' + six + '" class="CDinput" name="enddate" id="' + _uniqueId + '-itemenddate" type="text">';//I'm overriding the default width for the calendar image
html += '<img style="cursor:pointer;" class="CDdate" id="' + _uniqueId + '-dateselector"src="/images/Calendar_hyperlink.png"></td></tr>';
I can think of 3 reasons:
string connector operands like ' + ' make it harder to read
Indentation is more difficult since it's awkward to indent the field to simulate a properly formatted html snippet.
Display logic is mixed in tightly with business application logic, making diversifying focus difficult.
You have 3 good reasons listed, and are in the top three. Trying to mix the two makes for ugly code, hard to read, hard to maintain, etc.
One other thing, though, that I hadn't thought of until recently, is that some editors, such as Netbeans, will tell you when your HTML is broken. Forgetting to close tags, wrong values, etc. I'm using PHP for my work, and I've gotten into the habit of doing soemthing like this:
<li>
<span class='name'><?php echo _TAG_INDEX ?>:</span>
<span class='value'><?php echo $get_zone_array['DB_ID'] ?></span>
</li>
Using it like this, if I forgot to close a tag, like if I forgot the closing </span> somewhere, it would point it out for me, so I could go in and fix it. However, if I was putting the HTML into a variable, or echoing it directly, like this:
$html = "<li><span class='name'>"._TAG_INDEX.":<span>" // notice missing / in </span>
. "<span class='value'>".$get_zone_array['DB_ID']."</span>"
. "</li>";
echo $html;
then there wouldn't be any HTML-checking from the editor, making finding those nasty little xHTML errors harder to find.
Some of the reasons:
It's butt-ugly!
It's slow. (The += operator in Java is not fast. Sometimes acceptable, but definitely not fast because it has to do a lot of object creation and buffer copying.)
It's too easy to introduce XSS vulnerabilities through strings not being properly quoted.
It's too inflexible; change anything on the layout and you have to change all the code.
Use a templating library instead. So much easier to get right.