Reloading/refreshing div with Ajax - javascript

I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.
This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.
var $r = jQuery.noConflict();
$r(document).ready(function() {
$r('#open').click(function () {
$r('#expandable-2').show('slow');
$r(this).load(location.href + '.panel > *');
});
$r('#close').click(function () {
$r('#expandable-2').hide('1000');
$r(this).load(location.href + '.panel > *');
});
});
So far I have this,
a link with the id's of open and close
once clicked they give the css property of display block and display none to a div expandable-2
the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.
Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.
Hope that makes sense but any help would be awesome.

to "refresh" a div you just need to do:
document.getElementById("myDiv").innerHTML = new_content;
new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.

You can change html of a div with html method of jQuery.
$r(".content-div").html("Hello world");
If you want to load an html from server with ajax, you should use load function as below:
$r(".content-div").load("ajax/users.html");

There is a clear mess with your code. Just a few tips:
If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.
The proper way of loading external code through ajax into a div is:
$r('.panel').load('/path/to/url');
This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div, otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (i.e.: $r.ajax)

Related

Hide div when array is empty

I have an array set up that has something added to the array every time to drop a word into a bucket on the page. I'm trying to show and hide certain div's depending on how many objects are in the array.
My code is:
if (test > 5){
$(".moving").hide();
$("#done").show();
}
This works perfectly except when the page first loads. The div with ID #done is still showing when the page first loads and then goes away when the array gets it's first object. (Array starts empty)
In your css just add #done{display: none;} That way the div will not show when page first loads.
Or use #done{visibility: hidden;} if you just want the div not to be visible.
If you don't have access to the HTML code you could hide it in ready function :
$(function(){
$("#done").hide();
//Or
$("#done").css("display","none");
//The rest of code
});
Hope this helps.
Use : #done{display:none;} or #done{opacity:0;}
Later in code, whenever you want to display it, you may use js/css to change display to block or opacity to 1.
The following function will hide done div and show moving div when page
is ready after complete page is rendered:
$(document).ready(function(){
$("#done").hide();
$(".moving").show();
});
Similarly you can use load method in to run a function on page load. but be aware load method is executed before complete page
is rendered
In your current code, you can add the following at the very beginning of ready function,
$('#done').hide();
or
$('#done').css('visibility','hidden');

Changing HTML content on menu item click

I am trying to change the content of the yellow area when the user clicks on 'Dashboard', 'customers' etc: Here is the template I used
First I tried to change index.js I gave an id to div area:
$('.icon-dashboard').on('click', function() {
$("#area").load("secondpage.html #area > *");
});
This didn't work for me. Any suggestions to change the content between main tags?
Your selector for the load command is wrong. Your HTML shows a <main> tag with <div class="helper"> so you would want to use $("main .helper").load(...) to load content into "helper". Or, if you want to replace the "helper" div with whatever comes back from .load, just do $("main").load(...).
Also, passing "secondpage.html" to .load() is only going to work in the local browser. I'm assuming you're only doing that because you're testing? Ultimately, you'll need some backend script at an URL to return your content.

Showing loading animation in div

How can I insert a div into another div using jquery? I'm trying to replace contents of my div with a loading div until the ajax call returns.
<div id="content1>foo</div>
<div id="content2>bar</div>
<div id="loadingDiv" class="loading-indicator"></div>
I have a common ajax requester that takes a div id and request url, which populates the div contents when the request is complete -
MyCommon.GetAjaxCall(fetchUrl, data)
.done(function (responseData) {
// On success, put content
$(responseContainer).html(responseData.View);
})
Ideally, I just want to populate the contents of the responseContainer when I enter my function call to show the loading animation in the div and replace it with the response contents when the ajax completes.
I tried adding $(responseContainer).html($("#loadingDiv").show()); (+some variations) and also tried appendChild to precede the GetAjaxCall above but none of those worked. I'm trying to have a dashboard style page layout with the data being populated in each div independent of each other and still show the same loading animation. Am I thinking about this the right way?
The following should do it:
$('#content1').append($('#loadingDiv'));
If you want to do it via .html then make sure you do
$('#content1').html($('#loadingDiv').html())

Invisible DIV not available to JavaScript

Im sure the answer to my question is here somewhere but I cannot find it. I apologise if I have duplicated.
I have a DIV that I set its visiblity on page load depending on the data I pull back.
So in the code behind:
this.divMyDiv.Visible = false
If the user then changes a drop down value I try to show the DIV
var div = document.getElementById('divMyDiv');
div.style.display = 'block';
If the div is set to visible by the code behind on the initial page load all is fine. The DIV will show and hide when I change the drop down value. However when the DIV is hidden on page load the var div in the JavaScript is always null. I have tried var div = document.getElementById('<%=divMyDiv.ClientID%>'); but I get the same results. I have also tried moving the JS to the bottom of the page. Same results.
this.divMyDiv.Visible = false
...will prevent the div from being rendered at all and Javascript can't find it. If you still want to render it and use display:none to hide it, you'll want to do;
this.divMyDiv.Style["display"] = "none";
Setting an aspx control to Visible = false on the server side means that the control won't be rendered at all in the Html Response, and thus it isn't available at all client-side for javascript to use. You'll need to render it (Visible=true) but then Hide the control using css, e.g. style='display:none' or similar. See also Question regarding Visible=false and display:none;
If this property is false, the server control is not rendered. You should take this into account when organizing the layout of your page.
If you want the control to be rendered but not visible, you should leave Visble = true and hide the control using script or css.
div.style.display = 'none';
See http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible.aspx
in code behind use
instead of
this.divMyDiv.Visible = false
use this
divMyDivAttributes.Add("display", "none");
It will then be rendered by javascript and your other java script function will run properly too

Completely Reload TinyMCE

I have been writing a CMS for a while now and am currently putting the last few touches on it. one of which includes using ajax to deliver a tinyMCE editor in a lightbox styled window.
when it is loaded, the first time it works perfectly, but when i do it the second time or more, the element names get messed up and it doesn't send data back, or display the current value in the TinyMCE window. When I use Chrome to inspect the element, I can see that the span that contains the previous tinyMCE window is still there.
I use document.body.removeChild to remove the div that is holding it. Does anyone have any ideas?
Addition:
when AJAX gets back from making the request (it has all the html code of what goes in the window), it creates a new div element and uses document.body.appendChild to add the element to the document and puts the html code into the div tag.
Then it travels through the new code and searches for the scripts in that area (of which one is the MCE initiator) and appends them to the head so they are executed.
if the user clicks cancel rather than save, it removes the div tag by using:
document.body.removeChild(document.getElementById("popupbox"));
which works fine,
however when i bring up popup and repopulate as said before, and inspect the elements there, there is still a span there which was created by TinyMCE and the naming has been changed (instead of being identified by 'content', it is now 8 for some reason) and there is no content in the editor region.
I have used:
tinyMCE.execCommand('mceRemoveControl',true,'mce{$Setting['name']}');
tinyMCE.editors[0].destroy();
but neither of them work. They return the tinymce window to a textarea, but the elements are still there.
Removing the editor as you described (using the correct tinymce editor id) before moving or removing the html element holding the tinymce iframe is a good choice. Where do you load your tinymce.js? If you deliver it using ajax i think it might be better to load it on the parent page(!). Some more code would be helpfull.
EDIT: I remember a situation where i had to remove a leftover span. Here is my code for this:
// remove leftover span
$('div .mceEditor').each(function(item){
if (typeof $(this).attr('style') !== "undefined" ){
$(this).removeAttr('style'); // entfernt "style: none";
}
else {
$(this).remove();
}
});

Categories