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 :)
Related
Note: I am new to jQuery and tabs.
I am attempting to implement nested tabs with jQuery tabs in an MVC 5 web application. For some reason, the implementation is not working correctly and I assume there is a bug based on the behavior on the website and I suspect it is with how the active tab is being set.
When the user logs in, they are taken to a page for MainAppTabs. The two top tabs are Client and Account. The Client tab has nested tabs Client Info, Billing Selections, and About whereas the Account tab currently has only one nested tab called Account, which should only display a list of accounts.
With the current implementation below, the Account tab is the first tab to be displayed, as opposed to the Client tab, along with the nested Account tab. When I click on the Client tab then it will display fine with its nested tabs. However, when I click on the Account tab again then the page clears out and I must refresh the page (F5) in order to get the Account tab and its nested tabs to display. Also, the nested tab appears to be displayed twice where it is offset to the right and has a duplicate border, but the nested tab border and data spill outside of the parent tab border.
<div id="MainAppTabs">
<ul>
<li>#Html.ActionLink("Client", "ClientTabs", "ClientSetup")</li>
<li>#Html.ActionLink("Account", "AccountTabs", "AccountSetup")</li>
</ul>
</div>
<script>
$(function () {
$("#MainAppTabs").tabs({ active: 1 });
});
</script>
ClientTabs:
<div id="ClientSetupTabs">
<ul>
<li>#Html.ActionLink("Client Info", "Edit", "ClientSetup")</li>
<li>#Html.ActionLink("Billing Selections", "BillingSelections", "ClientSetup")</li>
</ul>
</div>
<script>
$(function ()
{
$("#ClientSetupTabs").tabs({ active: 1 });
});
</script>
AccountTabs:
<div id="AccountSetupTabs">
<ul>
<li class="active">#Html.ActionLink("Accounts", "Index", "AccountSetup")</li>
</ul>
</div>
<script>
$(function ()
{
$("#AccountSetupTabs").tabs({ active: 1 });
});
</script>
This appears to be an issue with nested tabs, possibly because of the way the ajax calls are made and the scripts within your partials (scripts should not be in partials). To make this work, you can provide placeholder elements for the content of each tab and have the links reference those elements using id attributes.
The html would be
<div id="main"> // main (parent) tabs
<ul>
<li>Client</li>
<li>Account</li>
</ul>
<div id="client"> // client tabs
<ul>
<li>Client Info</li>
<li>Billing Selections</li>
</ul>
<div id="client-info">
// content for client information
</div>
<div id="billing-selections">
// content for billing selections
</div>
</div>
<div id="account"> // account tabs
<ul>
<li>Accounts</li>
</ul>
<div id="accounts">
// content for accounts
</div>
</div>
</div>
and to initialize the tabs
$('#main').tabs({ ... }); // set options as required
$('#client').tabs({ ... });
$('#account').tabs({ ... });
To display the content, use #Html.Partial() if the model in the view contains the data need to generate the partial, or #Html.Action() if you want to call a server method that returns the partial. For example, if the Edit() method of ClientSetupController returns the partial view to show in your Client Info tab, then
<div id="client-info">
#{ Html.RenderAction("Edit", "ClientSetup"); } // or #Html.Action("Edit", "ClientSetup")
</div>
Where the controller method is
[ChildActionOnly]
public PartialViewResult Edit
{
var model = ... // initialize you model for the view
return PartialView("_Edit", model);
}
and _Edit.cshtml is a partial view and contains the html you want to display in the tab
I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
home.html
This is home page
about.html
This is about page
contact.html
That one is content page
JAVASCRIPT
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.
Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.
How can I do that?
Thanks...
You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.
You can change DOM anytime you want without loading the page.
Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.
There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.
You have to check/set the value of your variable on the event onload of the page.
Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.
I am trying to on the click of a link display a different page inside a box using jquery (.load). I'm new to programming and web design so please make answers as simple as possible.
Here is my index.html code
<nav id="navBar">
Home
About
Contact
Shop
</nav>
<div id="loadZone"></div>
and my JavaScript
$(document).ready(function(){
$("#loadZone").load("homeLoad.html");
});
function homeLoad() {
$('#loadZone').load('homeLoad.html');
}
function aboutLoad() {
$('#loadZone').load('aboutLoad.html');
}
loading the home page (homeLoad.html) works fine
when I repeatedly spam the link for about you can occasionally see the content of aboutLoad.html
Any help appreciated
Thanks
A simpler method might be to store the urls as data attributes on the links, then when the user clicks a link get the stored url and load it. To load the initial content, trigger a click on it's link on load. Something like this would work:
Here is a working Demo
<nav id="navBar">
Home
About
Contact
Shop
</nav>
<div id="loadZone"></div>
<script>
$(document).ready(function(){
$('.navLink').click(function(e){
e.preventDefault;
$('#loadZone').load($(this).data('url'));
});
$('.navLink:eq(0)').click();
});
</script>
In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance
Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)
You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');
You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}
A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});
I have this page articles
In this page i have nav links on the left, and content loading on the right.
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
my nav looks like this
<ul>
<li><a id="myHeader1" href="javascript:showonlyone('articles');" >ARTICLES</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('whitepapers');" >WHITE PAPERS</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('brochures');" >BROCHURES</a></li>
</ul>
and my content is in div like the following
<div id="articles" name="newboxes" style="display:none;">
<div id="whitepapers" name="newboxes" style="display:none;">
<div id="brochures" name="newboxes" style="display:none;">
Basically this page, is an interior page.
I have a home page, that i would like to have links to each section on, so the section i want shows up already so user doesn't have to click again.
Any idea how i do this?
Thank you for any help, and I apologize if i'm not using correct terminology.
if I well understood your question, on page "articles" just call showonlyone function
$(function() { // DOMready
showonlyone('articles');
});
and repeat this code for every internal page, changing the parameter
going by what i understand from your question is that..
u have links on home page..
when user clicks these links you want that particular section to be already opened when the interior page opens
like when user click "articles" then in the interior page the articles div should be visible
for this you will have to use hash tags in the following manner
on your home page..
provide the links with a hash tag like this
http://agencystudy.com/eic/microsites/microsites-02/articles.html#articles
then in your interior page in document ready event
$(document).ready(function(){
$(window.location.hash).show(200);
});