I have all anchor tags in left side contentpane of my web page. When i click a link, it will navigates to another another web page. i want that destination web page should open in my center contentpane.
I have hust started DOJO.Please Help me to solve this issue.
Page1
// page1.jsp should open in this section
Note: This example is working only for Dojo 1.8+
Assuming that you have something similar to:
<div data-dojo-type="dijit/layout/ContentPane">
show /link1 in targetPane
show /link2 in targetPane
...
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="targetPane"></div>
The basic instructions follow:
1) Intercept click events on the anchors.
For instance, you can mark the anchors you want to target the content pane with .menuLink class:
show /link1 in targetPane
...then for clicks on those elements:
on(query('.menuLink'), 'click', function(e) {...})
2) Handle the event
Use e.preventDefault(); so that clicking the links won't reload the whole page (as in your current situation :)
Instead instruct the pane to load the link from the anchor:
registry.byId('targetPane').set('href', e.target.getAttribute('href'));
Example
Working example is here (since I've skipped all of the Dojo boilerplate)
Related
I would have 10 bootstrap buttons on a single html page.
Each button opens a ootstrap modal filled with a html fragmen via an ajax request.
<div class="modal fade" id="myModal"></div>
$('#myModal').modal();
Should I create 10 different divs with 10 different ids? Or even 10 different instances?
var dialogInstance1 = new BootstrapDialog({
title: 'Dialog instance 1',
message: 'Hi Apple!'
});
or
should I create ONE dialog?
I would expect kind of caching problems when I open modal1, then just when I open modal2 I see still for some miliseconds modal1 html fragment from a prvious ajax request.
And how should I create those modals? The samples should this:
$('#myModal').modal();
and the instantiation? This is very confusing.
Can someone please share his experience how to approach with many bootstrap modals?
I would expect kind of caching problems when I open modal1, then just when I open modal2 I see still for some miliseconds modal1 html fragment from a prvious ajax request.
Assuming you're referring to data-remote's caching, you will probably be able to disable that in Bootstrap v3.2.0 (see https://github.com/twbs/bootstrap/pull/13183/ ).
However, I'd still recommend against using data-remote since it doesn't give you much control. It:
doesn't provide or easily let you do any error handling
doesn't give any "loading..." indication
forces you have to generate modal HTML on the server side (as opposed to, e.g., returning JSON from the server and using client-side templating)
IMO, you should:
include just one instance of the blank modal markup
setup your own click event handlers on the buttons that summon your modal
initiate the AJAX request in your click event handler
use client-side templating to generate a corresponding modal using the results of the request
use $(...).modal() or $(...).modal('show') (depends on how your templating works) to show the modal after the templating completes
I have an iframe in one of my application pages and whenever I load that page, all the ribbon controls i.e. the Site Actions menu and the User menu dont work. I mean when I click on them nothing happens. After I while I realized they were hidden behind the iframe. I tried using the Jquery bgiframe plugin on the ribbon container but that didn't work either.
UPDATE 1:
This is so weird! I just had to end the iframe tag like this </iframe> instead of /> and now the ribbon controls work!! Am I missing something here?
Sounds like you need an iframe shim: http://www.dynamicdrive.com/forums/entry.php?249-A-better-Iframe-Shim
Did you try to place the IFrame in a with a z-index? <div style="display:block;position:absolute;top:0px;z-index:999;">YOUR FRAME HERE</div>
I have Google's re-captcha implemented and working in Chrome perfectly (AJAX APIs). IE is the problem...
I have: localhost://myapp/index.html and a link for Forgot your password. When this link is clicked jQuery click handler is called. Handler function changes the div's content and also calls for Recaptcha.create(...) The widget is displayed correctly and works as expected in Chrome, but in IE if I click on reload icon or the sound button it reloads the whole page.
If I manually call for Recaptcha.reload() it reloads without any problem ?!
HTML I have is:
<div id="recaptcha" style="width:120px"></div>
[...]
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
[...]
//In a jquery click handler I call
Recaptcha.create("6LxxxxxxxxxxxxxxxxxxxxxxIrpV5RO8P",
"recaptcha",
{
theme:'white',
callback: Recaptcha.focus_response_field
}
);
So far so good... Captcha gets loaded well in all browsers. In IE8 and 9 when I click the widgets buttons for reload and mp3 version the whole page gets reloaded
I tried changing http for https and vice-versa, but still without any luck...
When Recaptcha.create(); is called, Google's re-captcha RELOAD and IMAGE/TEXT buttons' code looks something like this:
<a href="javascript:Recaptcha.reload();">
and I don't know why the page gets reloaded in my app in IE when the button is pressed and in the demo Google provided DEMO it sends a async request...
Since I can't change the javascript in href attribute I had to add a onclick handler in jQuery $(document).ready();
My solution was this:
$("#recaptcha).on("click", "id_of_the_reload_button", function(e){
e.preventDEfault();
Recaptcha.reload();
});
I basically blocked the natural behavior of the anchor google provides and called the reload() function myself.
I've never found out what was causing my page to reload in the first place
I am trying to test a web page using Selenium IDE. Am new to selenium.
The code is something like this.
<script src="type="text/javascript">
<script src="max.js" type="text/javascript">
<ul class="toolbar">
<li id="addTitle">
<span class="icon-add">Create New Title</span>
</li>
<li></li>
</ul>
When I click on 'Create New Title' - Selenium does not record anything. Please let me know if I need to provide any further information.
Thanks!
I have tried 'View Xpath'.
But 'View XPath' shows
id('addTitle')/x:span
Results from https://abc.xyz.com/ui/states/LisitTitles.ddx
But I want to add
https://abc.xyz.com/ui/states//ManageStates.ddx?action=add
which is for Create New Title button
I don't see https://abc.xyz.com/ui/states//ManageStates.ddx?action=add
anywhere in the page source code or Xpath.
In Page source I see:
document.location = ABC.PM.TITLE.builderURL + "?action=add";
Also how do I know whether it is Open/Click/etc commands I should be
using? Also does this have something to do with Pagination?
Thanks
You can add this manually by using xPath:
Command | click (or clickAndWait)
Target | //li[#id='addTitle']/span[#class='icon-add']
Value |
It will cause clicking an element containing the text 'Create New Title', as you see.
Open command is for openning a new web page.
Click command is for simulating a user clicking on an element.
On the selenium IDE window you can display all the available commands. You just have to click on the triangle above the "Find" button.
There is also a description for every command in the "Reference" tab
You can take a look on a screenshot here for more informations :
http://seleniumhq.org/docs/02_selenium_ide.html#ide-features#opening-the-ide
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});