I've recently asked a question on how to pass a variable in Smarty: Smarty - include template and update an existing variable
It's working fine for me, but now I need something a little more advanced from what I see.
In one template I attach a gallery slider template as a variable:
{$gallery_slider}
In the gallery template (which is a general file for other pages, so I don't want to change it) there's the jQuery slider with options. I would like to change the number of visible slides. For now it looks like this:
visible : {$partial.visible|default:5},
If I change default to 3 in the template, it works, but I would like to do this from the level of the template that calls the gallery - above {$gallery_slider}.
How do I do that? I've tried:
{assign var="partial.visible" value="3"}
and
{assign var="partial.visible|default:3"}
and some other combinations, none of them works.
I'd appreciate some suggestions.
I don't know how you used this as variable (probably fetch method) but you should rather use include in this case:
{include file="gallery.tpl" items=5}
{include file="gallery.tpl" items=3}
and now if in gallery.tpl you have:
Here I can display {$items} in my gallery<br />
output will be:
Here I can display 5 in my gallery
Here I can display 3 in my gallery
so you can use this variable and in loop (or other control structure) use this variable without any problem
Related
I'm using AngularJS to design a small app for searching. I have a div that's currently empty, and after running a function, for it to replace it with a div that has ng-include. The div replaces just fine, but ng-include doesn't load up.
I'm currently running the following in console for testing to see get it running. How would I go about getting this to work? Any help is appreciated!
document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';
read about angularjs $compile function
I don't know why you need to make this JavaScript-call, but its definitely no the 'angular-way'. If you need to conditionally include html, i would recommend using ng-if, ng-hide, ng-show or even ng-switch.
You could do something like this:
// somewhere in your controller
$scope.triggerSomeInclude = true;
// in your template
<div ng-if="triggerSomeInclude">
<div ng-include ="'someFile.html'"></div>
</div>
Another approach would be using a directive. They are the only place, where selecting an element directly could make sense (although even there it usually doesn't to select an element via id). But as I said, it's hard to stay what the best method would be, as I'm not sure what you're trying to achieve.
Although you're not using jQuery, what you're trying to do looks very jQueryesque (awful word) as you're selecting an element directly seemingly totally detached from the $digest and $compile-cycles of angular, so I also would recommend to read this answer:
"Thinking in AngularJS" if I have a jQuery background?
In the end, the method I used was templating example used for ngInclude.
http://docs.angularjs.org/api/ng.directive:ngInclude
Inside my controller, for example, by default it would set the following:
$scope.mainDivTemplate = {url: 'partials/test1.html'}
If I wanted to switch it to something else, I'd call a function that would look a little something like this.
$scope.loadHome = ->
$scope.mainDivTemplate = {url: 'partials/home.html'}
$scope.$apply()
I'm fairly new to the whole JQuery/javascript world, but I've managed to wack together a working jqgrid with a datepicker & custom control (used jquery auto complete) based on code samples i found on the net. I've added the code to a T4 template in my project as it'll probably act as a base/starting point for most pages. (Side note. I'm using asp.net MVC)
JFIDDLE: LINK
1.) I'd like to move the initDateEdit & initDateSearch to the same function (using a parameter, to disable/enable the showOn property) as they are basically similar.
2.) How would be the best way to set nonWorkingDates from outside the new function/file. same applies to the autocomplete_element (I'd like to specify the url)
Changing
"function nonWorkingDates(date)" to => "function nonWorkingDates(date, nonWorkingDates)"
isn't working, (guess it's got got something to do with how its gets called "beforeShowDay: nonWorkingDates")
Thanks in advance!
If you have a chunk of JS code like this:
<script type="text/javascript">
... code goes here ...
</script>
You simply copy the whole thing, eliminate the containing script tags, and save the raw code
... code goes here ...
to a file, which you then include with:
<script type="text/javascript" src="yourfile.js"></script>
However, since you're using jquery, you'll have to make sure that this above snippet is placed AFTER the script tag that loads up jquery, or you'll get a "no such function" syntax error.
I have javascript which can hide empty fields from sharepoint display form.
http://sharepointjavascript.wordpress.com/2009/10/15/hide-empty-rows-in-dispform/
I need to add programmatically this javascript to all display forms.
I dont know how to do it. Any ideas?
.each loops through all elements which matches a specific selector. If the code below is not sufficient, change the selector ("td.ms-formbody") such that your desired elements are matched.
$("td.ms-formbody").each(function(){ /* Should walk through all elements */
var val = $(this).text().replace(/\s|\xA0/g,'');
if($(this).parents().html().match('FieldName="#H#')==null){
if(val.length==0){
$(this).parents('tr:first').hide();
}
}
});
If you're still stuck, provide your HTML code, so that a more specific answer can be offered.
You can add a custom template file, overriding the ordinary DefaultTemplates.ascx (under ControlTemplates).
Create _NewTemplates.ascx file (empty). It should go under ControlTemplates as well
Copy all the Register stuff from the original ASCX
Add the ListForm template copied from DefaultTemplates.ascx (you might need to add a couple more template, depending on the list types you want to support)
Now edit the rendering template to add your JS
<SharePoint:RenderingTemplate ID="ListForm" runat="server"">
<Template>
--> add your code here
<script language="javascript">add functions or hook up enternal JS file</script>
--> continue original markup from this point
Save the file and run IISRESET, that's it
I have the following code that creates and deletes text boxes using javascript:
http://jsfiddle.net/JpYGg/8/
What I am aiming to do is infact create a set of three drop-down lists using this functionality instead of creating a textbox.
The code for the three drop-downs is shown here:
http://jsfiddle.net/MWH99/
I am a bit stuck as to how to achieve this. I added in the "dropdown" div and what I was thinking is to get the innerHTML of this div in order to use that to create the three lists every time?
The other question I have is how to have it so that these are generated by the javascript instead of an HTML one AND a JavaScript version.
Thank you for any help.
Martin
EDIT
I have the buttons working to create the next row of 3 drop-downs but they do not function the way that the original does, the parent drop-downs use javascript to identify the selection in the first drop-down in order to update the other two whereas the cloned ones lose this functionality.
Code cna be found here:
http://pastebin.com/pt1wef76
Original drop downs use dropdown.js which is http://pastebin.com/bDLpFWJY
Why not use a javascript library like jQuery for example. Would make this and many other things much easier. Could achieve what you want like this:
$('body').append('<!-- ANY HTML GOES HERE -->')
There's two basic approaches; create all of the elements in JavaScript, or copy a part of the DOM (some HTML) over and over.
People often put HTML in script tags (see jQuery Templating, for example), and then get the innerHTML of the tag and use that. For example,
<script type="text/plain" id="template">
<!-- HTML that you want to duplicate in here -->
</script>
<div id="contentcontainer">
</div>
...
<script type="text/javascript">
var addAnother = function( ) {
$("#contentcontainer").append(
$("#template").html()
);
};
</script>
This example makes use of jQuery primarily because jQuery is a lot less verbose and easier to read, but you certainly don't have to use jQuery. Here, the addAnother function will copy the HTML from #template and append it into #contentcontainer.
In your attempt above, you probably meant $('body').append($('#dropdown')); '#dropdown' is just a string, $('#dropdown') returns the element (or elements) with id="dropdown".
Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.