I am developing a tool for my Wordpress website using jQuery, I am quite new at this but what I'm trying to do is not that hard.
My script is enqueued, i've read that with the NoConflict mode i can't use $ so I use jQuery instead.
function Calculator()
{
var result = jQuery('result');
if (jQuery('day').value == "" || jQuery('month').value == "" || jQuery('year').value == "") {
return;
}
result.update('<span class="result">processing</span>');
jQuery('form').request({
onComplete: function(transport) {
result.hide();
result.update(transport.responseText);
new Effect.Appear(result, { duration: 0.5 } );
}
});
}
My problem is I got error everywhere :
update is not function
request is not function
etc...
There is something i'm obviously doing wrong but can't figure out what...
thanks a lot !
The errors you are seeing ("update is not function request is not function") describe the problem - those really are not jQuery functions.
It looks like you're trying to update an HTML element with ID or class "result". To do that, use .html():
var result = jQuery('.result'); // "." to select the element with class result
result.html('something');
For .request, it looks like you are trying to do a POST or GET of a form. If so, use .ajax(), .post(), or .get(). Note though you'll need to add a few more details, eg:
jQuery('form').ajax({
type: "POST",
url: someurl,
data: somedata,
onComplete: ...
});
Also, if your Calculator() function can be called while the page is loading, make sure it (or whatever calls it) is wrapped in document.ready:
jQuery(document).ready(function () {
...
});
An unrelated issue, to check the value of say a form input with class "day", you need to use:
jQuery('.day').val()
if you are fetching the value using class then you have to do it like this:
jQuery('.result').val()
or if using id use it like:
jQuery('#result').val()
in jquery we use .val() function to get value instead of value.
Is update, request exists in jquery?
you can use like this rather than writing again and again.
var j = jQuery.noConflict();
j(".result").html("<span>Processing..</span>");
Related
If I am here asking it is because we are stuck on something that we do not know how to solve. I must admit, we already searched in StackOverflow and search engines about a solution.. but we didn't manage to implement it / solve the problem.
I am trying to create a JavaScript function that:
detects in my html page all the occurrences of an html tag: <alias>
replaces its content with the result of an Ajax call (sending the
content of the tag to the Ajax.php page) + localStorage management
at the end unwraps it from <alias> tag and leaves the content returned from ajax call
the only problem is that in both cases it skips some iterations.
We have made some researches and it seems that the "problem" is that Ajax is asynchronous, so it does not wait for the response before going on with the process. We even saw that "async: false" is not a good solution.
I leave the part of my script that is interested with some brief descriptions
// includes an icon in the page to display the correct change
function multilingual(msg,i) {
// code
}
// function to make an ajax call or a "cache call" if value is in localStorage for a variable
function sendRequest(o) {
console.log(o.variab+': running sendRequest function');
// check if value for that variable is stored and if stored for more than 1 hour
if(window.localStorage && window.localStorage.getItem(o.variab) && window.localStorage.getItem(o.variab+'_exp') > +new Date - 60*60*1000) {
console.log(o.variab+': value from localStorage');
// replace <alias> content with cached value
var cached = window.localStorage.getItem(o.variab);
elements[o.counter].innerHTML = cached;
// including icon for multilingual post
console.log(o.variab+': calling multilingual function');
multilingual(window.localStorage.getItem(o.variab),o.counter);
} else {
console.log(o.variab+': starting ajax call');
// not stored yet or older than a month
console.log('variable='+o.variab+'&api_key='+o.api_key+'&lang='+o.language);
$.ajax({
type: 'POST',
url: my_ajax_url,
data: 'variable='+o.variab+'&api_key='+o.api_key+'&lang='+o.language,
success: function(msg){
// ajax call, storing new value and expiration + replace <alias> inner html with new value
window.localStorage.setItem(o.variab, msg);
var content = window.localStorage.getItem(o.variab);
window.localStorage.setItem(o.variab+'_exp', +new Date);
console.log(o.variab+': replacement from ajax call');
elements[o.counter].innerHTML = content;
// including icon for multilingual post
console.log(o.variab+': calling multilingual function');
multilingual(msg,o.counter);
},
error: function(msg){
console.warn('an error occured during ajax call');
}
});
}
};
// loop for each <alias> element found
//initial settings
var elements = document.body.getElementsByTagName('alias'),
elem_n = elements.length,
counter = 0;
var i = 0;
for(; i < elem_n;i++) {
var flag = 0;
console.info('var i='+i+' - Now working on '+elements[i].innerHTML);
sendRequest({
variab : elements[i].innerHTML,
api_key : settings.api_key,
language : default_lang,
counter : i
});
$(elements[i]).contents().unwrap().parent();
console.log(elements[i].innerHTML+': wrap removed');
}
I hope that some of you may provide me some valid solutions and/or examples, because we are stuck on this problem :(
From our test, when the value is from cache, the 1st/3rd/5th ... values are replaced correctly
when the value is from ajax the 2nd/4th .. values are replaced
Thanks in advance for your help :)
Your elements array is a live NodeList. When you unwrap things in those <alias> tags, the element disappears from the list. So, you're looking at element 0, and you do the ajax call, and then you get rid of the <alias> tag around the contents. At that instant, element[0] becomes what used to be element[1]. However, your loop increments i, so you skip the new element[0].
There's no reason to use .getElementsByTagName() anyway; you're using jQuery, so use it consistently:
var elements = $("alias");
That'll give you a jQuery object that will (mostly) work like an array, so the rest of your code won't have to change much, if at all.
To solve issues like this in the past, I've done something like the code below, you actually send the target along with the function running the AJAX call, and don't use any global variables because those may change as the for loop runs. Try passing in everything you'll use in the parameters of the function, including the target like I've done:
function loadContent(target, info) {
//ajax call
//on success replace target with new data;
}
$('alias').each(function(){
loadContent($(this), info)
});
I have setup a search funtionality that will search in an XSLT file. This works flawlessly but I have a little trouble returning the search results dynamically with ajax.
This is my JS:
var SearchHandler = function(frm) {
frm = $(frm);
var data = frm.find(".search-field").val();
$.ajax({
method: 'GET',
url: '/',
data: { query: data },
dataType: 'xml',
success: SearchSuccessHandler,
error: SearchSuccessHandler
});
};
var SearchSuccessHandler = function(html) {
};
What I want is the SearchSuccessHandler to dynamically load the search result from index.php?query=searchword
I just can't seem to figure out the right way to handle it.
Based on your comment:
Bah.. Sorry... The ajax call will return some new html based on the
query ... I want the existing html to be replaced I have tried
$('body').html(html.responseText); but then I cannot search again
because javascript is not loaded correctly
It's not the AJAX which is the issue but rather event delegation
When you bind a function to an element directly like this:
$('.my-element').on('whatever', function() { ... })
the handler will work as long as the element exists however if you replace the contents of the entire body you'll run into trouble as your original .my-element no longer exists.
You can overcome that by using event delegation to make sure your function keeps searching e.g.
$(body).on('whatever', '.my-element', function() { ... })
This basically says: "If I click on body and the target is .my-element then execute this function"
Instead of a directly bound handler which says: "If I click on this specific element then execute this function"
the body will always exist and therefore you'll always be able to delegate down from the body but if you can do it on some more specific element that would obviously be better since then you won't have an onclick handler on the entire body.
I think this is what your issue is since you're replacing the entire body.
Try this
success:function(data) {
// do your stuff here
}
Of course, you need to be sure your function is returning some values.
To make it easier for your, encode the values as json on your index.php
return json_encode($values)
Then, inside your success function, just parse it with eval()
I'm struggling with figuring out how to call/execute a function in jQuery. I've done quite a bit of searching and find what looks like it should be the answer, but it doesn't seem to work. I assume it is a scope issue since everything else seems to match examples I've found here, but I'm relatively new to jQuery and can't quite figure it out.
Basically, when the "bookmark" button is clicked, it uses ajax to create an entry in the database, and changes the format of the clicked button. This acts as expected. The trick is this requires someone to be logged in. The actual click of the button adds a #bookmarkme anchor to the url - if they aren't logged in (this is where things start getting tricky for me), the log in window pops up and they are prompted to sign up/log in, and the page reloads to set all the log in variables properly. This also works as expected. Where it breaks down is once the user logs in and the page reloads, I can't get the "bookmarkFunction" to run.
<script type="text/javascript">
var loggedin = <?php echo $loggedin; ?>;
var headerButtonScript = function(){
var bookmarkFunction = $("#bookmark").click(function(){
var directoryName = "<?php echo $directoryName;?>";
if(loggedin == 1 && $("#bookmark").hasClass("headerButton")){
$.ajax({
type: "POST",
url: "../includes/bookmarkProcess.php",
data: {directory: directoryName},
success: function(data, status){
if(data == "success"){
$("#bookmark").switchClass("headerButton", "headerButtonDisabled", 1000, "easeInOutQuart");
$("#bookmark").text("Bookmarked");
}
}
});
}
else{
$("#signInContent").toggleClass('hidden');
$("#signInPopUp").toggleClass('hidden');
}
});
};
var headerButtonsAfterLoad = function(){
var currentAddress = window.location.href;
var hashPosition = currentAddress.indexOf("#");
var targetLocation = currentAddress.substring(hashPosition+1);
if(targetLocation == "bookmarkme"){
if(loggedin==1){
//CALL bookmarkFunction HERE;
//I know I get to this location when expected, because placing an alert("message") gives me the pop up
}
}
};
$(document).ready(headerButtonScript);
$(window).bind('load',"",headerButtonsAfterLoad);
</script>
Based on my research, I have tried the following lines (one line attempted each time rather than all at once, of course) in the excerpt to try to call the function, but no luck yet.
if(targetLocation == "bookmarkme"){
if(loggedin==1){
//CALL bookmarkFunction HERE;
bookmarkFunction();
bookmarkFunction.run();
bookmarkFunction.call();
bookmarkFunction.apply();
}
}
Any help on locating my issue - scope, methods, or otherwise - is greatly appreciated!
"I need the script to take the same action it would when I click on the bookmark button (ID = bookmark) when the page reloads and has the anchor #bookmarkme"
This will do what you want^
$('#bookmarkme').trigger('click');
$("#bookmark").click(). should work.
Remember, calling a jQuery method on a jQuery object returns the original jQuery object. So if you say:
var bookmark=$('#bookmark')
Then bookmark is set to the jQuery object (which contains the element of id=bookmark as a property).
If you attach methods to the object like this:
var bookmark=$('#bookmark').click(function(){console.log('You clicked!')})
Then, yes, the element with id bookmark will now call this event when you click it, but the click method on a jquery object returns the original jquery object. That means bookmark will still be equal to $("#bookmark"), not the function in the click method.
So in conclusion, when you attach an event to a jquery object, like click or hover, it goes into the dom and attaches the event, and then returns the original jquery object. That way you can do things like:
var bookmark=$("#bookmark").click(function(){console.log("you clicked")}).mouseover(function(){console.log("you moused over")})
And you can keep attaching events forever and ever, and bookmark will always be equal to $("#bookmark")
I got this code from some template, it gets executed by clicking on the tabs to fetch posts into the page. All I want is to have an edited copy of this code to fetch posts by timer aside from clicking on the tabs. I have tried the setInterval but it didn't work, I appreciate any help I am so new to Ajax and JQuery.
jQuery(document).ready(function($) {
setInterval(function(){
e.preventDefault();
var bt = $(this);
var bts = bt.parent().parent();
var where = $(this).parent().parent().parent().next();
var nbs = bt.parent().parent().data('nbs');
var nop = bt.parent().parent().data('number_of_posts');
cat = bt.data('cat_id');
if (cat === '') {
cat = bt.data('parent_cat');
}
where.parent().find('.show-more').find('.nomoreposts').remove();
jQuery.ajax({
type: "post",
url: nbtabs.url,
dataType: 'html',
data: "action=nbtabs&nonce="+nbtabs.nonce+"&cat="+cat+"&nbs="+nbs+"&number_of_posts="+nop,
cach: false,
beforeSend : function () {
where.parent().append('<i class="nb-load"></i>');
},
success: function(data){
where.hide().html(data).fadeIn('slow');
bts.find('li').removeClass('active');
bt.parent().addClass('active');
where.parent().find('.nb-load').remove();
}
});
}, 5000)
})
You have to get started to some degree before we can really help you code-wise. We can't just write the code for you because we do not know what elements you want updated and how.
All I can advise you is the Jquery Ajax method is how this code retrieves url responses:
jQuery.ajax({
type: "post",
url: "<name of your url or maybe servlet>"
success: function(data){
// data is the response from your url
// in the code sample, data was html that was inserted to an element
}
});
You can put this ajax call in a function and use setInterval. You can place the setInterval call on your Jquery.ready() function.
Your first issue is that you're trying to call jQuery.setInterval, not setInterval. jQuery.setInterval is not a function, so calling it will just give you an error.
The next issue is that your script tries to alter a bunch of elements, using the clicked element as a starting point. This is bad practice because of situations like this, where changing how to function is invoked can completely break the script. Without knowing what all of this:
var bt = $(this);
var bts = bt.parent().parent();
var where = $(this).parent().parent().parent().next();
var nbs = bt.parent().parent().data('nbs');
var nop = bt.parent().parent().data('number_of_posts');
is, it's pretty difficult to give advice. The safest bet is to replace $(this) with jQuery(".nb-tabbed-head li a"), but that might cause issues because $(this) refers to only one element, whereas jQuery(".nb-tabbed-head li a") may refer to multiple.
Really the biggest issue is that you're trying to use code that a) is poorly-written and b) you don't understand yet. I highly recommend learning about AJAX, events, the DOM, and jQuery before you make a serious attempt at this. It's almost impossible to create a good product when you're gluing together pieces of code that you don't understand that were written by someone that you don't know.
Hey guys i have looked as much as i could and i could not find an answer, i am creating an admin interface that has forms all over the place and i would like to use the same jquery code for all of them, i have some code that is getting the job done but i would like to know if there is a more efficient way to do it. here is the code
function submitForm( formname )
{
$.ajax
({
type:'POST',
url: 'session.php',
data: $(formname).serialize(),
success: function(response)
{
if( $('#message_box').is(":visible") )
{
$('#message_box_msg').html ('')
$('#message_box').hide();
}
$('#message_box').slideDown();
$('#message_box_msg').html (response);
}
});
return false;
}
Now my forms look something like this:
<form id="adminForm" action="session.php" method="post" onsubmit="return submitForm('#adminForm');">
Now my question is... is there a simpler way to do this, like without having to provide the submitForm() function with the form id every time?
Thanks in advance!
You may want to delegate a handler to document or other permanent asset in the page(s) to account for any ajax loaded forms. This will replace your inline onsubmit
$(document).on('submit','form', function(){
var allowSubmit=false,
noSubmitMessage="Can't submit", /* can change message in various places in following code depending on app*/
$form=$(this);/* cache jQuery form object */
if( $form.hasClass('doValidation')){
/* class specific code to run*/
allowSubmit = validationFunction();
}
if( allowSubmit){
var data=$form.serialize()
/* do ajax*/
}else{
/* user feedback*/
alert( noSubmitMessage);
}
return false;
});
Yes, define a common class for all your forms, and use
$(".form_class").submit(function() {
//stuff that gets executed on form submission ...
return result;
})
And dump the inline "onsubmit". It's also cleaner to do this in general, as it separated view from behaviour.