data-contenturl attribute in <a> tag - javascript

Working on one project and find this interesting attribute [data-contenturl] and did not find any information about it.
The main sense of this code is that the action of the controller returns a partial view. This link is part of the tabs widget and should insert content from a partial view to the #tab-body-id element. This partial view contains jquery widget with initializing spec and data-bind. The main issue is that on first load everything works great but on the second and subsequent old jquery objects try to send request to data-bind request but the element is one that`s why causes errors in console. I tried to destroy these elements, unbind them, insert empty content to #tab-body-id before the second tab load but nothing helps.
Could someone please explain how this attribute works? I could forget about something. I`ll be glad for any ideas!
<a href="#tab-body-id" data-toggle="tab" data-contenturl="#Url.Action("actionName", "controllerName",
new{ argument })">
And one more moment as additional information.
When i remove this attribute from and insert code
<div id="tab-body-id">
#{ Html.RenderPartial("route to my partial", Model.Id); }
</div>
directly to my #tab-body-id all works fine, becouse it is only one request during initialization of view...

Related

change an angularjs nested template at run time

I have a template which is nested inside another template which I want to load when i click on a button.
So the nested template is loaded dynamically. This is what I have done so far.
This is the main body.html (this loads when a url is provided in the browser e.g. http://url#/newtemplate)
<div ui-view> </div>
Other section of the code has been removed for brevity
This is the new_template.html which I expects it to show when I click a button.
When I put a template name directly like below i.e. when I hard code it
<div ui-view="number1"></div>
It loads the template fully.
This is the dynamic model
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
The above does not load the template as I expected. but it shows the string number1 when
the button is clicked
What can I do for it to load the template....
This is my controller
.state('parent',{
url: '/newtemplate',
views:{
'':{
templateUrl: "parent.tpl",
contoller:"controller",
},
'number1#parent':{
templateUrl:"number1.tpl",
contoller:"formcontroller"
},
'number2#parent':{
templateUrl:"number2.tpl",
contoller:"formcontroller"
},
'number3#parent':{
templateUrl:"number3.tpl",
contoller:"formcontroller"
}
}
})
Strange enough when I used the dot notation it did not work so I have to use the absolute naming method.
I also noticed that when I added the nested views as shown above the time it takes before the template gets loaded take a very long time.
Please I would appreciate any help which can allow me to load a nested view at runtime (possibly very fast)
Expecting more answer
I still hope that the I can make use of ui-view/ui-router because of the ability to make use of controller.
I'm not sure you can use uiView to load html dynamically.
I would try another possible solutions:
Use directives
Using ngInclude
I'll leave you an example with ngInclude: https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview

How to pass options over to izimodal (JS) from HTML

Want to get iziModal to work. As a beginner the documentation is a bit daunting.
It works fine, but I cannot pass the available options over to the script. The documentation for that is here under 'Data Attributes'.
This is my HTML code:
<div id="modal" data-iziModal-title="My Title">
<button data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-izimodal-open="#modal-iframe">iFrame</button>
</div>
And here the JS:
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});
$("#modal-iframe").iziModal({
iframe: true,
iframeURL: "http://izimodal.marcelodolza.com"
});
All I want is for the popup to display the title attribute and by extension all other attributes, of course. The documentation says that "all options can be set via data-attrs."
You might notice that the iframeurl is set twice (in HTML and again in JS). Take it out in JS and it will stop working... just as another example of that issue.
Does anyone know this script and what I might have missed?
Got it.
The documentation is somewhat unclear. So here is the solution for anyone trying to figure this out too. The id in the div has to match with data of the following elements. To explain:
<div id="modal-iframe" data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-iziModal-title="My Title"></div>
<button data-izimodal-open="#modal-iframe">iFrame</button>
In the example the div id is set to "modal-iframe". To get the button to respond with all the options, the button references the ID with data-izimodal-open="#modal-iframe". If the names don't match, it won't work.
Important: all options must be set in the div. In the example you see *data-iziModal-title="My Title" set correctly. Thus if placed into the it will not work.
Hope this helps anyone having the same issue.
EDIT
To clarify further: the JS code is fine. No changes necessary for it to work. You may change it's options, of course. The options in the HTML will always have preference over the ones set in the JS.

DOJO Custom Dialog Box - does not parse template file

I am new to DOJO. I have a custom widget , which uses a template file for the dialog box contents.
I am extending dijit.Dialog in the script file.
dojo.declare(
"custom.credentials",
[dijit._WidgetBase, dijit._Templated,dijit._WidgetsInTemplateMixin,**dijit.Dialog**],
{
templatePath: dojo.moduleUrl("custom", "templates/credentials.html"),
....
....
postCreate: function() {
this.inherited(arguments);
alert(this.containerNode);
alert(this.mainDIV);
},
});
My Template test file looks like this
<div data-dojo-attach-point="mainDIV">
Login Dialog Box template here
</div>
For some reason, when I alert on this.mainDIV, I get 'undefined'. It does not read the template file. Also, this.containerNode gives me 'HTMLDIVElement', (parent dijit dialog DIV).
I am not able to figure out after a lot of trial error where exactly the issue is. Any help would be greatly appreciated.
Calling code
function opnPop(){
var pop= dijit.byId("customPopup");
pop.show();
}
<div dojoType="custom.credentials" id="customPopup"/>
Note : *When dijit.Dialog is not extended* it reads the template file without any problem, I.e, I am able to access this.mainDIV.innerHTML , that contains my own inner html contents.
Thank you.
If Dialog has to be sub-classed, then it must be the base class. Here, it seems that it is used as a mixin. Anyways, the problem is with the template that is used.
The template will be parsed and used by the code in Dialog. So, the template mentioned here has nothing but a div element with an attach point. There is no "containerNode" element (ie. attach point) and you are trying to access it in your js code, which will give error.
More important, the "titleBar" & "titleNode" elements are also missing form template, which will give errors while parsing the template. In order to avoid that, the code part that uses these elements need to be removed from js, to avoid error. So the widget creation will be successful. Try with the standard dijit.Dialog's template.
Add the data-dojo-attach-point="mainDIV" to the top level Dialog's div in the template.
In template, more things can be added, which won't cause any issues. But, if removed anything, will cause problem. If we are sub-classing a class/widget, we need to comply to the existing code.

Change Page for jQuery Mobile between two html files

I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.

Displaying a progressbar or error message in a fancybox

Here is what I have in my member.php for my fancybox:
<script type="text/javascript">
$(document).ready(function()
{
$("a#uploadpage").fancybox({
'titleShow' : false
});
});
</script>
.
.
.
<a id="uploadpage" href='uploadpage.php'>Change Image</a> <br/>
This works perfectly, and by perfectly I mean it opens the fancybox containing the php code in uploadpage.php. Once the user pushes the submit button in uploadpage.php to upload there image I want it to either display an error message(invalid file type or file size too big), or a progressbar if the image is a valid file type and below 1MB. How do I do this within the SAME FANCYBOX? (I have the code for the error messages and progressbar already so I just need to know how to either refresh the fancybox or how to use javascript to accomplish this.)
Thanks a lot, I greatly appreciate it.
-Matt
I don't know if this will work, I've never used fancybox the way you are trying to use it, but, here's my suggestion: you could try using a class name instead of an ID. The anchor would be <a class="uploadpage" ...> instead of the id you use now. Also, change
$("a#uploadpage").fancybox({
to
$("a.uploadpage").fancybox({
fancybox makes a new instance of the box for each invokation when using id. It tries to reuse it if you use class names instead. Also, could try marking with a rel="myuploadbox", i.e.
<a rel="myuploadbox" class="uploadpage" ...>
Fancybox uses the rel attribute to group related things together, this might keep it from closing the box on your submit. Also, wrap everything you want inside that same fancybox in a div tag with the same rel attribute (I don't know if it would be supported that way by fancybox.. give it a try).

Categories

Resources