I'm trying to find a way to inject a new JavaScript functions dynamically without having to do a page reload. I have a form for putting in inventory items and I would like to load or remove functions based on which manufacturer is selected. Trying to research this I thought I could accomplish this with:
document.getElementsByTagName("head")[0].appendChild
The document I was using for examples was taken from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml. At first I was not sure if it was calling the file and so as a final test I appended the small snippet:
var petname="Spotty"
alert("Pet Name: " + petname)
and to the end of the .js file and received the alert. I was hoping to make this input page modular and dynamic. The reason I need to replace the functions is because each manufacturer uses what is called a "BOM" number which based on the values gives the unit model, condenser, electrical, etc. The scripting as it stands right now uses the onChange feature so on each drop down selection the BOM number is updated with its correct value. Conversely entering in a BOM number will select the values from the drop down menus. The JavaScript functions work as intended with the onChange's if I place it in the 'head' but when using the .appendChild none of the functions work. Should I be using something else for this?
The best approach to your problem is call a single function which accepts BOM number and manufacture type. Then fetch your unit model, condenser, electrical based upon the manufacture type
Javascript:
function GetDetails(bom, manufactureType){
switch(manufactureType){
case 'blah blah' : <do something>
break;
default:break;
}
}
HTML:
<select onchange="javascript:GetDetails(<pass selected BOM here>, <pass selected MANUFACTURER here>);"></select>
Maybe this library will help you http://yepnopejs.com
Using it you are able to load and execute JS files after some conditions.
Related
I use the Cart::updateQty() function in my module for prestashop. I'd like also to use the $id_product_attribute parameter, but I'm unable to find the desired value for this when I have array of id_attributes only.
I need behavior similar to the default selecting product attributes on the product page and then adding it to cart, but I'd like to do this on the server side.
What I was able to find out is that when I'm changing a product attributes on the product page, the html input with id="idCombination"
#idCombination
is being filled with a proper value and then it's being POST'ed with ajax to the server. Unfortunately, I cannot work out how the actual searching is being made and how to do this in js or php code.
Any help would be appreciated.
In a default product page these combinations are transferred with a variable $combination within a ProductController.php with a method assignAttributesGroups() and then defined a js variable inside product.tpl via condition
{if isset($combinations) && $combinations}
{addJsDef combinations=$combinations}
{/if}
after that everithing going on in a product.js file which do all switch job and substitute id="idCombination" after each changing.
So you can to repeat a default approach to implement your requirements even though it looks a bit complicated. Also, I think you don't need such a completed $combination variable with all that information and you can add only that what you need. I hope it clarifies you a direction to work.
I've been doing some work on Sharepoint Online/365 and have got stuck trying to set the value of a lookup or choice column in NewForm.aspx
Narrowed my problem down to not being able to set lookup/Choice Columns
I have simplified a code on my page down to
//Phase being a Choice Column & Closure a case sensitive valid option
$("select[title='Phase']").val("Closure");
//ProjectName being a Lookup Column & Test2 a case sensitive valid entry in the list
$("select[title='ProjectName']").val("Test2");
I have no problem setting text fields as the following code works fine on a text field I created
$("input[title='TextField']").val("Test2");
I have used the following Jquery libraries 1.7.2/min.js and 1.11.3
Not sure whether you used _spBodyOnLoadFunctionNames.push() method for your logics. Usually you have to wait all SharePoint DOM objects are loaded and then to execute your jQuery code. If you used SharePoint JavaScript library, you probably needs to call ExecuteOrDelayUntilScriptLoaded() to make sure your call is called after curtain SharePoint .js files are loaded.
First Thanks "Verona Chen" and " DIEGO CARRASCAL" because of who i've learnt a few other tricks in SharePoint which will help with other projects.
My original script before the question was trying to use a query string to populate a field in newform.aspx (which i have done on sharepoint 2013 with code i have found here on)
Unforuntaly with sharepoint online/365 This code was no longer working.
This code has fixed my issue (though it does change how a few previous pages are constructed)
Appologies if this doesn't directly answer the above question (as this was me trying to breakdown the overall issue i was having into something simpler and easier to address based on me narrowing down the issue in my original code) however as I am now up and running, it seems only polite to post the outcome.
Prior to code, i have a projects list with a "ProjectName" field. I was sending the field name into a URL and querystring to get mylist/newform.aspx?ProjectName=Test2
I was then trying to pull that Test2 into the lookup field (liked to the project list) "ProjectName" in the list "MyList"
But even when loading the function for my old script with _spBodyOnLoadFunctionNames.push() it wasn't working.
After playing with this for a while and after some looking around i found this peice of code
<script type="text/javascript">
(function () {
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {
'ProjectName': {
'NewForm': renderTaskCategory
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();
function renderTaskCategory(ctx) {
//extract cat parameter from a query string
var GetProjID = GetUrlKeyValue('ProjID');
//set lookup field value
ctx.CurrentFieldValue = GetProjID;
//default template for rendering Lookup field control
return SPFieldLookup_Edit(ctx);
}
</script>
This means that i have to change my previous url builds to create mylist/newform.aspx?ProjID=2
This script then finds item ID 2 (which happens to be test2 in this case) and puts the title of item 2 in my lookup field ProjectName
Thanks again to those that helped earlier.
And apologies again if this doesn't directly answer the question i originally asked.
I have a listview that has a nested listview which contain radcomboboxes in the itemtemplate. As such, the IDs (as far as I know) are useless to me.
For example, if I have 30 items, each one of those items is going to generate a new combobox so the names are going to be generated by asp. What I need is to be able to grab the selected value from whichever combobox is being worked by the user. I'm currently using jQuery and some absurd parent().parent().children() type nonsense in order to find the correct combobox in relation to the submit button.
When submit button is clicked, I need it to find the selected value of the it's respective combobox so that I can send that to the post submission handler. The problem is that the .val() jQuery method is not working. When I use that with something like:
$(this).parent().parent().children().children(".statusCbo").val();
I end up getting the text value, not the selected value. I triple checked to make sure that I had the fields bound correctly in the aspx file;
DataTextField = '<%#Eval("name") %>' DataValueField = '<%#Eval("id") %>'
But as I said, I'm ending up with the DataTextField value of the selected item. The best explanation I could get was that it had something to do with how the control is requesting the content (via ajax).
So at any rate, could anyone offer some suggestions on how to accurately get the selected value from the combobox?
UPDATE:
I was able to gain reference to the object through a different means:
$(".submitTag").click(
function () {
var topLevel = $(this).closest(".CommentTopLevel");
var status = topLevel.find(".StatusTag").get_value();
//stub to test value
alert(status);
return false;
});
from here, if use status.val(), it will give me the text instead of the value (same issue as before). The documentation implies that I should use status.get_value(); but this is blowing up saying that the method is not supported from the object. Any ideas?
UPDATE:
nevermind, I found that it is a jquery object being returned, so the method isn't included. Continuing to dig.
SOLUTION:
There was just an extra step i needed to do to use traditional methods. I don't know what it took so long for it to click with me:
$(".submitTag").click(
function(){
var topLevel = $(this).closest(".CommentTopLevelTag"); //gets the parent container
var comboBoxID = topLevel.find(".StatusTag").attr("ID"); //gets the clientID of the jQuery object
var comboBoxRef = $find(comboBoxID); //finds the control by id and brings back a non-jQuery object (useable)
var comboBoxSelectedValue = comboBoxRef.get_value(); //uses the Telerik method to get the selected value
});
Its been a little while since I've dealt with Telerik controls, but what you're doing is bypassing the apis Telerik has made for you to use, and that strikes me as a very bad thing. The next release of Telerik Controls could easily break your code.
Look, it shouldn't be that hard to pass the client id from the listview. There's several methods I'd tackle but I'll let you figure that on your own for now. Once you DO have the ClientID for the control, follow the example on telerik's site:
http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/addremovedisableitemsclientside/defaultcs.aspx
Once you have that id do some
var combo = $find(someVarReferencingTheId);
Now you have a reference to the combobox in its clientside form. Now find some function that gets what you want from here:
http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
...
PROFIT!
EDIT: that first link to demos.telerik.com isn't really even needed, I just showed that because that's what I used to get that line of code (I could never remember if it's $get or $find I needed to use, unless I was doing a lot of Telerik clientside stuff at the time.).
EDIT 2: $get and $find are ASP.NET constructs, not Telerik's.
This has been a question I've had since I started doing serious ajax stuff. Let me just give an example.
Let's say you pull a regular HTML page of a customer from the server. The url can look like this:
/myapp/customer/54
After the page is rendered, you want to provide ajax functionality that acts on this customer. In order to do this, you need to send the id "54" back to the server in each request.
Which is the best/most common way to do this? I find myself putting this in hidden form forms. I find it easy to select, but it also feels a bit fragile. What if the document changes and the script doesn't work? What if that id gets duplicated for css purposes 3 months from now, and thus breaks the page since there are 2 ids with the same name?
I could parse the url to get the value "54". Is that approach better? It would work for simple cases repeatedly. It might not work so well for complex cases where you might want to pass multiple ids, or lists of ids.
I'd just like to know a best practice - something robust that is clean, elegant and is given 2-thumbs up.
I think the best way to do this is to think like you don't have Ajax.
Let's say you have a form which is submitted using Ajax. How do you know what URL to send it to?
The src attribute. Simply have your script send the form itself. All the data is in the form already.
Let's say you have a link which loads some new data. How do you know the URL and parameters?
The href attribute. Simply have the script read the URL.
So basically you would always read the URL/data from the element being acted upon, similar to what the browser does.
Since your server-side code knows the ID's etc. when the page is being loaded, you can easily generate these URLs there. The client-side code will only need to read the attributes.
This approach has more than just one benefit:
It makes it simpler where the URLs and data is stored, because they are put exactly in the attributes that you'd normally find then in HTML.
It makes it easier to make your code work without JavaScript if you want to, because the URLs and all are already in places where the browser can understand them without JS.
If you're doing something more complex than links/forms
In a case where you need to allow more complex interactions, you can store the IDs or other relevant data in attributes. HTML5 provides the data-* attributes for this purpose - I would suggest you use these even if you're not doing HTML5:
<div data-article-id="5">...</div>
If you have a more full-featured application on the page, you could also consider simply storing your ID in JS code. When you generate the markup in the PHP end, simply include a snippet in the markup which assigns the ID to a variable or calls a function or whatever you decide is best.
Ideally your form should work without javascript, so you probably have a hidden form input or something that contains the id value already. If not, you probably should.
It's all "fragile" in the sense that a small change will affect everything, not much you can do about that, but you don't always want to put it in the user's hands by reading the url or query string, which can be easily manipulated by the user. (this is fine for urls of course, but not for everything. Same rules that apply to trusting $_GET and query strings apply here).
Personally, I like to build all AJAX on top of existing, functional code and I've never had a problem "hooking" into what is already there.
Not everything is a form though. For
example, let's say you click a "title"
and it becomes editable. You edit it,
press enter, and then it becomes
uneditable and part of the page again.
You needed to send an ID as part of
this. Also, what about moving things
around and you want those positions
updated? Here's another case where
using the form doesn't work because it
doesn't exist.
All of that is still possible, and not entirely difficult to do without javascript, so a form could work in either case, but I do indeed see what you're saying. In almost every case, there is some sort of unique id, whether it's a database id or file name, that can be used as the "id" attribute of the html that represents it. * Or the data- attribute as Jani Hartikainen has mentioned.
For instance, I have a template system that allows drag/drop of blocks of content. Every block has an id and every area that it can get dropped has one as well. I will use prefixes on the containing div id like "template-area_35" or "content-block_264". In this case, I don't bother to fallback w/o javascript, but it could be done (dropdown-> move this to area for example). In any case, it's a good use of the id attribute.
What if that id gets duplicated for
css purposes 3 months from now, and
thus breaks the page since there are 2
ids with the same name?
If that happens (which it really shouldn't), someone is doing something wrong. It would be their fault if the code failed to work, and they would be responsible. Ids are by definition supposed to be unique.
IMHO putting is at a request parameter (i. e. ?customerId=54) would be good 'cos even if you can't handle AJAX (like in some old mobile browsers, command-line browsers and so) you can still have a reference to the link.
Apparently you have an application that is aware of the entity "Customer", you should reflect this in your Javascript (or PHP, but since you're doing ajax I would put it in Javascript).
Instead of handmaking each ajax call you could wrap it into more domain aware functions:
Old scenario:
var customer_id = fetch_from_url(); // or whatever
ajax("dosomething", { "customer": customer_id }, function () {
alert("did something!");
});
ajax("dosomethingelse", { "customer": customer_id }, function () {
alert("did something else!");
});
New scenario:
var create_customer = function (customer_id) {
return {
"dosomething" : function () {
ajax("dosomething", { "customer": customer_id }, function () {
alert("did something!");
});
},
"dosomethingelse": function () {
ajax("dosomethingelse", { "customer": customer_id }, function () {
alert("did something else!");
});
}
};
}
var customer_id = fetch_from_url(); // or whatever
var customer = create_customer(customer_id);
// now you have a reference to the customer, you are no longer working with ids
// but with actual entities (or classes or objects or whathaveyou)
customer.dosomething();
customer.dosomethingelse();
To round it up. Yes, you need to send the customer id for each request but I would wrap it in Javascript in proper objects.
I run into this problem constantly while developing AJAX applications. Let's say I want users to be able to click on a "flag" icon associated with each comment on my site, which results in an AJAX request being sent to the server, requesting that the comment be flagged. I need to associate a comment id with the comment on the client side so that the AJAX request may communicate to the server which comment to flag.
This page explains a number of ways to annotate HTML in this manner, but none of them are very satisfactory. While I could just use an id or class attribute to associate the comment id with the flag button (e.g. id="comment_1998221"), this fails with more complex data that doesn't fit well into those attributes (e.g. arbitrary strings). Is there a best practice for this sort of thing? Every time I need to do this, I end up with some kludge like using the id attribute, a hidden form field, or worse yet a span set to display:none.
The HTML5 data-* attributes seem like a perfect solution, but I've seen a lot of animosity toward them, which makes me think that people must already have a solution they're happy with. I'd love to know what it is.
This page explains a number of ways to annotate HTML in this manner, but none of them are very satisfactory.
Still, they are pretty much all you've got. Although that page isn't a terribly good summary, there are errors and it misunderstands what ‘unobtrusive’ JavaScript means.
For example it is in fact perfectly valid to put a script element inside body — just not directly inside a table element. You could put all the script fragments at the bottom of the table, or put each row in its own table, or even, with some limitations if you are intending to mutate the DOM, inside the row in question.
Setting “id="comment-123"” then scanning for all rows with an id starting with ‘comment-’ is indeed good for your particular case. For setting non-identifying extra info attributes, you could use either HTML5 data-attributes or hack it into the classname using eg. “class="comment type-foo data-bar"”. Of course both IDs and classnames have their limits about what characters you can use, but it's possible to encode any string down to valid strings. For example, you could use a custom URL-style encoding to hide non-alphanumeric characters:
<tr class="greeting-Hello_21_20_E2_98_BA">
...
</tr>
function getClassAttr(el, name) {
var prefix= name+'-';
var classes= el.className.split(' ');
for (var i= classes.length; i-->0;) {
if (classes[i].substring(0, prefix.length)==prefix) {
var value= classes[i].substring(prefix.length);
return decodeURIComponent(value.split('_').join('%'));
}
}
return null;
}
var greeting= getClassAttr(tr, 'greeting'); // "Hello! ☺"
You can even store complex non-string values in this way, by encoding them JavaScript or JSON strings then retrieving them using exec (or JSON.parse where available).
However, if you are putting anything non-trivial in there it soon gets messy. That's where you may prefer comments. You can fit anything in here except the sequence '--', which is easily escaped if it happens to come up in a string.
<table>
<tr class="comment">
<td>...</td>
<!-- {"id": 123, "user": 456} -->
</tr>
</table>
function getLastComment(node) {
var results= [];
for (var i= node.childNodes.length; i-->0;)
if (node.childNodes[i]==8)
return node.childNodes[i];
return null;
}
var user= getLastComment(tr).user;
The summary warns that this may not be guaranteed to work because XML parsers may discard comments, but then DOM Level 3 LS parsers must keep them by default, and every browser and major XML library so far does.
jQuery data API is nice for this.
Suppose you have the following DOM...
<div class="comment">
Flag
Some text
</div>
Then, assuming you are also loading these elements by ajax, you can do
$(".comment").data('someKey', (any javascript value/object));
Then later, upon click handler to the flag, you can do...
$(".flagSelector").click(function(ev) {
var extraData = $(this).closest(".comment").data("someKey");
// use extraData along with your request
});
If you are generating the comments on the server side and shipping them with the initial page, you need to figure out how to initialize the data. One way would be to have unique ID-s for the comment and upon pageload, still load the custom data from the server by Ajax.
Here is how I would do this:
When rendering the page server-side, generate the flag link as a normal link, so that it would work fine if you didn't have javascript enabled.
<a class="flag_link" href="/comment/123/flag/"><img src="flag.gif" /></a>
Then, in the javascript, add a click event to do this by ajax instead. I'll use jQuery for my example, but the same thing is not hard to do without it.
<script>
$('a.flag_link').click(function() {
$.get($(this).attr('href'), function() {
alert('you flagged this comment');
});
});
</script>
Of course, you'll do something more user-friendly than an alert to signal success.