We Keep Coding

Display whatever content this page have to another page using Ajax/Jquery

Whats wrong with this code?
Index.cshtml -- has
$(document).ready(function() {
$("#main").load('CallScreen.cshtml #content');
});
<div id="main">
Content Will be here.
</div>
CallScreen.cshtml -- has
<div id="content">
</div>
What I would like to do here is display my content on <div id=main"> and then display it inside <div id="content"> from another page CallScreen.cshtml. Am I missing something here?

For one - I assume you know this but the javascript needs to go into a
<script>
$(document).ready(function() {
$("#main").load('CallScreen.cshtml #content');
});
</script>
tag
Also - make sure you remove the extra space so that 'CallScreen.cshtml #content' is 'CallScreen.cshtml#content'
Your code will inject #content into #main.

HTML element missing after some time of using page without refresh

I am making an application in Grails(in this app I am using AJAX and jQuery) in which I want to put spinner above all page when I change user.
However, it is working perfectly for some time(aprx. 10 minutes) and after some time of using this page without refresh spinner is not appearing anymore. Reason is that HTML element containing spinner is missing.
Can someone give me a clue why is this happening?
Here is shorter version of code:
MAIN PAGE(HTML):
<div class="container">
<div id="changeUserDiv">
<g:render template="/changeUser"/>
</div>
<div>
<div id="errorContainer"></div>
<g:render template="myTemplate"/>
</div>
<div id="loadingAllPage" class="modal-background" style="display:none;">
<i class="fa fa-5x fa-spinner fa-spin"></i>
</div>
</div>
MAIN PAGE(JS):
$("#changeUserDiv").change(function(){
$("#loadingAllPage").show();
ajaxAction();
});
myTemplate(JS):
function ajaxAction()
{
// some code
$.ajax({
// some code
success:function(data){
$("#loadingAllPage").hide();
});
}

First of all, this is not the correct way to show a loader.
You should check some other way to clear this out.
For this,
the issue may be due to the content is changing after some time
Other ajax call from another page with a time intervals
The content of the div updated in some other way

Refreshing a Specific Section of a Page

I currently have a modal that deletes an item from my list of data. After selecting delete, I want to refresh the web page. At this point, it is refreshing the entire page and re-directing me to the Searches tab. I want to refresh just the Lists tab. How can I do this?
My HTML:
<div class="row zero-margin">
<div class="col-xs-12">
<div id="tabstrip">
<ul id="tab-strip-options">
<li id="listItem1" class="k-state-active">
Searches
</li>
<li id="listItem2">
Lists
</li>
</ul>
<div class="saved-search-content">
<div id="gridSearch"></div>
</div>
<div class="saved-list-content">
<div id="gridList"></div>
</div>
</div>
</div>
</div>
My JavaScript Function:
function deleteItemsFromList(data) {
if(data.IsSuccess) {
window.location.reload();
CloseModal("deleteSearchListModal");
showSuccessMessage('List was successfully deleted!');
}
}

Solution for server side data store:
The easiest solution for partial update on your web page is to use AJAX requests. You must load list content from web source, when you update it.
$( "#gridList" ).load( "ajax/getListContent" );
Of course your ajax/getListContent must generate proper HTML substructure (without html, body tags) like:
<div>...</div>
Generally create a data source on address ajax/getListContent which return you your data structured in HTML, then in your code you can do like this:
function deleteItemsFromList(data) {
if(data.IsSuccess) {
$( "#gridList" ).load( "ajax/getListContent", function() {
CloseModal("deleteSearchListModal");
showSuccessMessage('List was successfully deleted!');
}
}
}

I completely ignore if you are using some kind of plugin, but if you want to refresh just part of the whole HTML document, you have to use AJAX and remove the window.location.reload() from your script. Something like this:
function deleteItemsFromList(data) {
if(data.IsSuccess) {
$.ajax(/*params here*/).done(function(data){
//refresh just the #gridList part
CloseModal("deleteSearchListModal");
showSuccessMessage('List was successfully deleted!');
}
}
}
Maybe this is not the correct order, but the important thing is AJAX :)

AddThis in AJAX

I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>

Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');

var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.

method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.

You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>

Javascript dynamically change another page, is what I'm trying to do possible?

I was wondering if it was possible to change another page that's not opened yet, when a user clicks a link from the first page. It's hard to explain, but I'll try to show you what I mean with an example below.
The html is more complex for the actual site, but here is a watered-down version:
Index:
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<div id="container">
<div class="img">
<a href="PRODUCTPAGE.html">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a href="PRODUCTPAGE.html">
<img src="product2.jpg"/></a>
</div>
</body>
Product Page:
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<div id="container">
<div id = "product1">
all of product 1 info and pictures
</div>
<div id = "product2">
all of product 2 info and pictures
</div>
So basically, is it possible just using javascript, no php or anything, when product1 image is clicked to only show the product1 info on the product page and when product2 is clicked only show the info for product 2 on the page. I've been trying to find something similar but as of yet haven't, which leads me to believe I may not be able to do it, but I thought I would ask.
My javascript document doesn't have much in it, because I haven't been able to figure it out, but I have been playing around trying to make their display = none. I haven't been able to get a variable to continue onto the next page, if you know what I mean. Sorry, I only have a basic understanding of Javascript.

The technique that you're looking for is a combination of DHTML (Dynamic HTML) and AJAX (Asynchronous JavaScript and XML).
DHTML:
The idea behind DHTML is that when the user requests an HTML page from the server, the server responds with that page, as well as other data that may be needed if a user were to perform certain actions, such as clicking on a product image.
The data that the server returns to the HTML page, upon initial pageload, is generally hidden by default. For instance, the DOM of the page is loaded, but it may have style="display:none" on the elements.
Once a user initiates a certain action, the page uses JavaScript to manipulate the elements on the page that are visible, as well as the ones that may be hidden.
Consider the following page:
<body>
<div id="page1">
<div id="container">
<div class="img">
<a id="product1" onclick="showProduct1();" href="#">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a id="product2" onclick="showProduct2();" href="#">
<img src="product.jpg"/> </a>
</div>
</div>
</div>
<div id="page2" style="display:none">
<div id="product_page_wrapper">
back to Product Categories
<div id="productDetails">
<div id="prod1">
...
...
</div>
<div id="prod2">
...
...
</div>
</div
</div>
</div>
</body>
The above page is split up into two sections, one with the id="page1" and the other id="page2". By default, we hide page 2.
When a user clicks on the link for a product, we hide page 1 and show page 2:
document.getElementById("page1").setAttribute("style","display:none");
document.getElementById("page2").setAttribute("style","display:block");
Additionally, depending on which link was clicked, we also unhide the product details for the product that was clicked, and hide the details for the product that wasn't. For example, if product 1 is clicked, we show product 1:
document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");
The end result is that only the page2 div is displayed. If the user clicks the "back to Product Categories" link, we reverse the process, hiding page2 and showing page1.
In summary, this type of manipulation can be done completely on the client-side, without any PHP or server-side code, simply using HTML, JavaScript, and CSS, as pointed out by #Marcel. However, the use of pure DHTML is more of an academic exercise than a practical solution, since the server-side maintains customer data, product data, and everything that would be required in a professional, revenue generating product.
AJAX:
AJAX, on the other hand, is quite similar to DHTML and may even be considered an extension of DHTML. The idea behind AJAX is that -- when the user initiates an action -- the page requests data from the server. When the server responds, the data is handed-off to a callback function that then manipulates the page using the data.
In your particular example, you might use a combination of both DHTML and AJAX to pull off the desired effects. Consider the following page, which uses AJAX to pull in the relevant HTML for the product the user selects:
<head>
<script type="text/javascript" src="external.js"></script>
<script>
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = displayContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function displayContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
//alert(httpRequest.responseText);
document.getElementById("container").innerHTML = httpRequest.responseText;
} else {
alert('There was a problem with the request.');
}
}
</script>
</head>
<body>
<div id="container">
<div class="img">
<a id="product1" onclick="makeRequest('/getproduct?id=1')" href="#">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a id="product2" href="#" onclick="makeRequest('/getproduct?id=2')">
<img src="product2.jpg"/></a>
</div>
</div>
</body>
In the above example, when the user clicks on a link for a product, the server responds with just enough HTML to sufficiently replace the div#container portion of the page:
<span id="product">
<p>Product Name 1</p>
<p>Product details...</p>
</span>
This is injected into the page so that the DOM would then look like this:
<body>
<div id="container">
<span id="product">
<p>Product Name 1</p>
<p>Product details...</p>
</span>
</div>
</body>
Summary:
This question is tagged JavaScript, not jQuery, so the answers are focused on JavaScript, but the techniques described in the DHTML section are utilized in many JavaScript libraries. For example, see jQuery Mobile's Multi-Page Template for a demo of the technique you describe.

You could change the link to add parameter. This way PRODUCTPAGE.html knows which link you clicked.
<img src="product1.jpg"/>
<img src="product2.jpg"/>
Inside PRODUCTPAGE.html you could parse the URL using JavaScript and display only specific product's data.

Yes you can hide and show different parts of the DOM via javascript.
Check out this example of a toggle for an idea of what you need to do.