Probleme with Delegate on div and document when dynamic and direct load - javascript

The situation
index.html
<html>
<head>...</head>
<body>
<div id="viewContainer">
<a class="menu-lnk">Link 1 </a>
</div>
</body>
page1.html
<div id="page1">
<a class="page-lnk">Page Link 1 </a>
<a class="page-lnk">Page Link 2 </a>
....
</div>
lib.js
$(document).('click','.menu-lnk',function(e){
e.preventDefault();
$.get('page1.html','',function(response){
$('#viewContainer').html(response);
})
})
The Problem
$('#viewContainer').on('click','.page-lnk),function(){//Code} works only when page1.html is dynamically loaded (what i think it's normal due to the delegate on jquery. but i think it could also when there is direct loading. No ??
When i want to use $('document').on('click','.page-lnk),function(){//Code} in this case it'DOES NOT work anymore.
(PS: excuse me for my english, i'm french)

Related

navigating different pages

I have a page index.html.Suppose I have other page index2.html.
By clicking on a certain link in index.html I want to move to a certain div id in index2.html.Is that possible using css or js?
index.html has following link:
<a href="index2.html #div2"> <!--code i am looking for-->
index2.html has following content
<div id="div1" style="height:1000px;width:100%"></div>
<div id="div2" style="height:400px;width:100%"></div>
Yes. This is possible. Infact, you have have almost done it right. change from
<a href="index2.html #div2">
to
<a href="index2.html#div2">
Means there should be no space between index2.html and #div2.
I hope this helps.
Yes just remove the space you put between the page and the div id
<a href="index2.html #div2"> <!--code i am looking for-->
Change to
<a href="index2.html#div2"> <!--code you need-->
Hope you get how this works

jquery load() causes a tags to lose their href value

<div class="page">
Click!
</div>
<script>
$("a").click(function(){
$(".page").load($(this).attr("href"));
window.history.pushState("", "", '/'+$(this).attr("href"));
return false;
});
</script>
<!-- in another-page.php -->
Click here!
<!-- what the another-page.php looks like once it's been loaded by jquery -->
<a href>Click here!</a>
and then clicking on a link will load a page in a <div class="page"> BUT, I noticed at the top of the page, where there is a <h1>Title</h1> it lost the color i had defined h1 a {...} and then when inspecting element, instead of being the above h1, a thing, it was <h1><a href>Title</a></h1>
Something else is wrong here.
The issue I described occurs when you use <a href=/> not <a href="/">. I didn't test to check and see if the same occurs when using <a href=another-page.php> but found that, quoting the forward slash fixed the problem.

JS menu stops working when navigating to a different page

I'm having some issues with my JS menu. When the page loads the menu work great, and as expected. You click the option, then it displays the menu items.
However, once I click one of the menu items and navigate to a different page the menu stops working! When you click on the icon, the menu no longer appears. The page just sits there. When i look try debug in chrome it no longer "hits" the code.
I have noticed that if i refresh that page, the menu works again as expected :/
My JS code is below, what am I missing for this kind of issue to arise?
I have created a pen for this - http://codepen.io/alr3id/pen/bwdKxL
function MyMenus(jQuery) {
$(".p-menu-icon").on("click", function(event) {
var e = $(this).next(".p-menu");
e.hasClass("p-menu_open") || $(document).trigger("click"),
$(".p-modal-bg").toggleClass("p-modal-bg_active"),
e.toggleClass("p-menu_open"),
event.stopPropagation()
});
// Removes the menu open class.
$(document).on("click", function(t) {
var e = $(t.target)
, i = 1 === e.closest("p-menu").length;
i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"),
$(".p-modal-bg").removeClass("p-modal-bg_active"))
});
}
// Load
$(document).ready(MyMenus);
Below is the HTML for the Menu
<nav class="p">
<div class="p-modal-bg"></div>
<div class="p-property">
<a class="p-property-name" href="/">
Logo Here
</a>
</div>
<div class="p-user">
<a class="p-menu-icon">
<div class="icon icon-navigator-toggle"></div>
</a>
<div class="p-menu p-menu_navigator">
<a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a>
<a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a>
<a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a>
</div>
<a class="p-menu-icon p-menu-icon_account">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="{image here}">
</div>
</a>
<div class="p-menu p-menu_account">
<div class="p-menu-item_account-details">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}">
</div>
<div class="p-account-details-name">
Example User
</div>
<div class="p-account-details-email">example#example.com</div>
</div>
<a class="p-menu-item p-menu-item_settings" href="account">Account settings</a>
<a class="p-menu-item p-menu-item_messages" href="#">Messages</a>
<a class="p-menu-item p-menu-item_logout" href="#">Sign out</a>
</div>
</div>
</nav>
Well, this is something I didn't even consider, it turns out this issue is down to Rails and Turbolinks!
Due to the way Turbolinks loads pages it screws up
$(document).ready
to fix this you need to use...
$(document).on "turbolinks:load"
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
Have you imported the JS file you are using in this page (new page where it stuck) too ? Try adding the code on another file also or move your js code to another js file and import it on that page.
Since it works at freshly loaded page the code itself shouldn't be a problem.
What comes to mind are class changes. Open up your browser's inspector and check if there are any class name changes that would resolve in loosing a listener.
Also try putting some console.log() inside each function so you are sure that both events aren't getting fired one after another.

How to link from one html and display single div of many divs present in second html?

I was trying to create
A.html : It contains links (Topic Headings)
B.html : It contains description of various topics separated in DIV's in a single html file
The size of B.html is very large...So when i link A.html with div id of B.html it loads entire B.html
Is there any way i can link both A and B so that link on A displays only linked DIV of B as a popup or in new tab...
This is code approach i was using
A.html
<html>
<body>
<div>
<a href="B.html#div1" rel="nofollow" target="_blank"/>Link to Topic in Page B</a>
</div>
</body>
B.html
<html>
<body>
<div id="div1">
Description of Topic A
</div>
<div id="div2">
Description of Topic B
</div>
<div id="div3">
Description of Topic C
</div>
<div id="div4">
Description of Topic D
</div>
</body>
Open part of the B.html in a separate tab or display it from the A.html is possible with the iframe tag, but if you want to display specific div, I think you need to use a javascript: see Load content of a div on another page
Hope below solution might help you
<span class="TopicHeadings" linkPageName="http://www.tutorialspoint.com/computer_whoiswho.htm #ab">Topic Heading 1</span><br>
<span class="TopicHeadings" linkPageName="http://www.tutorialspoint.com/computer_whoiswho.htm #Aa">Topic Heading 2</span><br>
<span class="TopicHeadings" linkPageName="http://www.tutorialspoint.com/computer_whoiswho.htm #bs">Topic Heading 3</span><br>
<div id="divContent"></div>
$(document).ready(function () {
$(".TopicHeadings").on( "click", function() {
var linkPageName = $(this).attr("linkPageName");
$('#divContent').load(linkPageName, function() {
alert( "Load was performed." );
});
});
});
Fiddler link : sample code

JQuery Mobile content only shown on reload

I have an index.html containing the following:
index.html
<html>
<head>...</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page two
</li>
<li>Page three
</li>
</ul>
</div>
</div>
<div data-role="page" id="pagetwo">
</div>
<div data-role="page" id="pagethree">
<div id="headerPageThree" data-role="header">
<div data-role="main">
<div id="anyDiv"></div>
</div>
</div>
</div>
<body>
<html>
As you see, the navbar in index.html links between pagetwo and pagethree.
Furthermore I have an main.js
main.js
$(document).ready(function () {
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
Let's say I open index.html with Chrome. URL is
file:///C:/Users/index.html
Then I click on "Page three" in the navbar. URL is then
file:///C:/Users/index.html#pagethree
The problem is, that the styling of items like the selectmenu looks absolutely strange. It's transparent for example. I add more things than shown in the main.js example and some of them aren't even displayed. Meaning there is nothing where they should be.
But the most curious thing is, that if I press F5 on the page where URL is
file:///C:/Users/index.html#pagethree
, then everything is perfect. I don't get this.
What is the difference between pressing F5 on index.html and pressing F5 on index.html#pagethree?
Can anybody help?
Thanks a lot.
The theme must be set on the element, as it isn't being applied from the parent page. I am not completely sure why though...
This can be done by adding the data-theme attribute when you create the select element:
$(document).ready(function () {
$('<select>').attr(
{'name': 'fuu','id': 'load-fuu',
'data-native-menu':'false',
'data-theme': 'a'
}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('#load-fuu').selectmenu();
});
Lastly, if you would like, a codepen example.
Edit: the point made about the option needing a value for selection is valid (though it will still theme properly after we add data-theme)
Instead of the regular jQuery document.ready, use the jQuery Mobile events like pagecreate;
$(document).on("pagecreate","#pagethree", function(){
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
If you want your option to be selectable, give it a value attribute.
DEMO

Categories