I have created a Admin Panel in the header part with bootstrap , when i click on any nav bar option (ul->li->a) the whole page jerk and reload i want to load it smoothly with the hllp of ajax i.e, without page refresh.
How can i acheive that i have tried various material supplied in the net but it wont help.
I have limited knowledge in ajax.
Please help
Usually I think you've used jQuery. It's would be simplest. https://jquery.com
You'll need to have a back-end that should returns only part of your page (that needs to be loaded). Or use (not recommended) $.load
http://api.jquery.com/load/
If you have the back-end that returns part of your page:
var $container = $('#container'); // It's a block that will be used for content displaying
// Renderring content
function renderPage(response) {
// Wrapped content hidden by default
var $content = $('<div style="display: none">' + response + '</div>');
// Then clear current content
$container.find('*').remove();
// Then append our response and fade it to display
$content.appendTo($container).stop(true, true).fadeIn(300);
}
// Loading page
function loadPage(url, params) {
$.get(url, (params||{}), renderPage);
}
// Adding handler
function go(e) {
loadPage($(e).attr('href'));
return false;
}
And then in your items:
<ul>
<li>Page</li>
</ul>
Related
I have a table created with GravityView and I want to implement the single entry link with Ajax so that the page does not refresh and the URL does not change.
Is such a thing possible?
enter image description here
You can load the single entry page with jQuery .load method.
You would need to pass the URL of the page, in this case I am trying to get the content on another page whose URL is in the anchor link of the table, in your case its link field.
So i give the .load method URL + the id of the accordion in which the content i need to display exists, and a call back function.
Here how I did it.
jQuery( document ).ready(function($) {
// select the div where you want to display content
var $loadedContent = $('#fl-accordion-5c450fd66133e-panel-0');
// register an event, get the click event of the link
$(document).on('click','.gv-field-3-date_created a', function(event) {
//stop the link form opening
event.preventDefault();
//get URL from the href attribute of the anchor link
var $url = $(this).attr("href");
// send the request and get the response, In my case I am trying to show the content inside a accordian, so i have taken its ID and added that with URL
$loadedContent.load($url+' #fl-accordion-5c450fd66133e-panel-0', completeFunction);
return false;
});
function completeFunction(responseText, textStatus, request) {
if(textStatus == 'error') {
// show a relevant message
$loadedContent.text('An error occurred during your request: ' + request.status + ' ' + request.statusText);
}
}
});
Just add your classes, and it will get the Job Done.
Thanks for using GravityView! Zack here, founder.
We’re going to be adding this functionality later this year. If you wait a few months, it’ll be ready!
I have a page that i want to remain static with two divs that i want to load different html views during user navigation. I want the content to change without refreshing the entire page, only refreshing those two divs.
How can i load a specific view into those divs?
I already have the menu navigation that determines the html views to be loaded into those divs and controller functions to the menu choices that i get using javascript and then use it in the controller of the main page, i just dont know how to load the content.
You can load the views using a bit of Javascript with AJAX.
With jQuery:
$('a.nav-button').click(function(e) {
// prevent the default action when a nav button link is clicked
e.preventDefault();
// ajax query to retrieve the HTML view without refreshing the page.
$.ajax({
type: 'get',
url: '/path/to/your/controller/method',
dataType: 'html',
success: function (html) {
// success callback -- replace the div's innerHTML with
// the response from the server.
$('#yourDiv').html(html);
}
});
});
I think you need to use a jquery and Codeigniter
This will be your jQuery Code
$('nav').click(function(){//element to be click to load the page in the div
$(your_div_element).load('controller/method');
});
This will be your Codeigniter
function method(){
$data['result'] = ''//you can use this if you need to pass some data to the view
print $this->load->view('your_view',$data,true);//This will load your view page to the div element
}
Goodluck!
In order to put content without refreshing you should use ajax, lets say you have divs in a file under a directory (webparts), and you want to add it's content to a div called my_div; first create a method on the controller that renders just the view (div) you want to put something like this
function part($part = false)
{
$data = array(); // you can add data to your div, if you need to.
$this->load->view("webparts/$part", $data);
}
Then with javascript (jQuery in this case) you can call
$('#my_div').load('controller/mypart');
Note: I like to use "load" because it allows me to select certain sections of the view Im requesting, using something like this
$('#my_div').load('controller/mypart #certainsection');
Will load the element with the id="certainsection" from mypart view
Here is the problem:
By default jQuery Mobile is using GET requests for all links in the application, so I got this small script to remove it from each link.
$('a').each(function () {
$(this).attr("data-ajax", "false");
});
But I have a pager in which I actually want to use AJAX. The pager link uses HttpPost request for a controller action. So I commented the above jQuery code so that I can actually use AJAX.
The problem is that when I click on the link there are two requests sent out, one is HttpGet - which is the jQuery Mobile AJAX default (which I don't want), and the second one is the HttpPost that I actually want to work. When I have the above jQuery code working, AJAX is turned off completely and it just goes to the URL and reloads the window.
I am using asp.net MVC 3. Thank you
Instead of disabling AJAX-linking, you can hijack clicks on the links and decide whether or not to use $.post():
$(document).delegate('a', 'click', function (event) {
//prevent the default click behavior from occuring
event.preventDefault();
//cache this link and it's href attribute
var $this = $(this),
href = $this.attr('href');
//check to see if this link has the `ajax-post` class
if ($this.hasClass('ajax-post')) {
//split the href attribute by the question mark to get just the query string, then iterate over all the key => value pairs and add them to an object to be added to the `$.post` request
var data = {};
if (href.indexOf('?') > -1) {
var tmp = href.split('?')[1].split('&'),
itmp = [];
for (var i = 0, len = tmp.length; i < len; i++) {
itmp = tmp[i].split('=');
data.[itmp[0]] = itmp[1];
}
}
//send POST request and show loading message
$.mobile.showPageLoadingMsg();
$.post(href, data, function (serverResponse) {
//append the server response to the `body` element (assuming your server-side script is outputting the proper HTML to append to the `body` element)
$('body').append(serverResponse);
//now change to the newly added page and remove the loading message
$.mobile.changePage($('#page-id'));
$.mobile.hidePageLoadingMsg();
});
} else {
$.mobile.changePage(href);
}
});
The above code expects you to add the ajax-post class to any link you want to use the $.post() method.
On a general note, event.preventDefault() is useful to stop any other handling of an event so you can do what you want with the event. If you use event.preventDefault() you must declare event as an argument for the function it's in.
Also .each() isn't necessary in your code:
$('a').attr("data-ajax", "false");
will work just fine.
You can also turn off AJAX-linking globally by binding to the mobileinit event like this:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Source: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html
I designed a ASP.NET page named kk-container.aspx to be used as a control which will be loaded in Default.aspx with jQuery load function. The page kk-container.aspx has many HTML controls and javascript events bound as in the example.
<!--Sample code from kk-container.aspx-->
<div id="kk-container">
Action
<!--Many HTML controls here-->
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#kk-action").click(function () {
return false;
});
});
//Many javascript here.
</script>
I load this kk-container.aspx into Default.aspx with such code in the Default.aspx.
<div id="mycontainer"></div>
<script type="text/javascript">
$("#mycontainer").load("kk-container.aspx");
</script>
Everything works fine up to here. However, I have to load this kk-container.aspx in a few more divs in the Default.aspx. This causes conflict in the id's of HTML controls. $("#kk-action").click() doesn't work for all. How can I solve this problem and load kk-container.aspx multiple times in one Default.aspx page.
More to say: I considered giving random id's for HTML controls for each load of kk-container.aspx. However I had already designed my stylesheet mostly with id selector. And I use a packet javascript, valums uploader, working in kk-container.aspx. It will also require edit. If there is a simpler way, I don't want to code all over.
I expected too much from jQuery and asked this question desperately. I should have decided first whether I will use "kk-container" thing once or multiple times in a page. For loading "kk-container" thing multiple times, I had to consider these:
Designing CSS using class selectors instead of id selectors.
Producing random id for my HTML elements like in this question.
Writing my javascript functions so that they work compatible with those random id's.
Therefore loadind "kk-container.aspx" in a page with jQuery load wouldn't cause any id conflicts.
Anyway, I did a mistake and didn't want to rewrite my code. I found a solution to load content of "kk-container.aspx" in my Default.aspx page without a problem. Instead of jQuery load function I used iframes.
Since there is already an item with id "kk-action",
Action (like this one)
loading a content having an item with id "kk-action" will cause trouble.
$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.
Instead create an iframe without border and load that content into iframe.
function btnEdit_Click(recordID) {
$('#mycontainer').html("");
var kayitKutusuFrame = document.createElement("iframe");
kk-Frame.setAttribute("id", "kk-iframe");
kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
kk-Frame.setAttribute("frameBorder", "0");
kk-Frame.setAttribute("hspace", "0");
kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
document.getElementById("Mycontainer").appendChild(kk-Frame);
if (isIE = /*#cc_on!#*/false) { //For IE
setTimeout(function () { heightAdapter() }, 500);
}
}
I didn't gave random id to "kk-iframe" because I will not use it mulitple times. It now resides in FaceBox. To make the iframe flawless, it needs to be auto-resized. My heightAdapter() function will do it. Not only when a content is loaded into iframe but also content changes dynamically because of my clicks.
Here is the actual code for resizing iframe to fit content by Guy Malachi.
function calcHeight(content) {
//find the height of the internal page
var the_height = content.scrollHeight;
//change the height of the iframe
document.getElementById("kk-iframe").height = the_height;
}
Here is my heightAdapter() function which will work both when content is loaded and when I clicked something causing content to expand.
function boyutAyarlayici() {
var content=document.getElementById("kk-Frame").contentWindow.document.body;
calcHeight(content);
if (content.addEventListener) { //Forn non-IE
content.addEventListener('click', function () {
calcHeight(content);
}, false);
}
else if (content.attachEvent) { //For IE
content.attachEvent('onclick', function () {
calcHeight(content);
});
}
}
And the following is a link in a repeater. Since the link will be replicated, it should have unique id by asp server.
<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>
Now, whenever I click one of the replica links, the content having an item with id "kk-action" can be loaded into the my flawless iframe which will be created in "mycontainer".
<div id="mycontainer" class="kk-iframe" style="display:none"></div>
And the content will be shown in my fancy FaceBox.
You're going to have to use classes to style the elements. There can only be one unique ID per page, so you are going to have to generate different IDs or use class selectors in your JavaScript such as:
$('.kk-action').click()
The above is probably the best way to go as it will give every element with that class the binding
So i I have a page that contains links that call an httpRequest. The request calls a php file that grabs data from mysql and pre populates a form which is then returned to the browser/webpage. My problem is that when the page is returned to the browser via the httpRequest/ajax the text area does not display the tinymce editor, it just displays a normal text area. It looks like my request and ajax is working fine the text area just doesn't have the tinycme editor on it.
When i don't use ajax it works fine but when i put it in a separate file and call it via ajax it doesn't bring in the tinymce editor.
Does anyone know how to fix this problem so that my ajax generated page displays the text area with the tinymce editor. Thank you.
Lets presume that your thinyMCE instance is initialized with code below
// initialize tinyMCE in page
tinyMCE.init({
mode: "textareas",
theme: "advanced"
});
and you have some kind of button somewhere in the page. For purpose of this tip, i will not give it any ID but you may. Now, using jQuery you can easily attach event handler to that button which will call through AJAX your server and take content which you want to put tinyMCE editor. Code which will do such job would look somehow like below.
$(function() {
$("button").bind("click", function() {
var ed = tinyMCE.get('content');
ed.setProgressState(1); // Show progress
$.getJSON('/page/12.json', { /* your data */
}, function(data) {
ed.setProgressState(0); // Hide progress
ed.setContent(data["body"]);
}
});
});
});
You can see that on button.click ajax will call url /page/12.json which will return JSON as response. bare minimum of that response could be:
{
title: "Page title",
body: "<html><head><title>Page title</title>......</html>"
}
I attached anonymous function as callback which will handle response from server. and hide progress indicator which is shown before ajax call.
About JSON
JSON is shorten of JavaScript Object Notation. It is JavaScript code!!! So don't be confused about it. Using JSON you can make javascript object which can have attributes you can use later in your code to access particular peace of data which that object "holds". You can look at it as some kind of data structure if it is easier to you.
Anyway, to show you how this JSON can be created by hand look at examples below
var data = new Object();
data.title = "Page title";
data.body = "<html....";
or
var data = {
title: "page title",
body: "<html...."
};
it is very same thing.
If you want to learn more about JSON point your browser to http://json.org.
===== alternative =====
Alternative to json solution could be just plane ajax call to server and response can be plain HTML (from your question I can assume that you have something like this already). So instad of calling $.getJSON you can use $.get(url, callback); to do same thing. The code at the top of my answer will not dramatically change. Instead of geting JSON in response you will get string which is HTML.
----------- BOTTOM LINE -------
I prefer JSON since it can be easily extended later with other attributes, so there is no painful code changes later ;)
Problem here will be that when you return the full page and render it using the ajax response, your tinymce instance has not been shut down before.
In order to do this you can call this small piece of code before you render the ajax response:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
In this case the editor should initialize correctly. You are not allowed to initialize a tinymce editor with the same id before shutting the first one down.
Strangely i ran into this problem yesterday. Following code should work, but YMMV. Trick is to use the correct steps in ajax events. I used the Regular TinyMCE and made use of the jQuery library already included.
Following goes into your tinyMCE initialization tinyMCE.init() . All of the below block should be outside the document.ready.
myTinyInit = {
//.......All essential keys/values ...........
setup : function(ed) {
ed.onChange.add(function( ed ) {
tinyMCE.triggerSave();
}) }
//.....................
};
// Init the tinyMCE
tinyMCE.init(myTinyInit);
This ensures the content is being saved regularly onto the textarea that holds the value. Next step is setting up the request events.
Normally tinyMCE mceAddControl before the ajax post and mceRemoveControl after the ajax success should do the trick. But I found that often does not work.
I used the form as the jQuery selector in my case.
jQuery( '.myForm' )
.find( 'textarea#myTextArea' )
.ajaxStart(function() {
// If you need to copy over the values, you can do it here.
// If you are using jQuery form plugin you can bind to form-pre-serialize event instead.
// jQuery( this ).val( tinyMCE.get( jQuery( this ).attr( 'id' )).getContent() );
}).ajaxSend( function() {
// ! - step 2
// My case was multiple editors.
myEds = tinyMCE.editors;
for( edd in myEds ) {
myEds[ eds ].remove();
}
// tinyMCE.get( 'myTextarea' ).remove();
// strangely mceRemoveControl didnt work for me.
// tinyMCE.execCommand( 'mceRemoveControl', false, jQuery( this ).attr('id'));
}).ajaxSuccess(function() {
// Now we got the form again, Let's put up tinyMCE again.
txtID = jQuery( this ).attr( 'id' );
// ! - step 3
tinyMCE.execCommand( 'mceAddControl', false, txtID );
// Restore the contents into TinyMCE.
tinyMCE.get( txtID ).setContent( jQuery( this ).val());
});
Problems i came across :
Using mceRemoveControl always gave me r is undefined error persistently.
If you get a blank tinyMCE editor, check the DOM whether the ID of the textarea is replaced with something like mce_02, this means that TinyMCE is being initialized again or something is wrong with the order. If so, the tinyMCE is duplicated with each save.
if you are new to JS, I recommend using jQuery with the form plugin, it might be easier for you. But do use the regular non-jquery tinyMCE, as it is well documented.
I fixed this problem by recalling the function after the ajax call. In this part of my ajax:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Content").innerHTML=xmlhttp.responseText;
tinymce();
Now it works fine.