I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background..pls can any tell me proper suggestions.
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
try using windows.open() function.
for Example
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "https://www.linkedin.com/cws/share?mini=true&url=" + location.href;
var win = window.open(URL, "_blank", strWindowFeatures);
Related
I have a collapsible sidebar navigation, and any time users click a link on it, I have the sidebar hide automatically. I achieve this in the run method by using the following code:
app.run(function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$rootScope.closeNavigation();
})
});
Where app is my Angularjs module.
The problem is that it gets a little unintuitive to use, when you click a link in the navigation for the page you're already on, and then nothing happens. What I would like is to have the sidebar close anyway, so that the users still get focus on the content, even if it's the same content.
But Angularjs doesn't execute the $routeChangeSucess event, if there is no route change happening. So what can I use instead?
You simply need to use ng-show = isPanelVisible and ng-click = closePanel() on the html sidepanel tag (e.g. a <div>).
Then, define $scope.closePanel() in the controller associated to the actual view. For instance
$scope.closePanel = function() {
$scope.isPanelVisible = false;
}
See an example here. Code is here. Note that it doesn't use ng-show, but the behaviour is the same.
cutting right to the chase here heh
Building an admin backend system with angular for a client. This site and backend are built with Node and Angular. I've got a post editor setup, so that when you click a link to edit a post, locationProvider and ngRoute go to work and swap out the partial with a new controller, and updates the url.
Here at this point, everything shows up perfectly.
It's when I click on Cancel (which is a standard link going back to the post list view) or submit (which works it's magic and then redirects to the same url as cancel) and this works.
It's when I click on the link to edit the same post again. The content that's supposed to be in the CKEditor is blank. However when using Chrome Dev Tools I can see that tw original input field has the content in it correctly, but the iframe has nothing in it at all but the CKEditor Chrome.
As for code,
In my controller it looks like this:
$scope.post = null;
$http.get('/api/post/'+$routeParams.id)
.success(function(data,status,headers){
$scope.post = data;
});
$(function() {
CKEDITOR.replace("content");
});
$scope.submit = function() {
// submission code here
};
Pretty basic here, just want to get the basics out of the way first.
Is the problem with how I'm loading CKEditor?
CKEDITOR.replace("content") would replace the html element with CKEditor instance. Assuming "content" is some div id or text area in your html.
To set the content you need to use
CKEDITOR.instances["content"].setData("Contents to be displayed in text area");
I am using angularjs framework. I have ng-grid having a column containing link text. On that link click, I want to navigate to different page within the same application. I wanted to pass some parameters to another page, so I used ng-click and then method name. So, my code is like this:
<div class="ngCellText"><a data-ng-click="methodName(parameters)"> Go to Page2 </a>
Inside method:
document.location.href = '/Home/page2/
I used target=_blank but it did not work. Any suggestions ?
Thanks.
You need to use window.open method
$window.open('/Home/page2/');
Wants some information about the image loading while my process is happening.
Actually I m calling a callout on Button click , for that I have used
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
var url = parent.location.href;
sforce.apex.execute("ConsumeCallout","ConsumeData",{ObjName:"Contact",ConName:"{!Contact.Id}",MobileNumber:"{!Contact.MobilePhone}",PhoneNumber:"{!Contact.Phone}"});
But the result comes in after 4-5 secoonds . So I want to show a loading image in the mean time.
Can someone suggest me how to do that.
Before you call the sforce.apex.execute, use javascript to show an image.
I would suggest to use a javascript library like jQuery.
Then you can do something like this:
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
var url = parent.location.href;
$('the id of the element you want to change').html('<img src="image_url_here" />');
sforce.apex.execute("ConsumeCallout","ConsumeData",{ObjName:"Contact",ConName:"!Contact.Id}",MobileNumber:"{!Contact.MobilePhone}",PhoneNumber:"{!Contact.Phone}"});
If you use the element that is going to be updated by sforce.apex.execute it will disappear when that gets updated.
But for a full answer you would have to post some more code (especially the html)
I am dynamically loading content into my modals, and often it will be a page that is already a normally accessible page on my site.
So I want to be able to reuse that controller/action and load it into my modal but obviously the controller already uses a layout. So when I load the page into my modal, the header and footer of my site is all in the modal again, which I don't want.
One solution I thought of that might work, but seems like a dirty workaround, is to have in my Appcontroller a check for a URL parameter that says it is a modal call for the page (not a regular call). It then overrides the layout with a special modal one.
//app_controller.php
public function beforeRender() {
if (isset($this->params['passed']['_modal'])) {
$this->layout = 'modal';
}
}
// In my jQuery call to open the modal:
myModal.load('users/view/5/_modal').dialog('open');
Then in the modal.ctp layout I would include a stylesheet that looks something like:
// modal_layout.css
#import url("normal_layout.css");
.header, .footer {display:none;}
So I don't have to redefine all of my normal layout's CSS but I can just hide the parts I don't want to show.
This seems like a bit of a stupid method of doing it, and I don't know if it even works, but surely someone has had to do this before with CakePHP, so what would you guys suggest?
if ($this->request->is('ajax')) {
$this->layout = 'ajax';
}
Now you can configure your Layout/ajax.ctp as you want.
You could create an element.
$('#myModal').load("<?=url('users/view/5/_modal')?>", {type:'post'}, function(){
$('#myModal').dialog({title:'open',autoOpen:false, modal:false, height:600, width:700});
$('#myModal').dialog('open');
});
function view($my_customer_id, action) {
//do stuff here
$this->render(DS.'elements'.DS.'users'.DS.'modal');
}
use RequestHandler to detect ajax request. Put this line at the end of your action:
if ($this->RequestHandler->isAjax())$this->render('view_name','ajax');
It turned out I didn't need to anything so complex. I simply created a hidden div in my layout:
<div id="modal"></div>
And then in my layout's existing CSS I added certain rules to hide elements I don't want to see when a page is loaded in a modal:
#header, #footer {display:none;}
That way I can load a page into the modal but it still has all the normal styling that is already defined in the layout's CSS. Pages are loaded into the modal by using their normal CakePHP URL:
$('#modal').load('controller/action/param:whatever').dialog('open');
If you want the content of your modal dialog box to be simply the content of the view of an action you simply need to add the following a the top of the controller's action:
$this->layout = null;
This will disable the layout and all output the content{html} of the view