this link from ajax call
ajax call from this page
output page
$('#sw_stop,#cd_stop').live('click', function() {
clicks += 1;
if (clicks>=10) {
clicks=10;
var alt="Kick Count Completed!";
$("#alert").show();
document.getElementById("alert").innerHTML=alt;
$.APP.stopTimer();
var h=$("#sw_h").text();
var m=$("#sw_m").text();
var s=$("#sw_s").text();
alert(s);
//var name=$("#name").val();
//var message=$("#message").val();
$.ajax({
type:"POST",
url:"http://www.mummycenter.com/kick-ajax/",
data:{hour:h,minute:m,second:s},
success:function(data){
$("#info").html(data);
}
});
}
document.getElementById("clicks").innerHTML = clicks;
});
above code for jquery ajax this code page not found error please help me.
You're adding jquery library from external source, but wordpress by default adds jquery to the page. Loading it twice is not efficient, and might give conflicts, so either disable that in wordpress, or just don't add the external script source.
The jquery that comes with wordpress runs in no-conflict mode, meaning that you can't use the $ shorthand. Instead you must use jQuery. You can use the $ in your code if you wrap it inside
jQuery(document).ready(function($) {
// your $ code here
});
.live is deprecated in v1.7 and removed in v1.9. Use .on instead.
thanks for comment but problem is pre-defined keyword "hour","minute" that's why ajax not called but by renaming this pre-define keyword now work perfectly
$('#sw_stop,#cd_stop').live('click', function() {
clicks += 1;
if (clicks>=10) {
clicks=10;
var alt="Kick Count Completed!";
$("#alert").show();
document.getElementById("alert").innerHTML=alt;
$.APP.stopTimer();
var h=$("#sw_h").text();
var m=$("#sw_m").text();
var s=$("#sw_s").text();
alert(s);
//var name=$("#name").val();
//var message=$("#message").val();
$.ajax({
type:"POST",
url:"http://www.mummycenter.com/kick-ajax/",
data:{ho:h,mi:m,se:s},
success:function(data){
$("#info").html(data);
}
});
}
document.getElementById("clicks").innerHTML = clicks;
});
Related
I have this scenario:
I have a simple php file with only few html elemnts: a div called switch, another called lamp and a couple of buttons.
The two buttons are labeled On and Off.
The lamp div is empty.
The switch div is empty too, but is updated using jQuery and Ajax with the content of a txt file, that only contains one word: it could be On or Off.
What i'm traying to achieve is this: whenever the file is updated with the word On or Off i would like the On or Off button to be triggered correspondingly and the lamp div to change the background color. Is it possible?
UPDATE:
Example:
(function($){
$(document).ready(function() {
$.ajax({
url : "testfile.txt",
dataType: "text",
success : function (data) {
$("#switch").html(data);
// this doesn't seems to work...
var word = data.toLowerCase();
$('#' + word).trigger('click');
// this works
$(document).ajaxStop(function(e){
var response = $("#switch").html();
$("#" + response.toLowerCase()).trigger("click");
});
var $container = $("#switch");
var refreshId = setInterval(function()
{
$container.load('testfile.txt').html();
}, 2000);
}
});
});
})(jQuery);
<div id="switch"></div>
<div id="on" class="button">On</div>
<div id="off" class="button">Off</div>
<div id="lamp"></div>
Since the response is only one word. Why not try
var word = data.toLowerCase();
$('#' + word).trigger('click');
in the success callback.
If you have only one ajax request, you can do like this:
$(document).ajaxStop(function(e){
var response = $("#switch").text();
// do what you want with variable response here
$("#" + response.toLowerCase()).trigger("click");
});
Maybe this can help for what you need:
(function($){
$(document).ready(function() {
var $container = $("#switch");
$container.load("testfile.txt", function() {
setInterval(function() {
$container.load("testfile.txt");
}, 2000);
});
});
})(jQuery);
Use clearInterval() to stop the timer when needed.
Summary: I have a:
1) main page (Main.php)
2) simple .js script file (dashboard.js)
3) one other simple .php file (form1.php)
4) process.php, a file that processes the information sent by .js file (process.php)
Just like tumblr, I am trying to recreate the same "nav" experience - clicking the several options, replacing the main panel with the new code and when filling up the some form, send that info to BD and present the result in the Main.php
Everything is going well but the last step. After clicking the nav button (main.php), bringing the new form through javascript (dashboard.js + form1.php), filling up that form, I click the button and instead of not reloading the page (jquery->ajax), it sends me to the process.php file and presents me the result.
I have tried not to reload with "return false" and "event.preventdefault()" and still the same result.
JS Code
$('form.ajax').on('submit', function() {
event.preventDefault();
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('name').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(html){
event.preventDefault();
$("ol#list-feed").append(html);
document.getElementById('set-width1').value='';
document.getElementById('tags').value='';
}
});
event.preventDefault();
return false;
});
You haven't defined event:
$('form.ajax').on('submit', function(event) {
event.preventDefault();
//...
});
You need to change the first line to:
$('form.ajax').on('submit', function(event) {
otherwise the event variable inside the function is undefined.
try like this
$('form.ajax').on('submit', function(event) {
event.preventDefault();
//do other works here
}
or remove event.preventDefault() from everywhere and before the end of this function just use return false.
This should work
$('form.ajax').on('submit', function(event) {
EDIT
JQUERY-AJAX REQUEST CODE:
<script type="text/javascript">
$(document).ready(function(){
$(".form").submit( function(e) {
e.preventDefault();
var form = $(this);
var div_add_comment = $(form).parent();
var div_comments = $(div_add_comment).parent();
$.ajax({
type: "POST",
data: $(form).serialize(),
url: "includes/comment.php",
success: function(msg){
$(div_comments).html(msg);
}
});
return false;
});
});
</script>
JQUERY SHOW ALL - COLLAPSE COMMENTS CODE
<script type="text/javascript">
$(document).ready(function(){
$('.see_all').click(function(){
var thisItem = $(this);
thisItem.parent().find('#comment2').slideDown('fast');
thisItem.parent().find('.collapse').css('display','inline-block');
thisItem.css('display','none');
return false;
});
$('.collapse').click(function(){
var thisItem = $(this);
thisItem.parent().find('#comment2').slideUp('fast');
thisItem.css('display','none');
thisItem.parent().find('.see_all').css('display','inline-block');
return false;
})
})
</script>
JQUERY REMOVE DEFAULT VALUE TEXT UPON FOCUS - TEXTAREA
<script type="text/javascript">
$(document).ready(function(){
var Input = $('textarea[name=comment]');
var default_value = Input.val();
$(Input).focus(function() {
if($(this).val() == default_value)
{
$(this).val("");
}
}).blur(function(){
if($(this).val().length == 0)
{
$(this).val(default_value);
}
});
})
</script>
Please let me know if you need anything else, I have the damndest of time copying code and formatting it in these posts.
END EDIT
I am having a weird little problem. I have created a jquery-ajax function to transfer data from a comments section of my page. The page has an instance of this form under each user post. So this page will have X amount of posts with X amount of comments for each posts, like a social network. My ajax request sends, recieves and displays the data perfectly BUT I have two other jquery functions called on elements inside that no longer work after the ajax function returns the html. All the other ones not acted upon by the ajax function STILL WORK. I have the checked and rechecked the response html from the ajax function and it is identical to the html of a standard post-comment instance.
Please let me know what you would like to see or if you have questions.
Thanks, your help is always appreciated!
Be sure to bind the jQuery functions in such a way that the element doesn't have to exist.
$('ul').on('click', 'li', function(){ /* do something */ });
This will execute on LIs that have been added after the binding of the function.
In your case you would want to bind to the parent of the comments section and target the elements that have the click behavior.
$('.comments')
.on('click', '.see_all', function(){...})
.on('click', '.collapse', function(){...})
.on('focus', 'textarea[name=comment]', function(){...})
.on('blur', 'textarea[name=comment]', function(){...})
Try removing the $() from form.
You have this:
var form = $(this);
var div_add_comment = $(form).parent();
var div_comments = $(div_add_comment).parent();
It should be this:
var form = $(this),
div_add_comment = form.parent(),
div_comments = $(div_add_comment).parent();
Since you declared var form = $(this); you don't need to wrap form...how you have it now is the equivalent of $((form))
Not sure if this will fix your problem, but jQuery may be getting hung up on this since you are spawning children from $(this).
I am implementing a twitter-style follow/unfollow functionality with the following jquery.
$(function() {
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif" >');
$.ajax({
type: "POST",
url: "follow.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#follow'+I).fadeOut(200).hide();
$('#remove'+I).fadeIn(200).show();
}
});
return false;
});
});
I have a similar unfollow function. However i have the following problem:
When I have N items {1,2..i.N} each with id = followi and I click on the follow button. I find that some of the items respond while others do not. I suspect it is a pure javascript issue...otherwise i figure none of the buttons would respond at all.
Is it a timing issue...all help is appreciated. Also i'd appreciate it if you could point me to a simpler method.
Thanks!
Well you are doing the UI update in your ajax success handler, so the reaction time for the UI updated is based on the speed of the Ajax response. And if the server doesn't return successfully, the UI update won't happen at all.
A simpler method with instant response:
$(function() {
$(document.body).delegate(".follow","click",function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif"/>');
$('#follow'+I).fadeOut(200); // act instantly since we assume it will go well
$('#remove'+I).fadeIn(200); // act instantly since we assume it will go well
$.ajax({
type: "POST",
url: "follow.php",
data: info,
complete: function(){ //always remove the loader no matter if it goes well or not
$("#loading").slideUp();
},
error: function() {
//handle error
$('#follow'+I).fadeIn(200); // correct mistake
$('#remove'+I).fadeOut(200); // correct mistake
}
});
return false;
});
});
i need some code for the next step..this my first step:
<script>
$("#mod").change(function() {
var barcode;
barCode=$("#mod").val();
var data=barCode.split(" ");
$("#mod").val(data[0]);
$("#seri").val(data[1]);
var str=data[0];
var matches=str.matches(/EE|[EJU]).*(D)/i);
});
</script>
after matches..i want the result can connect to data base then show data from table inside <div id="value">...how to do that?
you can start here. $.ajax();
You should have some server side scripting knowledge also.
You will need to do it using an ajax call (matches will be a parameter for the call). The php script called through ajax will have to fetch the data and give it back to the calling page.
There you will need to parse the ajax response and display what you want.
A helpfull tutorial can be found here.
<script>
$("#mod").change(function() {
var barcode;
barCode=$("#mod").val();
var data=barCode.split(" ");
$("#mod").val(data[0]);
$("#seri").val(data[1]);
var str=data[0];
var matches=str.matches(/EE|[EJU]).*(D)/i);
$.ajax({
type:"post",
url:"process.php",
data:params,
cache :false,
async :false,
success : function() {
alert("Data have been input");
$("#value").html(matches);
return this;
},
error : function() {
alert("Data failed to input.");
}
});
return false;
});
</script>
and i change my process.php become:
select itemdata as version from settingdata where version = "tunerrange";