can't make append after jquery load - javascript

Inside clientProfile.html I have a div with class name clientName. And after loading the file inside ajax success, I want to append "hi" to that div, but doesn't work.
JS:
function renderClientProfile() {
$(".wrapper").load("./clientProfile.html");
}
success: function(data) {
renderClientProfile();
$(".clientName").append("hi");
}

Do you mean:
$( ".wrapper" ).load( "./clientProfile.html", function() {
$(".clientName").append("hi");
});

Related

What page is loaded in div

I'm using this command : $( "#result" ).load( "ajax/test.html" ); to load html page's content into div.
My question is how to know what I entered after I enterd it. A function that return the html page that is already inside the div.
You can store in a variable the currently loaded page (currentPage) and compare the page you load with the value of this variable:
<div id="result"></div>
<input type="button" onclick="load('test1.html')" value="Load">
<script>
var currentPage;
function load(page) {
if ( currentPage != page ) {
$("#result").load(page, function () {
currentPage = page;
});
}
else console.log('already loaded');
}
</script>
If you mean to access the contents of that page after it is loaded, You can use the callback of the function load.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
The callback is added as the second parameter one function and work within when it is charged.
You can also receive parameters in the callback.
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
Full documentation have it here http://api.jquery.com/load/

jQuery .get not working

I have the following code that I run whenever the .information element is clicked. I am trying to add the aboutMe.html document to the #text element when the .information is clicked:
$(".information").click( function() {
$.get("aboutMe.html"), function(data){
$("#text").html(data);
}});
For some reason the document is not added to the page when .information is clicked.
Your parentheses and braces are wrong. It should be:
$(".information").click( function() {
$.get("aboutMe.html", function(data){
$("#text").html(data);
});
});
Your callback function was outside the argument list of $.get().
Hope this will work for ýou
$(function() {
$('.information').click(function(){
$('#text').load("aboutMe.html");
});
});

Jquery function doesn't work after Ajax call

I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers
class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference
I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.
The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});

Grabing ajax content after its load

sorry my bad english. I have a function to manipulate ajax like this:
$(document).on("click", ".ajax", function(e){
//dynamic contents here, getting the href value from links.
});
Now I need manipulate the content of the ajax request AFTER IS LOADED, adding some others functions to specific elements (add ajaxForm() to form elements, and others ). The case is: how to bind these functions WITHOUT a specific event? Per example, in the "contact.php" page and I want grab the tag to manipulate this, but the
$("form")
tag is not accessible.
If through a click, I would use
$(document).on("click", "element", function(e){
but no click event
How I can get this? Thks
Aditional information:
I want this:
ajaxLoader(content, "#mainDiv"); //loading a content. ajaxLoader is a .ajax() function
form1 = $("#mainDiv").find('#formOne'); //I need grad form like this
var options = {
beforeSend: function()
{
$("#progress").show(); //inacessible
$("#bar").width('0%'); //inacessible
$("#message").html(""); //inacessible
$("#percent").html("0%"); //inacessible
},
uploadProgress: function(event, position, total, percentComplete)
{
//foo
},
success: function()
{
//bar
},
complete: function(response)
{
//foo
}
};
$(form1).ajaxForm(options); //inacessible
Use the .success callback on your AJAX call. That's is why it is there.

Reload function after Ajax call

I have a plugin raty (http://wbotelhos.com/raty) that is loaded to document.ready, the page content changes at the click of a button reloading a part of the DOM, and the document is not ready "recalculated" and I will not reload all javascript (there are other similar behavior) I tried this solution but without success
function star(){
alert("star");
...code plugin...
}
$(document).ready(function() {
star();
});
$.ajax({
..code..
done: function(creaStella) {
alert("D");
star();
},
complete:function(){
alert("C");
star();
},
});
After call ajax i have alert("star") but i haven't my div populated
Incorrect usage of $.ajax
$.ajax({
..code..
success: function(creaStella) {
//code to populate div goes here
alert("complete");
star();
}
}).done(function(){
//or here
alert("complete2");
});
use success/done as show (or both).
I resolve in this Way..(promise().done)
also form with jquery validate plugin before dosen't works
function star(){
//plugin star
}
$(document).ready(function() {
formJqueryValidate1();
formJqueryValidate2();
star();
});
function formJqueryValidate1() {
//my check
function formJqueryValidate2() {
//my check
}
$.ajax({
success: function(msg) {
$('#myid').html(msg.template).promise().done(function(){
formJqueryValidate1();
formJqueryValidate2();
star();
});
}
}
});

Categories

Resources