I'm quite new to Jquery.
I'm creating a php application including a flow of posts containing text, and sometimes video and images in a flexslider plugin. Initially, 3 posts are shown and I have implemented a "Show More"-button using the following code: (based on this example)
<script>
$(document).on('click', '.showmore', function () {
$(this).text('Loading...');
var ele = $(this).parent('li');
$.ajax({
url: 'showmore.php',
type: 'POST',
data: {
page: $(this).data('page'),
},
success: function (response) {
if (response) {
ele.hide();
$(".posts_list").append(response);
}
}
});
});
</script>
This is working just fine, loading 3 new posts with each click WITHOUT page refresh. The problem is all instances of the Flexslider plugin, that won't display correctly. The raw code is included fine, but it's like the Jquery functionality is not connected to the newly loaded posts.
I have tried to include the flexslider script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script src="jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function () {
$('.flexslider').flexslider({randomize: true, animation: "fade", });
});
</script>
again in many places, both inside the showmore.php file and in the above Ajax-script.
I've been searching this and other resources without success.
Could anyone shed some light to this? It's probably quite simple.
Thanks!
Related
I am very new to ajax and am really struggling. My end goal is to make a forum software like nodebb. I've already made a php forum but decided not to use it because it just seemed old unlike faster looking forums like nodebb. What I'm trying to understand is how to make multiple tabs that display different information each but keep the same data for the header. I understand this is probably a very simple thing to do, but currently I am unable to accomplish this.
https://dogecraft.net is a great example of what I'm trying to accomplish.
If you click on the different tabs, it loads information in each one. I tried this but I had trouble with the url. When I reloaded, it simply just loaded my new file and that's not what I want.
(Yes, I am using a local jquery file. Jquery isn't the issue.)
I've tried w3schools but didn't find really helpful information
I've also tried many other websites.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$( "#one" ).click(function(){
$("#div1").load("/one/").hide().fadeIn();
window.history.pushState("object or string", "Title", "/one/");
});
});
$(document).ready(function(){
$( "#two" ).click(function(){
$("#div1").load("two.html").hide().fadeIn();
});
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>
</body>
</html>
I would like to have a homepage 'index.html/php'
I need a button to load one page of content (one.html/php) and then another button that loads another page of content (two.html/php).
On refresh, I would like it to keep the same content that was on the homepage including the buttons in the header.
You could make an Ajax call to your html/php to retrieve the html code and then inject the content on your div. Here is an example:
$(document).ready(function() {
$("#one").click(function() {
$.ajax({
url : 'http://myserver.com/myhtmlpage.html',
success : function(html) {
$("#div1").html(html);
}
});
});
$("#two").click(function() {
$.ajax({
url : 'http://myserver.com/myphppage.php',
success : function(html) {
$("#div1").html(html);
}
});
});
});
When you click a button, an ajax call is made, and if succesful, the success function will be called. The first parameter has the html code of the webpage you requested. Then you can use the html function of jQuery you can inject it on your div.
A couple of tips:
You might want to use only one onready function, no need to declare it several times
You might consider returning a json object with the data instead of a php page. This will be useful later on if you consider using a framework such as Angular or Vue. If you can generate a JSON file on your php such as this:
{
"name": "John"
}
Then you could do something like this:
$("#two").click(function() {
$.getJSON({
url : 'http://http://myserver.com/myphppagethatservesjson.php',
success : function(json) {
$("#div1").html("<h1>My name is " + json.name + "</h1>");
}
});
});
Then it will render "My name is John".
This could be improved a lot,but I hope it could help you a bit.
I am trying to put a script together that works with a Jquery object and a Jquery slider that also works with JqueryUI. I'm trying to figure out howto put it all together in a webpage (php) but trying to put just the slider in my webpage breaks both the functions and they don't work properly anymore.
Does anybody has an idea of what i am missing here and how the script fails to work properly?
NOTE REMOVING V1.9 OR V1.3 DOESNT MATTER CAUSE THE SCRIPT STILL WORKS 50%, EITHER THE SLIDER DOESNT WORK OR THE AJAX CALLS IN SCRIPT.JS
*first load all scripts and styles.
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
<script src="/shop/templates/Euphoria-Art/js/jquery.limitslider.js"></script>
<script type="text/javascript" src="/shop/templates/Euphoria-Art/js/script.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css"/>
SCRIPT.JS - There are 4 of these objects
$(document).ready(function() {
var form = $('#formB'); // form
var submit = $('#submitB'); // submit button
var alert = $('.pageB'); // div for show page
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: '********/offertebeginC.php', // form action url
type: 'post', // form submit method get/post
dataType: 'json', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
},
success: function(result) {
if(result.error){
alert.html(result.html).fadeIn();
console.log(e)
}else{
alert.html(result.html).fadeIn();
form.trigger('reset');
}
}
});
});
});
If you must include multiple versions of jQuery, for instance using a plugin which depends on an earlier version, you'll want to use $.noConflict().
Take a look at the docs here, and a bit of a tutorial here
This is a user login screen, when login successful I want to show another page, this "kinda" works but after successful login I get a mixture of both pages! it is all overlayed. So only when I refresh the page I can see it properly. I also tried to use jQuery version 1.6.4 but didn't help.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$.ajax({
...
success: function (data){
$.mobile.changePage('account.html');
},
});
</script>
Also apart from overlay issue on the next page there is a JavaScript code which does not work until I refresh the page.
$(document).ready(function() {
$(".infoBasic").click(function() {
$(this).next('.infoDetails').slideToggle("50");
});
});
A couple of issues here:
jQuery Mobile 1.1 only work with core jQuery verysions 1.6.4 and 1.7.1 while Mobile 1.2 works with core 1.7.0 and 1.8.2
$(document).ready() is not supported. Use $(document).bind('pageinit') instead. http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Your script references should not start with // but http://
You could do this i think:
$.ajax({
...
success : function(data) {
$('body').empty();
$.mobile.changePage('account.html');
},
});
For your second problem, you should use delegation with .on():
$(document).ready(function() {
$(this).on('click',".infoBasic",function() {
$(this).next('.infoDetails').slideToggle("50");
});
});
I've seen many topics on this site about using jquery load and loading the script the in the html fragment. I, unfortunately, have not been able to get any of these methods (getscript) to work. Here is the code that loads the html and the supposed javascript.
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
$(document).ready(function(){
$("#x").click(function() {
event.preventDefault();
$("#content").load("content.html", function(){
$.getScript("imagemod.js")});
return false;
});
});
</script>
When loading fragmented page loads, though, the pages javascript doesn't seem to work. When I load the page not through ajax, the script seems to work. Here is the page that is suppose to have the javascript working but isnt. The page in question is reached by clicking on "large" of the american dogs menu. Help is much appreciated.
You are using an undefined variable 'event' and forgot a semicolon...
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
$(document).ready(function () {
$("#x").click(function(event) { // event object is passed as first arg
event.preventDefault();
$("#content").load("content.html", function () {
$.getScript("imagemod.js");
}); // semicolon
return false;
});
});
</script>
Also be aware, that if you load an html document like
<html>...</html>
and not a fragment like
<div>...</div>
browser's won't properly import that into an existing document, because it's a standalone DOM document. To do ajax and partial html, load a fragment like <div>...</div>.
So, I'm dabbling in some jQuery today, and I come across an issue. I have a page that has a number of links in the following format:
<a class="a_link" id="a_id<#>" href="#">Click me</a>
Where <#> is a number generated in a for loop in the PHP that runs the page. At the top of the page, I have a script tag linking to the Google CDN for jQuery 1.7.2 minimized, and a div with id of "form_map". After all the links have been displayed, I have the following script:
<script type="text/css">
$(document).ready(function(){
$('.a_link').click(function(){
var c_id = $(this).attr('id');
var task = 'read';
var ajax_url = 'engine.php';
alert('link pressed for id: '+c_id);
$.get({
url: ajax_url,
data: { 'task':task, 'c_id':c_id },
success: function(res){ $('#form_map').val(res); }
});
});
});
</script>
Disregarding all that wonky Ajax calls (which also do not seem to work correctly), when I click a link nothing happens. It doesn't even run the script. I tested this by setting a breakpoint and adding the alert. Nothing seems to even trigger this.
Any suggestions on what I am doing wrong?
use:
<script type="text/javascript">
instead of:
<script type="text/css">
also use:
$('#form_map').html(res);
instead of
$('#form_map').val(res);
You may want to fix the opening tag
<script type="text/css">
to
<script type="text/javascript">
You need to return false at the end of the function you pass into .click().
$('.a_link').click(function() {
// Your AJAX stuff here.
return false;
});
Returning false stops the link from continuing to work as normal.