We are currently having a two page application where the users will enter the data and those is passed to the database and the results are displayed in a grid in the next page
<div class="md-padding col-md-6">
<div class="row form-group">
<button type="button" class="btn btn-success"
href="Views/Angular/results.html"
ng-click="createRequest(homeForm)">
Submit
</button>
</div>
</div>
The results.html has the grid that shows the result. Instead of navigating to the next page how can I shows the result grid on the same page
by using ng-show directive for example.....
result.html
<div ng-show="page.result">
<h1> this is result page </h1>
</div>
user.html
<div ng-show="page.user">
<h1> this is user page </h1>
<div>
by default show user.html when page is loading set page.user = true
set on controller
after submit user data set page.user = false and page.result = true to
show in page
for more detail click here
Why you don't do two components and call them via selector at one page? In the second component you set the content after you clicked the button and will pop up immediately your data
Related
I have a simple cart system which shows all the products in the user's cart. The user can update the quantity of that cart from the cart page.
When a user updates the quantity, an ajax call is made which updates the value in the database and afterwards it reloads the div with so all updates are reflected.
Two issues occur:
1. The div for some reason gets created again in the same div. I don't know why. So in this case #menuContent is created again inside #menuContent such that:
<div class="row" id="menuContent">
<div class="row" id="menuContent">
//php code to display list of items
<div>
</div>
Afterwards, my javascript file stops working. I have a file called site.js which contains all my functions. It executes on page load but does not after the .load()
Here's my code:
<div class="row" id="menuContent">
<?php foreach($cartItems as $item): ?>
<div class="col s12 m12 single-card">
//Item information here and a button to update the cart. On button click, ajax call makes an update and on success it reloads the #mainContent div
</div>
<?php endforeach; ?>
</div>
This is what I'm using to reload the div:
$("#menuContent").load(location.href + " #menuContent");
Details:
<div class="row-fluid">
<div ng-app="sampleAngular">
<div id="panel-1" ng-controller="Controller1">
<!-- some html code here that displays a table of information-->
</div>
<p><button type="button" onclick="onSubmit();" name="subscribe">Subscribe to Panel-2 Info</button> </p>
<div id="panel-2" ng-controller="Controller2">
<!-- some html code here that displays another table of information-->
</div>
</div>
</div>
Question:
The content in div id "panel-2" should be displayed only when the user clicks "Subscribe to Panel-2 Info" button. The button should update a record in DB, and then render the content in div id "panel-2" without refreshing the whole page. How to implement this requirement - any ajax logic in onSubmit() function?
Note: I should not render the whole page and then set visibility: false around "panel-2" as I shouldn't call the controller "ng-controller="Controller2" until the user subscribes (clicks the button).
In your onSubmit() function, make your Ajax call which should return the results that you want in HTML, or as data which you then HTML format it in JavaScript and display it using the innerHTML property. Here is an example (click the button to see how it works):
function onSubmit() {
//make your Ajax call here
//if the Ajax was successful, display the result
document.getElementById("panel-2").innerHTML = "some html code here that displays another table of information (this is the result of the Ajax call)";
//if the Ajax resulted in error, display an error message
//document.getElementById("panel-2").innerHTML = "an error occurred";
}
<div class="row-fluid">
<div ng-app="sampleAngular">
<div id="panel-1" ng-controller="Controller1">
some html code here that displays a table of information
</div>
<p><button type="button" onclick="onSubmit();" name="subscribe">Subscribe to Panel-2 Info</button> </p>
<div id="panel-2" ng-controller="Controller2"></div>
</div>
</div>
In my angular app, I have objects that I'm getting from a REST API that I'm making into columns in a grid, sort of like an image gallery type thing.
Example:
The intent was for the entire grey area to be clickable, which opens a Details View modal. Then when you hit the Delete button, it opens a Delete Item modal. Both modals are opened with angular's ng-click.
However, since they are both in the same container (the grey, clickable one), whenever I click the Delete button, it opens up both modals instead of just the Delete Item one.
Is there any way to fix that, ala forcing the button to be in the 'front', such that clicking it will only open the correct modal?
Thanks!
Edit: The html looks something like this -
<div class="row">
<div ng-repeat="item in items" class="col-lg-3 col-md-6 col-xs-12">
<div class="item-container" ng-click="openDetailModal(item)">
<!--stuff-->
<button class="btn btn-danger pull-right" ng-click="openDeleteItemModal(item) />
</div>
</div>
</div>
I'm trying to load an external view on different container inside different pages. The container is able to load. But the container does not change. Which means, first I click "Button1", the external view will display inside 'container1'. Then I click "Button2", the external view will display. But if I view source, it is inside 'container1'.
Could anyone please suggest me how to change the container dynamically which display the external view?
I'm doing Hybric Mobile application using
dojo 1.9.3
Following is the snippet that I'm trying.
page1.html
<div id="page1_container" data-dojo-type="dojox.mobile.View>
<button id="btn1" onClick="loadExternalView('container1');" value="Button1"><br>
</div>
<div id="container1" data-dojo-type="dojox.mobile.View">
<!-- An external view is loaded here when clicking the button above -->
</div>
page2.html
<div id="page2_container" data-dojo-type="dojox.mobile.View>
<button id="btn2" onClick="loadExternalView('container2');"><br>
</div>
<div id="container2" data-dojo-type="dojox.mobile.View">
<!-- An external view is loaded here when clicking the button above -->
</div>
externalView.html
<div data-dojo-type="dojox.mobile.View" id="vExternalView">
<div id="c" data-dojo-type="dojox.mobile.Container">
<span>I'm from External View</span>
</div>
</div>
javascript
function loadExternalView(container){
var vc = dojox.mobile.ViewController.getInstance();
vc.openExternalView({
url:"externalView.html",
transition:"slide"
},dijit.registry.byId(container).containerNode);
}
vc.openExternalView() will only load the view if it has not already been loaded, since it was loaded on the first click of "Button1", it will not be reloaded inside container2 when you click "Button 2", which by the way is a good thing, because if it did you would have an error due to duplicate id's.
I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>
It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...
There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.
The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>