Develop Reference

Append a load() output to the same div in jQuery

A button calls a JS function that loads a different PHP page asynchronously using jQuery load, and it will put the result in a errorReturn div.
<div id='errorReturn'></div>
<button onclick='trySomething()'>Click me</button>
<script>
function trySomething() {
var url = 'otherpage.php'
$('#errorReturn').load(url)
}
</script>
All is fine.
Since I want the user to see ALL the errors if the button is clicked multiple times, I wanted to APPEND that result to the same div.
I tried both
$('#errorReturn').append.load(url)
$('#errorReturn').append(load(url))
And they didn't work. Then I found the solution:
$('#errorReturn').append($('#errorReturn').load(url))
It works. Kind of :( It fills the errorReturn div, but it doesn't append to it. It simply overwrites it, as if I simply wrote
$('#errorReturn').load(url)
I should probably just take a break, but I cannot see what's wrong :(
EDIT: Since somebody flagged this as "answered in another question", the other question was using JS while I was explicitly asking for jQuery - plus the other answer generated a lot of fuss about adding HTML with possible XSS injection and I think the accepted answer here is way nicer and simpler to understand

load() always overwrites the content of the target element. To do what you require you could make the AJAX request and append the content manually. Try this:
<div id="errorReturn"></div>
<button id="add-content">Click me</button>
jQuery($ => {
$('#add-content').on('click', e => {
$.ajax({
url: 'otherpage.php',
success: html => $('#errorReturn').append(html)
});
});
});

Make a new <div>, .load() content into it, and .append() that.
$("#errorReturn").append($("<div/>").load(url));
You can of course also add styles etc. to the <div>, like for example a top margin to separate the individual errors.

jQuery function .prepend() don't work with wordpress nav menu item

I have a menu in Wordpress and I want to hook up Appointlet script to it. The code is here:
(function(e,t,n,r)
{
if(e)return;
t._appt=true;
var i=n.createElement(r),s=n.getElementsByTagName(r)[0];
i.async=true;i.src='//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
s.parentNode.insertBefore(i,s)
})
(window._appt,window,document,"script")
<div data-appointlet="tfracine">
</div>
My idea is to create menu item with blank name, get its id (for example, "#menu-item-66"). Then add my code in front of it using jQuery function.prepend().
So I created custom js file, included it in the header.php file and the code inside the file was this:
$(document).ready(function(){
$( "#menu-item-66" ).prepend( "Test" );
});
I started with the word "Test" to figure out if it works.
Unfortunately, nothing happened and I have lack of skills to figure out why. Any suggestions or smarter way to do it?

The jQuery .prepend() function will prepend a jQuery element, not a string.
So, you have to create a jQuery element by doing:
var newElement = $('<p>New Element</p>');
In your case, what you could do is:
$(document).ready(function(){
$('#menu-item-66').prepend($('<p>This is a jQuery element</p>');
});
For a complete reference, check the .prepend() documentation out.

.prepend() and .prependTo() adds the specified content as the first child.
The question is bit not clear. Do you want to insert your script inside your
div ?

How to add url link from jquery through css element?

Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span>
Please give me an example that how to use jquery to set css element as href link.
Thanks in advance

CSS is not capable of doing such things. But JavaScript is! To change the href of an element first obtain the element:
var e = document.getElementById("elementid")
or
var e = document.getElementByClassName("elementclass")
Here are the basics on JavaScript selectors.
And then we can change the href property like so:
e.setAttribute("href", "http://google.com")
Good Luck!

You can open using JS/JQuery and CSS
Jquery has short simple code and is too fast too so I prefer that:-
Here is the Code :-
HTML
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
//Remember to add JQUERY on your page to make any jquery code work
<div id="example">Click Here</div>
JS
//UPDATED CODE:-
$(document).ready(function() {
$("#example").click(function () {
alert("K");
window.open('http://www.google.com/');
});
});
the Issue was that the function I gave you should be added under "$(document).ready(function(){"
Reg, "DIV or SPAN" u can use any tag, but give ID to that and whatever ID you are giving, mention the same in jQuery code too!
And Reg, JQUERY being called, please check on your page is there any other MAIN Jquery file being called? if there is already some other Jquery being called then this one is not required.
Please Check the updated Fiddle for your reference: http://jsfiddle.net/aasthatuteja/aPbje/
Let me know if this resolves you issue.
Enjoy!

Javascript not making div show

I'm having trouble making a div show up using javascript.
<div class=" notification success">
x
<p>An email has been sent confirming your identity.</p></div>
<script type="text/javascript">
var notification = '.notification';
$(notification).show();
</script>
</div>
Any ideas?

Place your jquery js in a document.ready() otherwise you cant ensure that the DOM is fully loaded and ready.
Your need is just a one liner like so
$(document).ready(function()
{
$('.notification').show();
});

You need to have double or single quotes surrounding the selector if you're naming a specific element ("#id", ".class").
Best way to do this is to avoid using the variable. It's just three extra characters anyways.
Also, put your code into a $(document).ready(function(){}); function like this:
$(document).ready(funciton(){
$(".notification").show();
});
To minimize the amount of code you're putting in, you can just use this instead:
$(function(){
$(".notification").show();
});
$(function(){}); can replace $(document).ready(), as by default jQuery selects the document.

clearing an <a> href after the page is loaded using jquery

I'm trying to slightly modify a wordpress template. At the moment a function returns a link to an article, I am trying to replace this link so that instead of diverting you to another page it just brings the article in and loads it.
To do this I need to reset the anchors href after the page has loaded.
This is the bit of code I am interested in:
<?php the_content( __('<img class="readmore" src="/images/readmore.png" title="poo"></img>', 'twentyten' ) ); ?>
returns:
<a class="more-link" href="http://henryprescott.com/undgraddissintro/#more-12">
<img title="poo" src="/images/readmore.png" class="readmore"></img></a>
However I want to modify this so a script runs instead of taking you to a new page.
I therefore tried to run this:
$(document).ready(function(){
$("a.more-link").css("href", "#");
alert($("a.more-link").css("href"));
}
It does nothing, and the alert returns "undefined".
Where am I going wrong, thanks!

Use attr() instead of css().
The css method is for getting or setting CSS properties (like margin, color, font-size, etc.). The attr method is for getting or setting HTML attributes, like href, src, etc.

You are trying to change the attribute with a CSS command, which is wrong.
$(document).ready(function(){
$("a.more-link").attr("href", "#");
alert($("a.more-link").attr("href"));
}

the css() if just for adding inline css, try attr() in this case
jQuery(document).ready(function(){
jQuery("a.more-link").attr("href", "#");
alert(jQuery("a.more-link").attr("href"));
return false;
}
the return false is to avoid the page reload. ;)