I apologize in advance for my bad English.
I have site in development http://plast-pak.esy.es/ on html-coding
With Ajax i called html page into my front page and slider is SlideUp.
<button onclick="clickAlert();" class="clickDown">?????????</button>
<script>
function clickAlert() {
$(this).click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
}
</script>
Was callback page with information. It have her own button, witch have to close this page and return front page.
<button onclick="clickAbort();" class="clickUp">????????? ?? ???????</button>
<script>
function clickAbort() {
$(this).click(function(){
$('.front-page > #main_wrap').slideDown(3000);
$('.front-page > #menuBar').slideDown(3000);
$('#projectInformation .full-node').remove();
});
}
</script>
In the end, everything works, how it works. All horrible and very incorrect. Please help me to understand why it all works so. Thanks in advance.
Remove
$(this).click(function(){
from clickAlert and clickAbort. They are already click handlers.
Other than that, you will have to be more specific about "horrible and very incorrect".
$(this).click() is used to setup a handler for the click event of the button, and you're already doing that by setting the onclick attribute in your markup.
The usual way to do this is by giving an id to the button, so that you can set events in the javascript code:
<button id="alert" class="clickDown">Подробнее</button>
<script type="text/javascript">
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
</script>
Thanks everybody for your advices. The problem was solved as follows:
<button id="alert" onclick="clickAlert();" class="clickDown">Подробнее</button>
function clickAlert() {
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
...
}
});
...
}
for whatever reason, Slider not given use following code
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
Only click event in button is working. Thanks again for your advice
Related
Load data into a select with ajax and jQuery.
When I click on any item loaded the selection returns to the first item. Here is the code I use:
HTML:
<div class="selector-asesor-independiente">
<label class="fl ml4p sitecolor">Asesor Independiente
<select name="pol_drectivo" id="pol_drectivo" class="w100p"></select>
</label>
</div>
Javascript:
$(document).ready(function(){
$('.selector-asesor-independiente select').click(function() {
$.ajax({
type: "POST",
url: "ajax_cargaAsesorIndependiente.php",
success: function(response)
{
$('.selector-asesor-independiente select').html(response).fadeIn();
}
});
});
});
I try to change the event from .click to .change but nothing happens.
What am I doing wrong?
It is recommended to call the ajax on document.ready() method or window.load. Not on the click of the same input.
$(document).ready(function(){
//Your ajax call here
});
If this doesn't help, please post a sample of the response you are getting.
Updated code:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "ajax_cargaAsesorIndependiente.php",
success: function(response) {
$('.selector-asesor-independiente select').html(response).fadeIn();
}
});
});
I have some ajax code:
$(document).ready(
function()
{
$("#button1").click(
function()
{
$.ajax({
type: "POST",
url: "update.php",
});
});
});
In my html code I have 200 buttons. How can i loop buttons i this ajax code? I'm newbie of ajax and js.
I know I can copy and paste and change number of buttons but I think it's not optimalize code.
Thank's for help.
You can apply some common class to the buttons to select all of them:
$(document).ready(
function()
{
$(".myButtonClass").click(
function()
{
$.ajax({
type: "POST",
url: "update.php",
});
});
});
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "update.php",
});
});
});
<button class="button" id="button1">button 1</button>
...
<button class="button" id="button200">button 200</button>
I got another problem with my code :)
var limit = 15;
$(document).ready(function() {
var data = 'clients=&categories=&keywords=&limit='+limit;
$.ajax({
type: 'POST',
url: 'index.php?ind=work&op=get_list',
data: data,
success: function (data) {
$('.list').html(data);
$('.thumb').click(function() {
var idz = 'id='+$(this).attr('id');
$.ajax({
type: 'POST',
url: 'index.php?ind=work&op=get_work',
data: idz,
success: function (data) {
$('.work').show('slow').html(data);
}
});
});
}
});
});
The HTML code is simple:
<div class=\"center wide work\" style=\"display: none;\">
</div>
When I click on a div.thumb, all needed information is loaded with no problem. The problem is that there is no transition animation. Please help with that. Thanx in advance!
The only reason I can think of is the element is already displayed, so try
$('.work').hide().html(data).show('slow');
Hei.. I have a function to load more news. Since jquery-1.9.1.min.js this function was working alright, but now I have to replace it with .on() method and I still can't get it work.
Here is the code:
// Load more news feed
$(function(){
var page = 1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true",
dataType:'json',
success: function(data){
$("#the_news_feed").html(data.news_feed);
if(page <= data.total_pages){
$("#the_news_feed").after('<button id="load_more_feed" class="btn btn-primary btn-large" style="width: 100%;margin-top:10px">Load More</button>');
}
}
});
$("#load_more_feed").live("click", function(){
var next = page+=1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true&page_num="+next,
dataType: "json",
success: function(data){
$("#the_news_feed").append(data.news_feed);
if(next == data.total_pages){
$("#load_more_feed").remove();
} else {
$("#load_more_feed").html("Load More");
}
},
beforeSend: function(){
$("#load_more_feed").html("Loading...");
}
});
});
});
I tryed to replace:
$("#load_more_feed").live("click", function()
with
$("#the_news_feed").on("click", "load_more_feed", function()
but I still can't get it work. What am I doing wrong? Thank you!
I display this function with id="news_feed" so here was the problem
<div class="tab-pane fade" id="news_feed">
<div id="the_news_feed"></div>
</div>
Final solution is $("#news_feed").on("click", "load_more_feed", function()
Thank you guys!
Actually, you're missing the # in the id selector.
$("#the_news_feed").on("click", "load_more_feed", function()
must be
$("#the_news_feed").on("click", "#load_more_feed", function()
assuming #the_news_feed is the parent of #load_more_feed.
EDIT :
From your code, you're appending this #loadmore button after #the_news_feed, so this obviously will not work. Try changing it to this :
$(document).on("click", "#load_more_feed", function()
This will bind the click to the document, which will always exist. Alternatively, you could bind it to #load_more_feed closest static parent, like an element which exists when you load your page and not dynamically created.
(In Firefox and IE9 it doesn't work. In Chrome, this works)
If I remove the ajax, the hide / show JQuery works. Any solutions?
<form id="ppform" action="blah.asp" method="post">
<div id="saleload">Blah</div>
<button id="sendbutton">Send</button>
</form>
$(document).ready(function(){
$('#saleload').hide();
$('#sendbutton').click(function() {
$('#saleload').show();
$.ajax({
type: "POST",
url: /blah/blah.asp,
data: reqBody,
dataType: "json",
success:function(data,textStatus){
if (data.redirect) {
window.location.href = data.redirect;
}else{
$("#ppform").replaceWith(data.form);
}
}
});
});
});
This line:
$("#ppform").replaceWith(data.form);
is replacing the whole form contents with the response from your Ajax request. This means the click handler you setup will be gone too, because #sendbutton will be gone. Even if you have another button with the same ID inside data.form, it won't work. You have to use event delegation instead:
$(document).ready(function(){
$('#saleload').hide();
$(document).on('click', '#sendbutton', function(){
$('#saleload').show();
$.ajax({
type: "POST",
url: "/blah/blah.asp",
data: reqBody,
dataType: "json",
success:function(data,textStatus){
if (data.redirect) {
window.location.href = data.redirect;
} else {
$("#ppform").replaceWith(data.form);
}
}
});
});
});
Also: you seem to be posting an undefined variable reqBody to your server, and, as lonesomeday said above, you were missing quotes around the URL.
The obvious reason is that there is an error with your Javascript that causes the whole section not to execute. Quickly looking through your code shows this line:
url: /blah/blah.asp,
Strings need to be enclosed in quotation marks:
url: "/blah/blah.asp",