jQuery add html content in hidden div [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When I use jQuery selectors for add dynamically generated html in hidden div, they don't work. How to add something in hidden div with jquery?
I need to make div hidden while adding content after ajax query, because I should generate many html blocks and add them on page, I want to add all blocks in hidden div and then show all content (make div visible).

You can use jQuery's hide() and show() function to accomplish this, which is a little cleaner than the .css() ZeJur used. Have a look at my Plunker example
Example:
<div class="hiddenContent">I am hidden div</div>
<button class="addDynamicContent">Add dynamic content to div - hide while doing</button>
Script:
<script>
$('.addDynamicContent').click(function() {
$.ajax({
url: "http://api.icndb.com/jokes/random",
beforeSend: function() {
$('.hiddenContent').hide();
console.log('I hide before request');
},
success: function(response) {
$('.hiddenContent').html(response.value.joke);
$('.hiddenContent').show();
console.log('I show after I got the content');
}
});
});
</script>
Check out Plunker

To hide Your element use jQuery .css() method
$('#panel').css('visibility', 'hidden');
and to show it back:
$('#panel').css('visibility', 'visible');
If You need to hide your element before loading a new items You can use beforeSend function:
beforeSend: function(){
$('#panel').css('visibility', 'hidden');
}
and after all Your data is loaded and parsed use success function to show it again:
success: function(data){
$('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
}
and all together:
$.ajax({
method: "POST",
url: "sample.php",
dataType: "json",
beforeSend: function(){
$('#panel').css('visibility', 'hidden');
},
success: function(data){
$('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
},
});

Related

jQuery ajax post on every button click [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
Hey I was trying to submit a form with ajax, but the code I wrote submits it on pretty much every button you press on that page. I need to limit it to only a specific button with specific ID when I changed it to be ("#formId").submit it doesn't work here is the code
<form id="formId" method="post">
<table>
some table content
</table>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(":submit").click(function (e) {
e.preventDefault();
var form = $(this.form);
jQuery.ajax({
type: "POST",
url: "test.php",
data: form.serialize() + "&" + this.name + "=" + this.value,
success: function(data) {
alert("good stuff");
}
});
});
});
</script>
Keep in mind that code is being generated by while loop (when selecting stuff from database) and I put the JS code at the bottom after the loop.
Assign your event to the actual form and change the event to submit instead of click:
jQuery("#formId").on("submit", function (e) {...}
Give every button a different ID and try the code below, or at least implement something like the code below.
<script type="text/javascript">
document.getElementById("button_id").addEventListener("click", function (e) {
$.ajax({
type: "POST",
url: "path_to_script.php",
data: $("#form_id").serialize(), // serializes the form's elements.
success: function(data) {
alert("Congratulations this works");
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
Let me know if this works
Try this.
$("#formId :submit").on("click",function(){
// your ajax code is here...
})

$(document).foundation(); not working

I try to get my elements, that I load via ajax back to work but when I try to reinitialize the events on them, it simply doesn't work.
I tried to insert $(document).foundation(); on different places in my code but nope :(
Here an example:
$.ajax({
url: 'dashboard/ajax/links/get',
method: 'post',
data: {
_token: $('input[name=_token]').val()
},
success: function(data) {
$('.links-container').html(data);
$(document).foundation();
}
});
Any ideas?
Update
Another example
// open edit link modal
$('.item-link-edit').on('click',function(e){
e.preventDefault();
// get item id
var id = getItemId(this);
// open modal and load content
$('#edit-link-modal').foundation('reveal','open',{
url: 'dashboard/ajax/links/modals/edit',
data: {
id: id
},
success: function() {
setTimeout(function(){
$(document).foundation();
console.log('reinit');
},1000);
}
});
});
still not working :/
You need to use reflow if you add new content to the DOM.
$(document).foundation('reflow');
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. If you dont want to reflow everything you can specify the module you want to re-apply;
$(document).foundation('orbit', 'reflow'); // orbit, for an example
Further documentation can be found here:
http://foundation.zurb.com/docs/javascript.html

Content loaded via Ajax breaks buttons [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have an html page which gets loaded via ajax, the newly loaded html content has the following html. It typically works great when I load the html first and then initialize the javascript.
Change password
My js:
$('.ajax-button').on('click', OnLoadContent);
function OnLoadContent(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: "GET",
url: pageurl,
success: function(data) {
alert(data);
$("#content-container").html(data);
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert("ERROR:" + response.responseText);
}
});
}
However since it's new html content that's being loaded I think the problem is the javascript already exists when the html content is loaded via ajax, so the click functionality doesn't work unless I click again. I'm wondering how I can fix this?
Delegate the click higher up the dom...
$('body').on('click', '.ajax-button', OnLoadContent);

How to add classes for each piece of text pulled by Ajax from another site

i'm pulling data from my wordpress site, to my mobile site (different sites).
Wordpress = php and mobile site = static html.
Obviously i want the same content in both sites, because it is the 'same'.
I've got to pull the data and display in HTML, now I need to manipulate that data, add classes, take chunks of text, is this possible?
My code below:
$(document).ready(function () {
var pageName;
var content;
$('li a').on('click', function (){
pageName = $(this).attr('url');
$.ajax({
type: 'GET',
url: 'http://mywebsite.com/' + pageName + '/?json=1',
contentType: 'application/json',
dataType: 'jsonp',
success: function(data) {
content = data.page.content;
if (data.page.url === 'http://mywebsite.com/about/') {
$('.testing').html(content);
}
else {
$('.testing').html('nothing to do');
}
},
error: function(error) {
console.log(error);
}
});
});
});
I'm only accepting texts from my page "about" for now.
Now, I need to take off some things, for example:
There is a text in my about pages in the wordpress site:
"Hi, my name it's Marcelo, i love girls"
And i want display in the mobile app this:
"Hi, my name it's Marcelo, i love"
Or maybe adding a Class or a ID to use differently..
I don't know how manipulate the texts, titles, and images..
Any help is welcome.
So the content is in the json p data format. What you need to do is instead of just appending it like you have done onto the testing class, you need to iterate over it and add to to the class testing or wherever and as you are adding, you can use the addClass() function to give the content the classes you need.
To manipulate text is a simple matter of using build in JavaScript functions that deal with text. Put up a more detailed structure that you want and someone will do the exact thing you want.
You could try a variation on this:
$('li a').on('click', function (){
$('.testing').load( $(this).attr('url') ).addClass('mobile');
});
This loads the entire contents of the URL into a DIV and adds a class of mobile to it.
If all the content was inside a specific ID in the HTML you could load it like this:
$('.testing').load( $(this).attr('url')+' #contentDiv' ).addClass('mobile');

Why does the jquery ajax call erase the current data?

I have some code that calls in a new html file, to be added into a div. I'm wondering why the content in the div is replaced rather than just added in. Once I understand the "why" Id like to know how I would add in external markup into a div while preserving what was already in that div to begin with.
$.ajax({
url: 't3.html',
success: function(data) {
$('.ajax').html(data);
}
});
Instead of:
$('.ajax').html(data);
use:
$('.ajax').append(data);
try .append
$.ajax({
url: 't3.html',
success: function(data) {
$('.ajax').append(data);
}
});
Because you are replacing the whole HTML of .ajax div with data. If you want to preserve the existing HTML of that control use the following
 $('.ajax').html($('.ajax').html() + data);d

Categories