I am using a cms which has a page where new content is added via ajax.
So the content is constantly updating but there are no page refreshes.
This is typically the html for each piece of content which gets added.
<li class="row-1" style="display: block;">
<div class="content">
Body text for content 1
</div>
</li>
As more content gets added the html will look like
<li class="row-2" style="display: block;">
<div class="content">
Example text for content 2
</div>
</li>
<li class="row3" style="display: block;">
<div class="content">
some more example text for content 3
</div>
</li>
etc
On my page load I have jquery being executed for the content which is already existing.
What I would like is jquery to be executed for each new content as it gets loaded on to the page.
Would I create the jquery individually for each item, then load the jquery when each item gets added to the page.
Or would I create a jquery function which detects when new content is added?
For now to begin with I would just like to alert when new content gets added so I can see how it is done?
Thank you for reading and any help provided.
Check answer to this SO question that could be a solution to bind the event on successful ajax load.
This might be the way you want to go for your website.
So what you can do is load the jquery with the elements itself and bind events to these elements.
Related
I have placed an IFRAME on the web page where I have set its src attribute to an HTTPS content to load. The IFRAME is placed inside a Bootstrap Nav-Tab Content; The Tab is placed inside a Card element.
I noted that if I load the web page, the content doesn't load; but if I clicked on the other tab the came back all other contents in the tabs are loaded. I am intending to show a PowerBi report.
Unlike the earlier posting on the subject, I didn't find an exact solution. Most of them were referring to X-Origin but mine it works if you switch back and forth between tabs and doesn't remain blocked.
Behaviour is captured in a video: https://youtu.be/tX8utKu7tYY
My working is https://jsfiddle.net/hifni/otcek65z/13/
What I have tried so far:
Used the Basic IFRAME
Used JQuery to auto Refresh the content in an IFRAME
Used JQuery to Set the Src dynamically in an IFRAME
Switched between Proxy and Public Internet
After analyzing the code from JSFiddle, the issue seems to be in the CSS. You have the following HTML part when loading the page (which represents your tabs):
<div class="tab-content">
<div class="tab-pane" id="foo">...</div>
<div class="tab-pane" id="bar">....</div>
</div>
And you have this CSS:
.tab-content>.tab-pane {
display: none;
}
This means that all content is hidden. Now when you click a tab, the class tab-pane changes to tab-pane active show. And the CSS used for this looks like this:
.tab-content>.active {
display: block;
}
The best way to solve this would be, to always automatically set the tab-pane active show class to the first tab element. For example:
<div class="tab-content">
<div class="tab-pane active show" id="foo">...</div>
<div class="tab-pane" id="bar">....</div>
</div>
I'm working with Django to build a simple website, and in one of my my pages, analysis.html, I call the Twitter API to load some data.
In analysis.html, I have this card that I got from Bootstrap's components:
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#buttona" style="color:#1DA1F2">Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buttonb" style="color:#1DA1F2">Content B</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Content A</h5>
<p class="card-text">
// Content A Stuff
</p>
</div>
</div>
There's 2 buttons, Content A and Content B, and upon clicking Content A I'd like the page to load content A stuff only inside the card, and similarly for content B.
I'm fairly new to HTML, so my first thought was to just load a new page, say analysisA.html, upon someone clicking button A, and anaysisB.html upon someone clicking button B, where everything on the HTML template is the same except for content A/B.
But this seems like bad coding, and it'd be calling the Twitter API unnecessarily, as all the necessary data is already called when analysis.html is opened.
So, how should I go about swapping the content back and forth in the card only, while keeping everything else in the page the same? Thank you.
Normally you would use a javascript framework like AngularJS to load your page content, but since bootstrap uses jQuery you could take advantage of the jQuery based load function. For instance:
$("#contentA").click(function() {
//Load an entire external page in to contentA
$( "#contentB" ).load( "analysisB.html div#content" );
//Load just a piece of data from an external file in to contentA
$( "#contentB" ).load( "analysisB.html" );
})
jquery mobile newbie -- I inherited this project.
I have quite a few 'pages' in my jquery mobile app. On each page I have a nav panel. Each page is set up much like this:
<div data-role="page" id="help_manual" data-theme="d">
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
Home
User main menu
</div>
</div>
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel_help_manual"
data-iconpos="notext">Menu</a> <!-- this is the button that actually brings up the above panel-->
<h3>User Manual</h3>
</div>
<div data-role="content">
BLAH BLAH CONTENT
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Back to main menu
</div>
</div>
This all works well and good.
Then you make another page. ... Then another... Then another... Suddenly you've got a few dozen pages all with their own 'menus'. They all work, but there is a LOT of redundant code, given all the menus are identical.
Now I want to make a change to all of the menus.... and instead of modifying one 'navigation panel' I have to make the change a few dozen error-prone times.
I have tried simply taking the 'panel' code and moving it outside the 'page' div... but that results in, effectively, a 'new' 'page' when the button is clicked. Other attempts at moving the various parts of this code around are similarly broken.
An include could remove the 'list' from the 'core' of the control group... unfortunately, that still leaves a lot of redundant code and I've got one fun tweak: This page needs to be able to work offline. The purpose of this app is to be able to go offline, collect data 'in the field', and come back and upload it. So a SSI isn't an good option.
Help?
Here is a JsFiddle with multiple pages and the panel written only once.
You should write your panel once outside the page. (If you have one file per page, just write the panel outside the index page as a sibling of the page) :
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
...
</div>
<div data-role="page" id="help_manual" data-theme="d">
...
</div>
Doing so and as it becomes an external panel. You should then initialise it manually.
$('#navpanel_help_manual').panel();
The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
Hello!!
i have a question and i haven't found any solution for it anywhere...
So, I have a button that link to internal div page (#page2) with a very long list, I need that the internal div page will be "loaded" before the transition will start...
Here is a very simple Sample Code:
<!-- Page #1 -->
<!-- ... -->
<div data-role="content">
<p>View internal page: goto Page 2</p>
</div>
<!-- ... -->
<!-- Start of Page #2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<ul><li>...</li>
<li>...</li>
<!-- About 300+ of: <li>...</li> -->
</ul>
</div>
So, Clicking over The link to #page2 should give you jquery mobile "Loading..." And after it "loaded" the content the transition should begin..
The reason Im doing it in the same page it that im inserting to the page#2 div dynamically all facebook friends (Long list), and it take a long time from the Click and until the transition begin...
Here is a nice example of what i need:
http://www.mpdtunes.com
Just go to: Live Demo-> Login -> Click Artists...
Any suggestions are welcome!
Thank you very much!!!!
Basically you want to do this:
Use button like this:
goto Page 2
Add a click event to it:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#to-page2', function(){
// Load internal page content
});
});
Where #index is an id of your button containing page.
Show loading animation aka ajax loader
setTimeout(function(){
$.mobile.loading('show');
},1);
SetTimeout is needed because web-kit browsers have a problem with dynamically triggered ajax loader.
Load your internal page content. Now if you are using 1 HTML page with multiple pages you can append new content to listview immediately. This is because listview is already loaded into the DOM. If you are using several HTML pages then store your page content into localstorage variable.
Hide ajax loader, again with setTimeout.
Start page transition with:
$.mobile.changePage("#page2");
If you have 1 HTML page then this is it. If you have stored your page content inside a localstorage then you will need to load it during the pagebeforeshow event of a second page, like this:
$(document).on('pagebeforeshow', '#page2', function(){
// Load internal page content from local-storage and append it
});
Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.