In my following code, I am calling function "Make Request" that is located in a separate .js file. But the control is not reaching to this function. I have also added the link to the related file.
<link rel="section" href="../Lib/ajaxhandler.js" type="text/javascript">
<td oncontrolselect="MakeRequest('inCategory','SELECT * FROM electioncategorymaster', 'ecid', 'ecname');">
<select id="inCategory" name="inCategory" class="entryFormInputBoxColor">
</select>
</td>
I want to make a call to the MakeRequest function when page is rendered. On which event I must call the function?
Your link to the script is wrong. The link tag is useful for e.g. stylesheets.
Your script tag should be like this:
<script src="../Lib/ajaxhandler.js" type="text/javascript"></script>
Also, you may want to catch the oncontrolselect event of the combo box instead of the td.
How about this...
<script src="../Lib/ajaxhandler.js" type="text/javascript"></script>
<td>
<select id="inCategory" name="inCategory" class="entryFormInputBoxColor"
onChange="MakeRequest('inCategory','SELECT * FROM electioncategorymaster', 'ecid', 'ecname');">
</select>
</td>
Related
I have one javascript function named 'change2()' which is define in .ascx page's script tag.
I want to call that function from onclick event of img tag (Note : img tag is also on the same page).
It is compulsory to use img tag only for image.
I tried all the below ways, but unfortunately It doesn't work for me.
Test.ascx
<script language="javascript" type="text/javascript">
function change2() {
alert("Hi");
}
</script>
<table>
<tr>
<td class="list">
Most liked
</td>
<td>
<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclick="change2();" alt="Slider" />
</td>
</tr>
</table>
Second Way :
<table>
<tr>
<td class="list">
Most liked
</td>
<td>
<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" alt="Slider" />
</td>
</tr>
</table>
Please give me your suggestions to call javascript function from same page.
As I can see, the img id is imgLkU, so, instead of including the call in the img tag itself, you can subscribe the event "from the outside", i.e. do it like using $.on, (or $.click) like this:
$.on('click','#imgLkU', function() { change2(); });
// or equivalent $.on('click','#imgLkU', change2);
or
$.('#imgLkU').click(function() { change2(); });
// or equivalent $.('#imgLkU').click(change2);
Do it right after defining change2 in the same script tag.
I'd also recommend you doing the change2 definition and the event subscription inside an inmediately invoked function expression to avoid polluting the global javascript namespace.
(function() {
// define and subscribe here
})();
Because your elements all have runat="server", their onclick property is reserved for a backend-code actionlistener which will be executed at postback.
the onClientClick property is reserved to allow you to still attach javascript "listeners" to what is considered the client-side onclick.
keep in mind that returning false from an onClientClick handler will prevent postback from happening if an onclick listener is also hooked up. (onClientclick is executed before initiating the postback)
try this :
<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclientclick="change2();" alt="Slider" />
The following function can be directly called from document.ready function like
$(function () {
$('#imgLkU').click(function () {
//do what ever you want
})
});
First, take out the runat="server" on your image since you are already using server tags to set the url. If you still want to use runat="server", you can either:
1: change your img into an <asp:Image> tag and use ImageSource instead of src and OnClientClick instead of onclick.
2: set the src attribute in the code behind.
After that, any click method - from your question to all the answers - should work.
If that still does not show the alert, then start taking out code until it does and work your way from there...
I have this javascript code and this html code below. What I want to do is when I select an option in the dropdown list, the index.html file on the subfolder will be displayed on the div.
<script>
function display() {
var cake = document.getElementById("type").value;
document.getElementById("cakes").innerHTML = '<object type="text/html"
data="\'+cake+'\index.html" > </object>';
}
</script>
<body>
<center><img src="LOGO.jpg" size=20%></img></center>
<p><center><font face="Brush Script MT" size="32" color="lightblue"`enter code here`>YOU'RE SO
SWEETS</font></center></p>
<table>
<tr>
<td><img src="home.png"></td>
<td><img src="product.png"></td>
<td><img src="online.png"></td>
<td><img src="about.png"></td>
<td><img src="contact.png"></td>
</tr>
</table>
<br>
<select id="type" multiple onchange="display()">
<option value="special">Specialty Cakes</option>
<option value="adult">Birthday Cakes for Adult</option>
<option value="kids">Birthday Cakes for Kids</option>
<option value="wedding">Wedding Cakes</option>
</select>
<br>
<div id="cakes"></div>
You should use Ajax to load content in the Div. You can learn about ajax from any good tutorial. A starting point may be -
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
Update :
From your Comment, my understanding is -
You can make use of jquery and use the variation of following snippet in your code from any function which will be triggered in onchange event of the select. you need to attach the jquery library.
$('#your-div-id').load('your-html-page.html');
Thanks.
If you want to do the ugly way, you can use an iframe and change the src.
If you want to do the pretty way (which is kinda what most sites do nowadays), use Ajax to load the content into the div, specially because with Ajax the content will be really loaded into the div, while with iframe you will just open another HTML inside it, and if you eventually need to check stuff in/out of it, it will be a lot harder. Ajax would be my option (I never use iframe anyway)
If you don't know Ajax, I suggest either checking how prototypejs or jQuery implement it. It's easy and will give you better control over what you insert into the div.
I made a pretty huge script for a form and everything works fine except that my select with onchange() doesnt work at all, but only in THIS script. If I try to do it on a blank page (just put a script tag, put my js inside of it, put my html code with my select tag, etc...everything works fine).
So my question is : Why is my function modele isn't working at all? Is there any kind of issu inside my head tag? Thx!
P.S. This is what I get in the console : Uncaught TypeError: object is not a function
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function modele(form) {
var x = form.marque.selectedIndex;
alert(x);
}
</script>
<style>
[...]
</style>
</head>
inside my body :
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" id="credit">
[...]
<td><label for="marque">Marque :</label></td>
<td>
<select id="marque" name="marque" onChange="modele(this.form)">
<option></option>
<option>Acuras</option>
<option>Hondas</option>
<option></option>
<option></option>
</select>
</td>
<td><label for="modele">Modele :</label></td>
<td><select id="modele" name="modele">
<option></option>
</select>
</td>
[...]
</form>
The problem is that you've given the <select> element the id "modele". Change either that or the name of the function. The browser is overriding the binding of the function to the global name "modele" with a reference to the DOM node for the <select>.
There are two other objects with the name 'modele'. The first is the id of the second select tag and the second is the name of the second select is also 'modele'.
Try changing both to something else or change the name of the function to something else to make it work.
I have the following codes:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='${row.content}';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
</c:forEach>
The problem is that it only shows the result of the last content instead of printing it out line by line according to number.
What you are creating, if you view the page source in the browser, would look something like this (note the ${row.content} will have already been replaced on the server):
<td>0<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='The first row content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
<td>1<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='Some different content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
<td>2<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='Yet some more content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
You're going to have many copies of function load() and many times where window.onload is assigned window.onload=load;
When this arrives at the browser and is interpreted, only the last definition of function load() will be in effect; only the last time you assign window.onload=load; means anything (because you keep replacing the value of window.onload) -- each redefinition of load() will replace the previous one - so only your last var content='${row.content}'; is ever executed.
In addition, you will have many <div> tags with the same id of "content" and that's not allowed.
The content of each of those <td><div>...</div></td> blocks can be set by the JSP/JSTL itself on the server -- there is no need to set the innerHTML via javascript.
You can use the totalRow varStatus that you set up to provide the number for the first <td> -- you don't need to increment your own counter.
You can use Expression Language (EL) to access the content value of each row.
Inline style="blah blah blah" sucks. Use that only if absolutely necessary.
Instead, put all this style in CSS targeting .contentbits:
style="table-layout:fixed; width:405px; word-wrap:break-word;"
becomes
.contentbits {
table-layout:fixed;
width:405px;
word-wrap:break-word;
}
The page fragment becomes much simpler:
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td>${totalRow}</td>
<td>
<div class="contentbits">${row.content}</div>
</td>
</c:forEach>
It's not the right way to do it, but a simple solution would be use addEventListener instead onload:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
window.addEventListener("load", function () {
var element = document.getElementById("content<%=number%>");
element.innerHTML=Utf8.decode('${row.content}');
}, true);
</script>
</div>
</td>
</c:forEach>
In fact your code is using only the last "onload" because, when loading the page, it will execute the javascript load callback only when finish full loading it. So, each time you loop is executed, it updates the load callback reference for the last one, so when onload is triggered, the last only will be executed.
But your code has other errors too. The content id, repeats at the code lot of times, that will make your div getElementById useless, because you have lot of ids that are equal. Ids must be unique to work property.
To finish, it's not a good pattern to mix your HTML with scripts inside, is better to have you logic file (javascript file) outside, then it can make changes in your code when finish to load, reading the html that was generated. You also can create data attribute in your div then read it by the javascript to manage all itens with a specific data attributes.
To keep it simple, I will add an example:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;" data-content="${row.content}">
</div>
</td>
</c:forEach>
Now the script file (I'm using jQuery for this example works on any browser):
$(function() {
$("[data-content]").each(function(item) {
$(item).html(Utf8.decode(item.attr('data-content')));
});
});
Problem description
Is it possible to register (include) javascript within RenderingTemplate? (RenderingTemplates are used to render list forms or fields)
By using
<SharePoint:RenderingTemplate ID="NewRelatedListItem" runat="server">
<Template>
<span id="part1">
<SharePoint:ScriptLink Name="SPFormFieldAssistant.js" Localizable="false" />
...
</span>
...
</Template>
</SharePoint:RenderingTemplate>
it couldn't be done - it didn't include script at HEAD area, but...:
Source http://img62.imageshack.us/img62/9826/ss20100324092808.png
Is something wrong with my code? Althought script IS at Layouts folder and I checked with Reflector that it uses Layouts folder if Localizable='False'.
I don't want this script to be loaded with every page, but only for forms.
Any ideas on how this could be achieved?
My idea that is not working...
My first idea was to add script programmatically with <% this.Page.ClientScript.RegisterClientScriptInclude("spffa", "/_layouts/SPFormFieldAssistant.js") %>, but it is not working, as that code evaluation is happening in Render method and i read somwhere that you cannot register client scripts within Render method, but usually is done within PreRender method. Pity
My second idea that is still not working
I thought i would create custom UserControl named RegisterClientScript and there within overriden PreRender method i would add scripts i need with client script manager (this.Page.ClientScript...) but, as with SharePoint:ScriptLink, my control also is rendered as text!
my control as text http://img693.imageshack.us/img693/3738/ss20100324115826.png
How do i overcome this and where's the catch?
Looks like you are missing the runat. Try this:
<SharePoint:ScriptLink Name="SPFormFieldAssistant.js" Localizable="false" runat="server" />
It turns out that you can directly add <script> tags to template!
<script src="/_layouts/SPFormFieldAssistant.js" type="text/javascript"></script>
Thank you for the notes however.
Sometime back I had a Similar requirement. For which I have included the script Register in the CreateChildControls method of the Field Control class.