jquery mobile not displaying in jsfiddle - jquery-mobile

I can't get a select menu to work in a jquery mobile app, and thought I'd post the problem here, but I can't even get the thing to display properly in fiddle. Thought I'd solve the fiddle problem first.
Here is my fiddle, which contains the following code:
html
<div data-role='content'>
<table class='my-tables'>
<caption style='text-align: left;'>Table A</caption>
<thead>
<TR>
<TH align='left'>Type</TH>
<TH align='left'>Amount</TH>
<th colspan='4' scope='col'>
<label for='selmenu'></label>
<select id='selmenu' class='sel' data-native-menu='false' style='width: 100px'>
<option class='type1' value='type1'>type1</option>
<option class='type2' value='type2'>type2</option>
<option class='type3' value='type3'>type3</option>
<option class='type4' value='type4'>type4</option>
</select>
</TR>
<TR>
<TH align=l eft>Cars</TH>
<TD>5,000</TD>
<TD class='exhaust type1'>7000</TD>
<TD class='exhaust type2'>6000</TD>
<TD class='exhaust type3'>5000</TD>
<TD class='exhaust type4'>4000</TD>
</TR>
<TR>
<TH align=l eft>Trucks</TH>
<TD>45672</TD>
<TD class='exhaust type1'>154</TD>
<TD class='exhaust type2'>1.1</TD>
<TD class='exhaust type3'>3.7</TD>
<TD class='exhaust type4'>55.2</TD>
</TR>
<TH align=l eft>Motorcycles</TH>
<TD>224455</TD>
<TD class='exhaust type1'>88</TD>
<TD class='exhaust type2'>99</TD>
<TD class='exhaust type3'>77</TD>
<TD class='exhaust type4'>55</TD>
</TR>
</TABLE>
<div data-role='footer'>
<h4>my footer</h4>
</div>
<!-- /footer -->
jquery
$(document).ready(function () {
$('.exhaust').hide();
$('.type1').show();
$('.sel').change(function () {
$('.exhaust').hide();
$('.' + this.value).show();
$('.sel').val(this.value);
});
});
Why won't my fiddle even display the jqm styles? I researched similar problems in stackoverflow, found this question on the same thing, but my fiddle page doesn't show the options that are available in the example given in that question.
What am I missing?

Two things:
Use jQuery 1.8.3 library. Included external resource JQM 1.2.0 will not work with later versions.
Load external resources with HTTPS:
https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
After that, your fiddle should work.
UPDATE:
Besides all above, once you choose jQuery 1.8.3 version, fiddle will offer you JQM library below the framework selection menu. So, no need for including external files.

Related

Import table from html into google sheets

I have the following table element from a website.
Using this formula it only extracts the 1st td ie class=TTRow_left
I want to extract both class=TTRow_left and class=TTRow_right in a google sheet
Formula:
IMPORTHTML("https://www.bsesme.com/","table",6)
Html:
<table width="305" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="TTRow_left" style="height:22px;" width="230px">No. of Companies Listed on SME till Date</td>
<td class="TTRow_right" style="height:22px;" id="AL">386</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;" width="230px">Mkt Cap of Cos. Listed on SME till Date (Rs.Cr.)</td>
<td class="TTRow_right" style="height:22px;" id="MCL">58,225.56</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;" width="230px">Total Amount of Money Raised till Date (Rs. Cr.)</td>
<td class="TTRow_right" style="height:22px;" id="Td13">4,132.16</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;" width="230px">No. of Companies Migrated to Main Board</td>
<td class="TTRow_right" style="height:22px;" id="MB">150</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;" width="230px">No. of Companies Listed as of Date </td>
<td class="TTRow_right" style="height:22px;" id="CL"> 236</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;">No. of Companies Suspended</td>
<td class="TTRow_right" style="height:22px;" id="CS">32</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;">No. of Companies Eligible for Trading</td>
<td class="TTRow_right" style="height:22px;" id="CET">201</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;">No. of Companies Traded</td>
<td class="TTRow_right" style="height:22px;" id="CT">110</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;">Advances/ Declines/ Unchanged</td>
<td class="TTRow_right" style="height:22px;" id="Adv">73/ 32/ 5</td>
</tr>
<tr>
<td class="TTRow_left" style="height:22px;">Mkt Cap of BSE SME Listed Cos. (Rs.Cr.)</td>
<td class="TTRow_right" style="height:22px;" id="Dec">15,095.93</td>
</tr>
<!--<tr>
<td class="TTRow_left" style="height:22px;" width="230px">No. of SME companies migrated to main board</td>
<td class="TTRow_right" style="height:22px;" >3</td>
</tr>-->
</tbody></table>
</td>
</tr>
</tbody></table>```
There is a way, You could extract that data with Google Apps Script - i.e. writing a function that reads the values (those are returned by a separated request).
You need to make a request to this url - which is the one that loads the data:
https://www.bsesme.com/markets/MarketStat.aspx?&292022849
Values are:
bse$#$237|32|202|104|58|37|9|15,110.69|12|3,364.25|150|387|58,387.68|4,144.97
And then, extract the data.
I check the page's source code and that page is using javascript for read the data and rearrange it on the main page (i.e. https://www.bsesme.com/).
Tip: Check the main page's source code and check a function called function GetNotices(str) - that function looks like has the logic for rearrange the data.
You will have to check deeper in order to figure out how you can extract this data on your spreadsheet.
In this case IMPORTHTML would be able to return table data as long as it's not JavaScript generated, I tried checking the web page you are trying to scrap data from and it seems that the exact content that is missing is generated through JavaScript as it's not shown when disabled from the browser:
As you can see when JavaScript is disabled the content in the page is not displayed however the Table content TTRow_left is hard coded that's why the function is able to get this information from the web page:
td class="TTRow_left" style="height:22px;" width="230px">No. of Companies Listed on SME till Date'
You will notice that TTRow_right is not displayed therefore the function won't be able to scrap data from it.

How to verify the initial text using geb

I am using geb spoke. For the below html structure I am not able to get the text from specified location:
Below is the html structure:
<div class="tab-pane ng-scope active" uib-tab-content-transclude="tab" ng-class="{active: tab.active}" ng-repeat="tab in tabs">
<div id="algemeen-tab-header" class="ng-tab-hdr ng-scope"></div>
<div id="algemeen-tab-body" class="ng-tab-bdy table-view ng-scope">
<table class="ng-tbl valign-top">
<tbody class="esuite-table-body">
<tr>
<td class="tp-label">
<label class="ng-binding">
Reference:
</label>
</td>
<td class="tp-field ng-binding">
I-5006-2015
</td>
<td class="tp-label ng-hide" ng-show="!zaak.anoniem"></td>
<td class="tp-field ng-binding ng-hide" ng-show="!zaak.anoniem"></td>
<td class="tp-label" ng-show="zaak.anoniem"></td>
<td class="tp-field ng-binding" ng-show="zaak.anoniem"></td>
<td class="tp-label"></td>
<td class="tp-field ng-binding"></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
I wanted to verify the text "I-5006-2015". I am not able to do it. Also, second scenario is that, I just wanted to assert that initial word is "I" from that location. How I can do that.
I have tried below variable to get the location but got failed:
referenceNumberText(wait:true){$("td", class: contains("tp-field ng-binding"))}
Please help me on this. Thanks!
Since you use html ids rather rarely, the selector for you text would be:
$("#algemeen-tab-body > table > tbody > tr:nth-child(1) > td:nth-child(2)").text()
Did you consider naming <td>'s? Example:
<td id="referenceNumber" class="tp-field ng-binding">
I-5006-2015
</td>
So your selector would be as easy as $("#referenceNumber").text()...

i want only published children in umbraco

I want only those children who are publish in content folder.
this is my below code:
<umbraco:Macro runat="server" language="cshtml">
#foreach (var item in Model.Children)
{
<h3 class="vacancyH">#item.jobTitle</h3>
<table class="vaccTbl">
<tr>
<td class="vaccDetailTitle">Salary & Benefits:</td>
<td class="vaccDetailDesc">#item.salaryBenefits</td>
</tr>
<tr>
<td class="vaccDetailTitle">Employment Type:</td>
<td>#item.employmentType</td>
</tr>
<tr>
<td class="vaccDetailTitle">Department:</td>
<td>#item.department</td>
</tr>
<tr>
<td class="vaccDetailTitle">Report to Position:</td>
<td>#item.reportToPosition</td>
</tr>
<tr>
<td class="vaccDetailTitle">Location:</td>
<td>#item.location</td>
</tr>
<tr>
<td class="vaccDetailTitle">Date of Description:</td>
<td>#item.businessArea</td>
</tr>
<tr>
<td class="vaccDetailTitle" valign="top">Summary:</td>
<td class="tablep">#item.vacancySummary</td>
</tr>
<tr>
<td colspan="2" valign="middle"><img src="/images/wordicon.jpg" alt="" class="docIcon" />Download the Full Job Description</td>
</tr>
</table>
<div class="vaccCloseDate">Application Deadline: #item.applicationDeadline.ToString("dd MMMM yyyy")</div>
<div class="vaccApplyForPosition">Click here to apply</div>
}
</umbraco:Macro>
By this i get the all children which are not published..
Now i want the only published children.
What do you mean by published? What you are doing will only display published items, this is how umbraco works. Using where("visible") relies on you having created a property on one of your doc types called umbracoNaviHide and setting it to true in order to hide items. If what you have is not working then there is another reason for it.
Are your unpublished items greyed out in the content tree?
Try right click in top level content node and republish entire site.
Make sure your browser isn't caching something so clear the cache.
Failing all this simply delete umbraco.config in your app_data folder.
Umbraco does not render unpublished items.

Is there a way for me to strip away div classes and other CSS stuff when generating grails views?

Well, there goes my question. I really don't like the UI, and if there was a way to auto generate only the essential things like the fields but no divs and classes. I know about removing the css, but I really just want the raw html like what rails gives me. Anybody know how?
For example, grails generate-views myStuff generates code that looks like this:
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="name">Name:</label>
</td>
<td valign="top" class="value ${hasErrors(bean:feedback,field:'name','errors')}">
<input type="text" id="name" name="name" value="${fieldValue(bean:feedback,field:'name')}"/>
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="feedback">Feedback:</label>
</td>
<td valign="top" class="value ${hasErrors(bean:feedback,field:'feedback','errors')}">
<input type="text" id="feedback" name="feedback" value="${fieldValue(bean:feedback,field:'feedback')}"/>
</td>
</tr>
</tbody>
</table>
When I'm only interested in getting this:
<input type="text" id="name" name="name" value="${fieldValue(bean:feedback,field:'name')}"/>
<input type="text" id="feedback" name="feedback" value="${fieldValue(bean:feedback,field:'feedback')}"/>
Well, I could always do stuff manually and not auto-generate, but, no it's not practical when the fields are too many. :(
Use the install-templates command to install the templates. Then you can edit/modify the templates to meet your needs.

jquery ui spinner malfunctioning with jquery mobile

I'm trying to use jquery ui spinners in a table with jquery mobile 1.4.0
<div class="table_data">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Address</th>
<th>Doorbells</th>
<th>Mailboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$( ".spinner" ).spinner();
</script>
In the jsfiddle link below you can see my problem. The buttons don't show up in the correct place and they don't even work anymore.
http://jsfiddle.net/murtho/ZZqu6/5/
When I do not include the jquery ui js and css file the spinners work just fine. I need the mobile ui for other features in my application, but I also wish to implement the jquery spinner (of an alternative solution)
This is how it should be working:
http://jsfiddle.net/murtho/tf89L/2/
jQuery UI and jQuery mobile don't play together that well.
For your number spinner, you can fix the formatting with one extra line of code to remove the jQM classes from the spinner button divs:
$(document).on("pagebeforeshow", "#page1", function(){
$( ".spinner" ).spinner();
$(".ui-spinner div" ).removeClass(function() {
return $( this ).attr( "class" );
});
});
Here is your updated FIDDLE
Another option is to set type="number" on the input boxes; however, not all browsers understand this.
You will need to see if jQuery UI causes any other problems with your particular application...

Resources