im using panel collapse in bootstrap and has a parent category and child category
The parent was display for panel-title and the child categories was display on the panel-collapse to perform an ajax to load posts under child category
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Parent categories</a>
</h4>
<div id="collapse1" class="panel-collapse collapse">
<a onclick(perform ajax event)><li>child categories</li>
</div>
my problem was on page load all post was executed already. i just want only to show the post of the array 0 or to load an ajax on page load
Related
Good day everyone,
I don't think that I've seen a website that has pulled this off yet. I want to try and display the subcategories of a parent category's subcategories; if that makes sense.
Parent Category (parent category)
Subcategory (parent subcategory)
subcategory (child subcategory)
Parent subcategory items
We're currently using NetSuite's SuiteCommerce Advanced to manage the webstore. My developer has said that we're unable to script this. We can pull the subcategories and it's items, but we cannot go further than that.
The best approach appears to have the child subcategory content coded in HTML and then display the HTML onto the facets_category_cell.tpl file
I first created an other record field, assigned it to the Commerce Categories and named it subcategory HTML. The field type is rich text, this seems to be right field type for HTML.
After I saved the Commerce Category with the subcategory HTML content. I went to the facets_category_cell.tpl file, and added the field into the code. I tried two ways, and I was unable to get the HTML to display. It was always blank.
{{custrecordsubcathtml}}
{{modal.custrecordsubcathtml}}
Below is the code we have currently, to pull the subcategories. I added the custrecordsubcathtml tag below the description.
<div class="facets-category-cell" id="facets-category-cell-{{intlid}}" data-id="{{intlid}}">
<div class="facets-cell-anchor" id="facets-cell-anchor-{{intlid}}"><a name="cat-{{intlid}}">{{name}}</a></div>
<div class="facets-category-cell-title">
<div class="facets-category-cell-left {{#if hasImage}} image {{/if}}" id="category-name-{{intlid}}">
{{name}}
<div class="facets-category-cell-description">{{theDesc}}</div>
<div>{{custrecordsubcathtml}}</div>
</div>
{{#if hasImage}}
<div class="facets-category-cell-thumbnail" onclick="toggleCatCell(this)" data-id="{{intlid}}">
<img loading="lazy" src="{{resizeImage image 'thumbnail'}}" alt="{{name}}" class="facets-category-cell-image">
</div>
{{/if}}
<div class="facets-category-cell-arrow" id="facets-category-cell-arrow-{{intlid}}" onclick="toggleCatCell(this)" data-id="{{intlid}}">
<span class='fa chev-right'></span>
</div>
</div>
<div id="seriesDiv{{intlid}}" class="hideHandheld"></div>
</div>
Is there a certain way that I have to pull this information? or are we unable to accomplish this?
I found a weird problem in my project. I'm using Spring MVC, Tiles, JSPX and Boostrap.
I have a navbar in my header page, then I added a span to show a badge like https://getbootstrap.com/docs/3.3/components/#badges.
Till here nothing strange. But If I add an id on span tag and there is an error inside the html code, I can't see any log or exception.
Here the code
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-male"><jsp:text/></span>
<span class="badge badgeNavbar" id="badgesContrattiDaApprovare">
<jsp:text/>
</span> ${clienti}
<span class="caret"><jsp:text/></span>
</a>
<ul class="dropdown-menu">
...
</ul>
Instead If I remove id="badgesContrattiDaApprovare" I can see the exceptions.
Are there any conflicts between span and id?
SO: Why if I add the id attribute to the span inside bootstrap navbar the JSP/Tiles exceptions aren't shown inside the rendered view?
For example here if an exception occurs without the id attribute:
Instead, if I add the id attribute is like the rendering is stopped, and I see only a blank page. The generated/rendered html code is incomplete.
I am trying to scrape a webpage with Mechanize, with the following structure:
<div id="searchResultsBox">
<div class="listings-wrap">
<div class="listings-header">
<div class="listing-cat">Category</div>
<div class="listing-name">Name</div>
</div>
<ul class="listings">
<li class="listing">
<a href="/ShowRatings.jsp?tid=1143052">
<span class="listing-cat">
<span class="icon"></span>
TEXT
</span>
<span class="listing-name">
<span class="main">TEXT</span>
<span class="sub">TEXT</span>
</span>
</a>
</li>
...
I want to navigate to the page behind the <a> HTML element. Right now, I have:
agent = Mechanize.new
page = agent.get("URL")
page = page.at('#searchResultsBox > div.listings-wrap > ul > li:nth-child(1) > a')
but it keeps returning NIL (verified by puts page.class).
I also tried using sleep to try to ensure that pages have time to load before continuing.
Is there anything I am doing wrong? I thought using the CSS selector would do the trick.
Maybe the website content is loaded dynamically, by JavaScript.
Inspect the content of your page variable and see if the content there is complete or not.
If the content is incomplete, it means that there has to be some other requests, to the serwer returning that data. You can search for them opening Chrome DevTools (or other tool). In the tab "Network" you will see all requests made by website. Search for the one containing data that you need and then scrape it by Mechanize.
I am trying to find the xpath for only the parent of a navigation bar. The path which I am trying at the moment is `//a[#class='unselectable'] from this peace of HTML.
`<div class="PrimaryNavigationContainer">
<div class="PrimaryNavigation">
<div class="Menu">
<div>
<a href="http://www.blah.co.uk/brands.aspx" class="unselectable"><span>
Brands</span></a>
<div class="navCol">
<div>
<a class="NoLink unselectable"><span>Shop by Brand</span></a>
<div class="navCol subMenus">
div>
<a href="http://www.blah.co.uk/blah/catlist_bd4.htm" class="unselectable"><span>
blah</span></a>
The xpath seem to be bringing up both the top level cats and sub categories and I am because it is in both but not sure how to single of the parent from the chld. Thanks for any help which you can provide
How about //div[#class="Menu"]/div/a[#class='unselectable']? This way you avoid selecting the a in the subMenus div.
Building a jQuery Mobile app in DreamweaverCS6. Have a an ul with multiple links calling html pages each hold a quiz. The "quiz" page is a jqm page with a javascript file doing all the work of the quiz. Everything works fine, but when you click on the li quiz button to load the page it takes a little while to load and the ajax loading spinner is not showing up. This is a problem because you don't know if the app has frozen or not. Any thoughts on how to force the spinner to show while loading the page?
<div data-role="content">
<ul data-role="listview">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
You can use the
$.mobile.showPageLoadingMsg();
and
$.mobile.hidePageLoadingMsg();
You can refer http://jquerymobile.com/demos/1.2.1/docs/config/loadingMessageTextVisible.html for proper usage.
You can reduce the page loading speed by actually writing the contents of each pages in particular div tags like :
<div data-role="page" id="quiz1">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
You can load this page as :
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
</ul>
This will greatly reduce the page loading time and speed up your app.
The way you have your code, those links will do a full refresh, abd not showing the jqm spinner.
What you can do is change a page programatically, which uses the jqm spinner for transitioning pages. More info http://jquerymobile.com/demos/1.2.1/docs/api/methods.html - changePage ($.mobile.changePage())
The idea is to have yours as follows:
<li><a class="quiz1">Quiz 1<a><li>
<script>
$(document).on('pageinit', '.quiz1', function() {
$.mobile.changePage('quiz1.html');
});
</script>
hope you get the idea...