I am using pjax in my application. Recently I added livewire and I don't know how to make them work together. My problem:
I have a grid with products and with infinity scroll on a button click, which calls specific URL for data.
<div>
<button wire:click="loadMore" class="bg-blue-500">Show more</button>
</div>
Everything works perfectly unit I click on some filters (for example "sort by desc").
My container reloads (with pjax) and when I click on "Show more" button, it doesn't call anything.
Here is my main layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
#livewireStyles
</head>
<body>
<div id="pjax-container">
<!-- THIS CONTENT RELOADS -->
<!-- Here I have foreach with data and button "Show more" -->
</div>
</body>
#livewireScripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
$(document).pjax("a", '#pjax-container');
</script>
</html>
I have no idea where could be a problem. Thanks for your help.
I've finally found a solution.
You have to rescan all livewire components after pjax end with this command:
window.livewire.rescan()
Try adding the script jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Related
I'm working on a site that has 20+ pages that get changed every few months. I decided to make a script to load the navbar,nav, and footer as they are on every page.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/myCss.css">
</head>
<body>
<navbar></navbar>
<div id="nav"></div>
<div class="content"></div>
<footer></footer>
</body>
<script src="../js/loader.js"></script>
<script src="../js/bootstrap-dropdownhover.min.js"></script>
</html>
Im using loader.js to load in the navbar, nav, and footer.
$(document).ready(function() {
$("navbar").load("../pageFramework/navbar.html");
});
$(document).ready(function() {
$("#nav").load("../pageFramework/navpills.html");
});
$(document).ready(function() {
$("footer").load("../pageFramework/footer.html");
});
This loads all pages perfectly, but when I try to hover my nav the dropdownhover.min.js does not work to show my dropdown menus. When I put the navbar html directly on the page and remove loader.js it works perfectly.
Once your header/nav/footer have been loaded you will need to re-initialize bootstrap; see Bootstrap Select - reinitialize on dynamically added element
You need to load bootstrap-dropdownhover.min.js in the callback of load(navbar.html). See: https://api.jquery.com/jquery.getscript/
I'm really new at this and I would like to create collapsible menus using jQuery Mobile. I went over to their site and found this resource:
http://demos.jquerymobile.com/1.4.0/collapsible/
So, I made a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div id="div2014" data-role="collapsible">
<h3>2014</h3>
<p>
Q1<br/>
Q2<br/>
Q3<br/>
Q4
</p>
</div>
</body>
</html>
but I can't seem to get it to work. All that gets displayed is this:
Please help! I'm really new at this, so I'm not sure if I'm doing things right :(
You need to include the jquery.mobile CSS file as well.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
make use of jQuery's slideToggle() function on click.
See this pen and click 2014, the menu will be displayed and collapsed on clicking it again
I have an html page where a JQuery Loads a page into a div on click. I can click on it and it goes to page 2 and it works. I have the same link that goes back to page 1 and it will load the html in page 1, but if I click back to page 2 it will not load. So pretty much I cannot go back and forth on loading a div from Jquery. I have search and seen something on using live() but can't seem to get anything to work. Any Suggestions?
My Jquery Function to load the div from another page.
<script>
function changepage(page) {
$(function(){
$('#maincontent').load('index.php?p='+page);
return false;
});
}
</script>
HTML To load the page 2:
Page 2
HTML To load back to page 2
Page 1
EDIT:
Entire Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My Page</title>
</head>
<body>
<div id="wrapper">
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div id="maincontent">
Page 2
</div>
<!-- /.maincontent -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<script>
function changepage(page) {
$(function(){
$('#maincontent').load('subpage.php?p='+page);
return false;
});
}
</script>
</body>
</html>
I agree with tokyovariable. you need to link jquery before using it in function. Try adding
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
before script with changepage function.
Also make sure jquery is loaded before changepage function is called. Try
function changepage(page) {
$(document).ready(function(){
$('#maincontent').load('index.php?p='+page);
return false;
});
}
Is jQuery linked to on that page?
I could be wrong, but I don't think you've given us enough information here. The above code looks fine. Is input.php working correctly? What happens when you call:
http://[domain]/index.php?p=page1
http://[domain]/index.php?p=page2
From a browser? Does it output a whole page, or just #maincontent? It's kind of weird, does the index page output a single div, or are you stuffing a whole html page inside another one? Sound like it could be the output from index.php, which would normally be the landing page of your site, so why are you stuffing the whole landing page inside a div?
I am trying to load different external HTMl files into a DIV in my parent HTML. Here is the code I am using
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BeautyDish Photography | Wedding and Beauty Photographer</title>
<meta name="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
<div id="wrapper" style=" max-width:1920px; min-width:1024px;">
<nav>
<div id='MainMenu'>
Home
About Us
Portfolio
Contact Us
</div>
</nav>
<div id="content" style="width:1200px; padding:0; margin:auto;">ff
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
$(function(){
$("#MainMenu a").click(function(e) {
//load home.html on click
e.preventDefault();
$("#content").load($(this).attr('href')+".html", null, function(){
alert('Load Done');
});
});
});
</script>
</body>
</html>
Whenever I click any link for the first time it works perfectly, from second click onward the loading is taking longer and the alert is coming more than once.
I have also hosted a working version at http://www.jbasuphotography.com/index_new.html
I am new to jQuery, please let me know how to solve the problem.
The problem seems to be that you're loading the whole page inside a div of itself.
And it's included with its script and event binding which can only make it worse.
A solution could be to reduce to the part that really interests you (a different page). But this solution would have to be designed for your real need which isn't clear.
before the load you can do a remove first, because its loading multiple files in.
$('#wrapper #content').remove();
$('#wrapper').append('<div id="#content"></div>')
Here is my simplified code which has two pages which link to each other. The result is the page2 count alert always says there is one #page2 div in the DOM. However pagecreate fires for each time that page2.html has been referenced. First time is 1, second time is 2, and so on...
Can someone explain what is going on and how to get one pagecreate event for page2?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<h3>In Index Page</h3>
Go To Page2
</div>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page2" data-role="page">
<div data-role="content">
Back
</div>
<script type="text/javascript">
alert("page2 count is " + $("#page2").length);
$("#page2").live('pagecreate',function(event, ui) {
alert("in page2 on pagecreate");
});
</script>
</div>
</body>
</html>
Thanks,
-- Ed
jQM loads subsequent pages into the same DOM (page) using a debugger/dev tools with Chrome you can easily see this happen.
In subsequent pages it pulls in anything between your tags, but ignores everything else, you could have JS in your or other pages and it'd still only pull in page2.
What exactly is happening with you is that when you load #page2 the first time it properly adds a live event to #page2, then you navigate to index.html, but #page2 remains in your DOM. Now when you goto #page2 again, it will run your JS again
$("#page2").live('pagecreate',function(event, ui) {
alert("in page2 on pagecreate");
});
This binds your alert again, and 2 events fire, next time 3 will fire.
The way you're supposed to do it is load all your JS at the start and listen for the pageinit/pageshow, see my other post: https://stackoverflow.com/a/9085014/737023
Or if you have any questions ask here