I have been researching for the last two days, and have found nothing.
structure:
index.php:
<head>
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<div>
<div>Show</div> *-->if I click this link data loads into DIV below by function.js without reloading*
<div id="producten"></div> *-->testpage.php loads here perfect,
the code of testpage.php makes by while loop other links.
Here I want to click on a link to load next data in div id=information
without reloading the index.php so the data in the first DIV stay visible
and I dont know how to do that*
<div id="information"></div> *-->testpage2.php have to load data from sql in this DIV*
</div>
</body>
function.js:
$(document).ready(function() {
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
testpage.php and testpage2.php are PDO code for sql data.
You'll want to attach your click handlers with on so that dynamically added content still has the same ajax handlers available to them:
Add whatever information is needed to differentiate one click from the next, ie
<a href='...' data-resultdiv='production'
Then, cleaning up your handler a bit: I assume you want the ajax request to go to the href of the link, and that you want to show "loading" immediately (instead of waiting for the request to complete).
Finally, to cancel the anchor's default behavior of browsing to the page referenced by the href, you can return false;
$(document).on("click", "a", function() {
var href = $(this).attr("href");
var successDiv = $(this).data("resultdiv");
$('#' + successDiv).html("<div class='loading'><img src='IMG/loading.gif' /></div>");
$.ajax({
type: "POST",
url: href,
data: datastring,
cache: false,
success: function(res) {
$('#' + successDiv).hide().html(res).fadeIn(2000);
}
}
return false;
});
And of course if you only want this to run for certain anchors, you can put a selector on your call to on
$(document).on("click", "a.someClass", function() {
Related
I am using this jQuery plugin for making toggle, but I have an issue that when I make multiple toggles that have same ids and class so in that case I am not able to identify particular toggle for applying auto load ajax on changing value.
I would to ask that how I make same toggle with this same plugin but different ids or class or name so I make ajax function like when I click toggle it will update in PHP without submitting submit button.
The plugin I am using is this one
The code I am using is this:
HTML
<p>Default: <span class="easyswitch"></span></p>
<p>Checked: <span class="easyswitch" data-default="1"></span></p>
SCRIPT
<script>
$('.easyswitch').easyswitch();
</script>
AJAX
$('MY_CLASS_NAME').change(function(){
var mode= $(this).prop('checked');
$.ajax({
type:'POST',
dataType:'JSON',
url:'test.php',
data:'mode='+mode,
success:function(data)
{
$("body").html('Operation Saved');
}
});
You can not handle easyswitch's change event. you need to create click event of it, and from it you can get the status of current toggle.
$('.easyswitch').easyswitch();
$('.easyswitch').click(function () {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
// for all controlls.
$(".easyswitch").each(function() {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
function toogleStatus(mode)
{
if (!mode) {
alert('checked')
}
else {
alert('unchecked')
}
}
Try using callback option
$('.easyswitch').easyswitch({
callback: function(val, ele) {
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'test.php',
data: { mode: val },
success: function(data) {
$("body").html('Operation Saved');
}
});
}
});
click me
I have to send abc.html into a table in my database when I click the link
There are different ways of achieving what you are trying to do.
I think though the "cleanest" would be to use jquery (javascript) to manipulate the event handler.
Something like this would work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
click me
</div>
<script>
$(function() {
$("a").click(function (e) {
var url = $(this).attr("href"); // Here we retrieve the href of clicked link
var res = $.ajax({
type: "POST",
data: {
url: url // The left side is the request key ( so: $_POST['url'])
},
url: "https://url/to/handler.php",
async: false
}).responseText;
console.log(res);
if(res == "success") return true; // returning true lets the browser follow the link
else return false; /* so if it didn't work, the link will not be
followed. Of course you can do at these two
points whatever you like. */
})
});
</script>
Simply echo in PHP success if the insert was successful.
Note though that async:false for AJAX requests is deprecated.
I have this jquery on every page:
$(window).load(function(){
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
which fades out a div when the page is fully loaded.
On all pages i have a form and this Jquery code:
<script type="text/javascript">
$(document).ready(function() {
$("#message").hide();
$("#please_wait_box").hide();
$("#reviewtickets").submit(function(e) {
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString = $("#reviewtickets").serialize();
$.ajax({
type: "POST",
url: "reviewtickets_go.php",
cache: false,
data: dataString,
success: function(res) {
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
});
});
});
</script>
so it basically calls another page to submit the form without moving away from the page.
When the forms are submitted, the page is called to save the data in the above jquery code but my jquery load function doesnt fade out because it cannot see that the page has fully loaded
how can i stop the loading function if the form submit code is used?
the div had an id and class both of overlay
the jquery needed to be the class and not the id as the css was on the class
call it inside the success callback of ajax . success function callback is called when the ajax request is successfully made and datas are returned from the server.
success: function(res){
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
$('#overlay').fadeOut(); //<---here
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
I have some JQuery handling a div click. If the div is clicked once it hides itself and shows another div (and posts to a php script in the background). If it is then clicked again, it's supposed to hide the new div, show the new one again, and post more data to a different script, and so on.
It changes the first time (.f hides, .uf shows) but when I click '.uf' nothing happens.
JQuery:
if($('.f').is(":visible")) {
$('#follow').click(function() {
var to_follow = $('.name').attr('id');
$.ajax({
type: "POST",
url: "/bin/rel_p.php",
data: "y=" + to_follow,
success: function() {
$('.f').hide();
$('.uf').show();
}
});
});
}
else {
$('#follow').click(function() {
var to_unfollow = $('.name').attr('id');
$.ajax({
type: "POST",
url: "/bin/relu_p.php",
data: "y=" + to_follow,
success: function() {
$('.uf').hide();
$('.f').show();
}
});
});
}
HTML:
<div id="follow" class="f">
<img src="img/icons/Follow.png">
<h1>Follow</h1>
</div>
<div id="follow" class="uf" style="display:none;">
<img src="img/icons/Unfollow.png">
<h1>Unfollow</h1>
</div>
use a class if you intend to use the selector twice, and don't write the same code twice unless you have to:
$('.follow').on('click', function() {
var is_f = $('.f').is(":visible"),
to_follow = $('.name').attr('id'),
give_me_an_u = is_f?'':'u';
$.ajax({
type: "POST",
url: "/bin/rel" + give_me_an_u + "_p.php",
data: {y : to_follow}
}).done(function() {
$('.f, .uf').toggle();
});
});
this is an ajax method that inserts the data into a db and should supposedly display the new content.
<script type = "text/javascript">
$(document).ready(function() {
$('#submit').live('click', function(eve) {
eve.preventDefault() ;
var form_data = {
title: $('#title').val()
};
$.ajax({
url: "http://localhost/ci/index.php/chat/comment",
type: 'POST',
data: form_data,
success: function(msg) {
alert(msg);
}
});
});
});
</script>
However in my /chat/comment, i am loading the view again, i.e, user submits a comment, load the view again and the comment should be there. My response from server is the view's HTML. However the view comes with all the divs and there are many of them. I need to retrieve only part of the div, say, #commentspace from the ajax on success.
Look at the jQuery $.load() function?
Example
Inside "firstpage.html"
$('#content').load('secondpage.html #content');