I'm working on a Plone site that has JQuery mobile and I have an issue with the medias.
JQuery mobiles creates a neat menu in the web page's home page that links to the differents views of the plone site. The problem is that the medias (like the images) are linked with a weird URL that doesn't exists.
What I mean is the following:
I have an image whose path would be: url/competitions-en/red-bull-monte-descend/horaire/red-bull-monte-descend/vignette_normal
But in the src param of the img tag what I see it's url / nameOfView competitions-en/red-bull-monte-descend/horaire/red-bull-monte-descend/vignette_normal
I have no idea why JQuery mobile adds the name of the view to the path of the image, tough I do know that if I load the view client side (so instead of going: main menu>view, I load the view in a new tab) there's no problem. JQuery mobile adds the name of the view to the path of the image only when I access the view trough the main page.
Any ideas on how to fix it?
Additional information:
This would be the block in the plone template with the first TD generating the img
<tr tal:repeat="el python: une_date[1]['horaires']">
<td tal:attributes="class string:categorie ${el/categorie/cls}">
<img tal:attributes="src el/horaire/vignette; alt el/horaire/title_short;" />
</td>
<td tal:attributes="class string:competition">
<a tal:content="el/competition/title" tal:attributes="href el/competition/url"></a>
</td>
<td class="emplacement">
<span tal:content="el/horaire/emplacement"></span>
</td>
<td class="debut_fin">
<span tal:content="el/horaire/debut">debut</span> - <span tal:content="el/horaire/fin">fin</span>
</td>
<td class="title" tal:content="el/horaire/title">un titre</td>
</tr>
Ty,
Axel
Related
I am coming across an issue with getting older, previously working Orbeon forms to display in my Liferay portlet after upgrading to a new Orbeon Forms version.
My current environment:
Liferay Community Edition Portal 7.2.1 CE GA2, running on Tomcat-9.0.17
Upgraded Orbeon Forms 2016.2.1.201609272302 PE -> 2019.2.2.202003311635 PE, Orbeon Api and Orbeon Form Builder running on Tomcat-8.5.20, java version "1.8.0_192"
I started out by using an existing applicationName/formName, and after encountering too many errors related to data-migration (which I did expect) decided to start simple by duplicating an existing form, backing the old form up, and proceeding to use the existing form as a testing form with a limited amount of fields (one section with one input field).
Snapshot of Form in formbuilder
The portlet in the app shows the title of the form, but all content divs/spans have the “xforms-disabled” css class attached, and are hidden.
Form as viewed deployed in Liferay portlet
Orbeon starts up without issues. Nothing of note in the orbeon api logs.
The logger levels are all set to Debug. The orbeon.log file has no instances of xforms-disabled and hundreds of instances of xforms-enabled.
Link to DEBUG orbeon.log (large)
The endpoint that would bring back all the data for the form that would be embedded into the portlet looks like it has valid data:
/orbeon-api/fr/NRPP_Roads_FSR_Modification/roads_notification_of_fsr_modification/edit/?orbeon-embeddable=true
And then the end result on the page is as shown:
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-571" class="xforms-group">
<h2 class="fr-section-title"><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-576" class="fr-section-label xforms-control xforms-output xforms-output-appearance-minimal"><span class="xforms-help"></span><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-576≡≡c" class="xforms-output-output">Notification of FSR Mod Works</span><span class="xforms-hint"></span></span></h2>
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡switch" class="xforms-update-full xforms-switch">
<span class="xforms-case-selected">
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-579" class="fr-section-content xxforms-animate xforms-group">
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid" class="xbl-component xbl-fr-grid">
<table id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-589" class="fr-grid fr-grid-2 fr-grid-rrs_.fsr_.section_ fr-norepeat xforms-group" role="presentation">
<tbody class="fr-grid-body">
<tr class="fr-grid-tr">
<td id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-592" class="fr-grid-td xforms-group"><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control" class="fr-grid-1-1 xforms-control xforms-input xforms-disabled"><label class="xforms-mediatype-text-html xforms-disabled xforms-label" for="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1"></label><input id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1" type="text" name="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1" value="" class="xforms-input-input"><span class="xforms-disabled xforms-alert"></span><span class="xforms-disabled xforms-hint"></span></span></td>
<td id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-597" class="fr-grid-td xforms-group"></td>
</tr>
</tbody>
</table>
<div class="" id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-599"></div>
</div>
</div>
</span>
</div>
</div>
It doesn't seem to matter how many fields or types of fields or sections/grids I add to the test page, they all render with the xforms-disabled class attached.
Why is the xforms-disabled class attached to the fields and how do I fix the form to prevent that from happening? Thanks in advance for the help!
I am trying to write a quick application to view my electric bills programatically. For that I need to be able to log into the website programmatically before I can move ahead with anything else.
I know that one has to use curl in some way for that. But, I am not sure how I can leverage curl to log into the website through terminal. Here is the website: Seattle Utilitiy Bills Website
Looking at the corresponding source for the login form, it look like this:
<tr>
<td nowrap class="form-style-text">User ID:</td>
<td class="form-style-label"><input type="text" autocomplete="off" size="17" name="loginid" maxlength="32"></td>
</tr>
<script type="text/javascript">document.wizForm.loginid.focus()</script>
<tr>
<td class="form-style-text">Password:</td>
<td class="form-style-label"><input type="password" autocomplete="off" name="password" size="17" maxlength="16"></td>
</tr>
<tr>
<td class="form-style-text"> </td>
<td align="left">
<input name="login" type="submit" class="actionbutton" onClick="doLogin()" value="Log in"/>
</td>
</tr>
I know I need to use curl in some way to be able to log in, but I am not sure how. Specially because the login logic is being done by the 'doLogin()' function, and I am not sure how I can call that function from the terminal using curl. Here is the definition of the 'doLogin()' function:
function doLogin() {
var wform = document.wizForm;
wform.type.value='LoginMenu';
}
Any clues how I can log into this page using terminal/curl?
You missed the form tag. <form class="extform" action="/csg/inetSrv" method="post" name="wizForm">
Most likely you need to save a session cookie after you logged in.
What you need to do is use curl to post the form-data to /csg/inetSrv. use the parameter --cookie-jar <file> to save the cookie. Then you can use curl again to make requests with the cookie file and you are logged in.
It might be easier to check the cookie in a browser first to understand how it is used. You can then try using curl with the browsers session cookie to test before you use curl to log in.
I am using MVC3, C#, Razor, EF4.1
I have implemented grids in their most simple form ie Razor Tables. At present I have implemented editing of record fields off page ie Click "Edit" and the edit page appears, one then fills in data then save which returns user to main grid page.
I need an inline solution where only 1 or 2 fields need updating. Typically the user would either click on the row or on "edit" link and the row would change to "edit mode". One would then edit the data. One would then click on "Save" and the row would resort to read only, or the grid would refresh. Can you recommend a simple and robust solution for this. At present I am not thinking about 3rd party component solutions such as Telerik Kendo UI Grids , although in the near future I will no doubt upgrade to something like this. At present I want to keep it really simple.
Thoughts, wisdom, recommendations appreciated.
Many thanks.
EDIT:
Thanks all. I am going to give these suggestions a try.
Here is simplest way of doing it, see fiddle.
Save all your data using JSON web service. You'll end up having either array of cells or array of array of cells. (Alternatively you can put JSON in a hidden input box)
Use $.data api and put all information needed for server to save in data attributes.
You'll endup having something simple as
var f=$('#myform')
, t = $('table')
, inputs = t.find('input')
, b1 = $('button.save1')
, b2 = $('button.save2')
, ta = $('#save')
// update data-val attribute when value changed
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))
// store everything in $.data/data-* attributes
b1.on('click', () => {
var data = []
inputs.each((i,inp) => data.push($(inp).data()) )
ta.text(JSON.stringify(data))
})
// use $.serialize
b2.on('click', () => {
var data = f.serializeArray()
ta.text(JSON.stringify(data))
})
input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus { outline: 1px solid #eee; background-color:#eee; }
table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='myform' id='myform'>
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr data-row="0">
<th>1</th>
<td><input type="text" data-row="0" data-col="0" data-val="a" value="a" name='data[0][0]'/></td>
<td><input type="text" data-row="0" data-col="1" data-val="b" value="b" name='data[0][1]'/></td>
<td><input type="text" data-row="0" data-col="2" data-val="c" value="c" name='data[0][2]'/></td>
</tr>
<tr data-row="1">
<th>2</th>
<td><input type="text" data-row="1" data-col="0" data-val="d" value="d" name='data[1][0]'/></td>
<td><input type="text" data-row="1" data-col="1" data-val="e" value="e" name='data[1][1]'/></td>
<td><input type="text" data-row="1" data-col="2" data-val="f" value="f" name='data[1][2]'/></td>
</tr>
<tr data-row="2">
<th>3</th>
<td><input type="text" data-row="2" data-col="0" data-val="g" value="g" name='data[2][0]' /></td>
<td><input type="text" data-row="2" data-col="1" data-val="h" value="h" name='data[2][1]' /></td>
<td><input type="text" data-row="2" data-col="2" data-val="i" value="i" name='data[2][2]' /></td>
</tr>
</table>
</form>
<div name="data" id="save" cols="30" rows="10"></div>
<button class='save1'>Save 1</button>
<button class='save2'>Save 2</button>
Given that you generate your table in Razor view and don't need to load data into table. So you "loading" data on the server and saving changes with tiny JS snippet above.
You can also style your input cells in the table so they would look different when with focus and not, making it look like Excel spreadsheet (without fancy Excel features though, just look).
Well in that case I will suggest you to add a div with a unique id with each grid row.
and on the click of edit button insert a row having text boxes with value using java script.
Using knockout.js is my preferred approach, and in my opinion, is simple to get started with but flexible enough to keep up with project demands.
Here are examples:
http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html
http://knockoutjs.com/examples/gridEditor.html
If you think this is for you then take an hour or two and go through the tutorials, it's well worth the time:
http://learn.knockoutjs.com/
I have implemented exactly what you are asking for, but I cannot assure you that it is robust. It definitely is not simple. Based on the article Get the Most out of WebGrid in ASP.NET MVC by Stuart Leeks I have created an MVC project which I have heavily modified with my own javascript. In the end I have come up with a solution that works but could be vastly improved. Took me at least a week to implement.
I write tutorial for implementing inline editable grid using mvc, knockoutjs with source code:
http://www.anhbui.net/blog?id=kojs-1
I have a kendo tabstrip like this:
#(Html.Kendo().TabStrip()
.Name("EmployeeTabStrip")
.Items(tabstrip =>
{
tabstrip.Add()
.Text(Resources.Resources.ItemList)
.Content(#<text>
<div id="ListContainer" style=" height: 100%">
#Html.Partial("PartialEmployeeList")
</div>
</text>);
tabstrip.Add()
.Text(Resources.Resources.Edit)
.Content(#<text>
<div id="Container" style=" height: 100%">
#Html.Partial("PartialEmployeeForm")
</div>
</text>);
})
.SelectedIndex(0)
)
But when I select a tab, it appends the tabstrip ID ("#EmployeeTabStrip-1") at the end of the URL like this:
http://localhost:36527/Setup/Employee?employeeId=33#EmployeeTabStrip-1
Does anyone know why this happens? If its Kendo's built-in, how can i override this?
This would happen if the anchor tags that were rendered by Kendo (the tabs are rendered as anchor tags) had an href attribute with that value, i.e.
<a class="k-link" href="#EmployeeTabStrip-1">Tab 1</a>
If you look at the generated HTML source I imagine you'd see something similar to that. As far as I know this is not something that Kendo does, I've not seen it on my TabStrips and it doesn't occur on the online web demo here which demonstrates a similar control initialization to your sample.
It may be a version issue (try updating to the latest Kendo release) or there may be some other factor at play.
Update to the latest internal build or the beta version of Kendo UI Extensions. This should be already fixed.
I want to implement the Demo shown at http://tablesorter.com/docs/example-pager.html in a mobile application. I want each row in the Demo to be collapsible/expandable. What is the best way to achieve it? To my knowledge tables don't work well in mobile applications. Correct me if I am wrong. Thanks.
== EDIT ==
This is almost all I want
http://stokkers.mobi/jqm/tableview/demo.html
I'm not sure how this will do in a mobile application, but check out this demo. No need to download that mod as it was added to tablesorter 2.0.5.
The demo shows how to use an undocumented option named cssChildRow which contains the class name expand-child. This class name is added to a table row tr to attach it to the row before it (example code from that demo):
<tr>
<td rowspan="2" class="collapsible"></td>
<td rowspan="2" class="collapsible_alt">SO71774</td>
<td>Good Toys</td>
<td>PO348186287</td>
<td>Jul 20, 2007</td>
<td>$972.78</td>
</tr>
<tr class="expand-child">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>
99700 Bell Road<br /> Auburn, California 95603
</div>
</td>
</tr>
The code needed to make the rows collapsible in in this file: jquery.tablesorter.collapsible.js