How to load a view when a button is pressed? - javascript

I have a list of buttons in my <div>, when the user click on a specific div, I want display a view of my controller, for example:
<div class="row">
<div id="booking" class="command-buttons tile col-xs-12 btn">
<h3 class="title">Book appointment</h3>
</div>
</div>
I want load the appointment booking page when my user click on booking div. For load a view I use this code:
$this->load->view('appointments/book', $view);
but how I can do this using js? Usually a call a function that contains the view load, but in this case I'm on js side.

probably something like that:
$('div#booking').on('click', function() {
$(this).load( "view.html");
});
you can find some details here http://api.jquery.com/load/

I'm not entirely sure, but I think
echo $this->load->view('appointments/book', $view, true);
will return the html to your ajax success function and you can then easily inject it in the page.

Related

Display alert message after page reload

I have to call $route.reload(); in controller 2 addData API call so that I can get the added data in my UI. But then the text 'Data added successfully' goes away due to page refresh.
controller 1:
$rootScope.$on('reloaded', function(event, data) {
$scope.$parent.alerts.length=0;
$scope.$parent.alerts.push({type: 'success',msg: 'Data added successfully'});
});
controller 2:
$scope.add = function() {
someAPIService.addData(JSON.stringify($scope.rows)).success(function(response) {
ngDialog.close('ngdialog1');
$route.reload();
$rootScope.$emit('reloaded', "true");
});
}
HTML Part:
<section>
<div ng-controller="controller3">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<div class="row form-inline" ng-controller="controller2 as vm">
<!-- Table data with text fields-->
</div>
<script type="text/ng-template" id="addDataDialog">
<div id="frm" ng-controller="controller1" class="col-xm-6">
<div class="form-group">
<!-- Labels with text fields-->
</div>
<button class="ngdialog-button" ng-click="add()">Save</button>
</div>
</script>
</section>
NOTE: Both controllers are in the same JS file and they are used for the same HTML file.
As you want to only load the latest record list which is on server side. Then there is not need to use $route.reload(); after making post call. You need to only make ajax call to get the latest records list that will solve your problem. For making ajax you need to refer $http
$route.reload() is getting used only when you need to load
controller again with specified template in your $routeProvider when
condition
just a simple hint of an answer:
add a (specific) cookie (with javascript) before calling reload (use e.g Cookies lib),
read it on reload,
and then delete it
Also you may use local storage if it is available instead of a cookie using same steps:
add a specific entry in local storage, before calling reload
read it on reload
and then delete it
Another option to maintain state client-side is to use url parameters but these will not do for page reload

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

button in jquery mobile doesnt work as expected

I have a jquery mobile webpage. The page consists of a listView which is dynamically generated with jquery. In the end of this list i want to have a simple button , that when i hit it i simply alert something.
My HTML code looks like this :
<div data-role="page" id="Home">
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
</ul>
<form>
<button id="loadMoreAlbums">More Albums...</button>
</form>
</div>
</div>
The button as you see is hard coded under the dynamically generated listView. The jquery for the button is as simple as that :
$("#loadMoreAlbums").click(function(){
alert("yeah i am loaging more!");
});
I have 2 questions now:
1) When i load this page , the button is first loaded and i can see it for 2-3 seconds till the list is loaded and it goes in the end of the list. I dont really like that behavior , i would like that the button is "created" after the listView is already created, so that i dont see it like that in the page. However this is not a really problem , just for cosmetic reasons.
2) The real problem is that when i hit the button , instead of just alerting the simple text and nothing more , it "loads" the page again , and makes the listView vanish and only the button stay on screen. Why is it behaving like that though? Why is it trying to "load" the page again? I just want it to alert something , or do whatever my jquery tells it to do.
Change your HTML from
<button>...</button>
to
<button type="button">...</button>
By default, a <button> element has type="submit" and will submit the form when clicked.
http://www.w3.org/TR/html5/forms.html#the-button-element
$("#loadMoreAlbums").button().click(function(e){
e.preventDefault();
alert("yeah i am loaging more!");
});
The button is acting as a submit. By adding e.preventDefault(); you can supress the submit action.

Display different data on click of each tab using struts 1,js, ajax

introduction : I am developing Newsetter in struts1, tiles .For front-end i use js and ajax.
I have 8 tabs on the top of page. I want to show different data on click of each tab. As tab (Button) is clicked, a JS function is called which use AJAX call to call action class which set properties of form (respective to that action.) and then I forward to my left.jsp (left.jsp is one file in my layout, used in tiles ).
My left.jsp looks like:
<div id="left1">
<form name="Project" method="post" >
<bean:write name="Project" property="name" />
</form>
<form name="KnowAMSS" method="post" >
<bean:write name="KnowAMSS" property="namexyz" />
</form>
</div>
** Project and KnowAMSS are two tabs among 8 tabs.
Problem : When I click on another tab same process goes on and displays data to respective tab.. But it also displays the data of previously clicked tab. I don't want those .I want data for only that tab which I have pressed recently .
Please help me out in this .
Thanks .
There are different way to accomplish your task...
I recommend you to use an external library like jquery-ui
Here the example:
http://jqueryui.com/demos/tabs/default.html
The source code is very simple just:
Javascript:
$(function() {
$( "#tabs" ).tabs();
});
HTML:
<div id='tabs'>
// your HTML code
</div>

Hide, load, and show div with javascript

I have a few pages from each other to interact with page with id load, as below:
inside process.html
<div id="guest_details"> </div>
<div id="first_start"> </div>
<script>
<! -
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
->
</Script>
inside guest_details.html
<form action="guest_details.php" <form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>
That I want is when the submit button is clicked then:
data sent to guest_details.php
If the data has been sent then hide < div id="guest_details"> < /div>
showing the show < div id="first_start"> < /div>
but when I make it like the above, that not work, Could someone give a clue how to correct?
Thanks a lot
Looking at your previous question and your tags, I assume you are not much aware of AJAX.
You need to
1.post the form asynchronously (without reloading the page, using AJAX).
2. On successfully sending the data, do the dom manipulations.
I suggest using jquery for doing an AJAX post.
Here is a sample code, using jquery:-
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
function ajaxPostForm()
{
$.post('guest_details.php',
function(data) {
//Dom manipulation
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
});
}
And your form html inside guest_details.html needs to be like:-
<form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="ajaxPostForm();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>
The $.post given above is a very basic AJAX post. You may add further features as give in Jquery Post.
Also if you want to post the entire form, you can refer jQuery Form Plugin
Updates
I think I understood your problem better this time. Inside your update where you say this-
by default guest_details.html is
showing and first_start.html is hiding
referring to the sections as guest_details and first_start would make more sense because guest_details.html may mean the page guest_details.html which you might have opened in another window.
Anyway, I am sure you mean the sections inside the page process.html as you have used jquery .load(). Let's call the first_start.html and guest_details.html as sections first_start and guest_details respectively.
As per your updates do you mean the following:-
Initial state
Section guest_details is shown and first_start is hidden
Cases/Situations
When form inside guest_details section is submitted, then hide the section guest_details and show first_start section.
At this state when guest_details is hidden and first_start is shown, the button on first_start can be clicked and on doing so the guest_details section shows again.
During these states where one section is hidden and another is shown reloading/refreshing the page should preserve the states.
If above is the complete scenario, here is the code:-
<script>
<! -
initiateSections(<?php echo $this->session->data['display_state']; ?>);
//state can have "display_first_start" or "display_guest_details"
function initiateSections(state)
{
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
if(state == "display_first_start")
{
displayFirstStart();
}
else
{//If chosen or by default
displayGuestDetails();
}
}
function ajaxPostGuestDetails()
{
$.post('guest_details.php', //In this post request - set $this->session->data['display_state'] = 'display_first_start'; in php
function(data)
{
//Dom manipulation
displayFirstStart();
});
}
function ajaxPostFirstStart()
{
$.post('first_start.php', //In this post request - set $this->session->data['display_state'] = 'display_guest_details';
function(data)
{
//Dom manipulation
displayGuestDetails();
});
}
function displayGuestDetails()
{
$('#first_start').hide('slow');
$('#guest_details').slideUp('slow');
}
function displayFirstStart()
{
$('#guest_details').hide('slow');
$('#first_start').slideUp('slow');
}
->
</Script>
You need to implement ajax to post the data to php
http://api.jquery.com/jQuery.ajax/
use ajax success to do your post success activities.
Once ajax is successful do the HTML manipulations
success: function(data) {
}

Categories