We Keep Coding

Pass 2 Functions Through One OnChange Event - With HREF on both Functions

I have asked something similar in the past but was able to resolve it by separating the functions by events. I need to be able to pass 2 href events in one Onchange Event because it is a dropdown, OR I need to be able to tie the second function into another Event.
This works only when an alert() is inserted. Once I take the alert() out it does not work. I've tried to supress the alert while still keeping it in the code and it works fine. I do not want the alert but I want the results.
HTML Here:
<select id="PartList" class="form-control form-control-lg ml-0" onChange="SelectMain();">
JavaScript Here
function sList() {
var pl = document.getElementById("PartList");
var value = pl.options[pl.selectedIndex].value;
var text = pl.options[pl.selectedIndex].text;
str = 'URL1 HERE='+ "'" + text + "'" ;
//alert(value);
//alert(text);
window.location.href = str;
}
function SelectValue() {
var pv = document.getElementById("PartList");
var value = pv.options[pv.selectedIndex].value;
str = 'URL2 HERE' + value ;
alert(value);
window.location.href = str;
}
function SelectMain() {
sList();
SelectValue();
}
function alert(message) {
console.info(message);
}

This is resolved, for those that come to this question. The problem wasn't with the JavaScript it was because the device I was sending the commands to couldn't handle the commands that fast. I have incorporated the resolved code with troubleshooting techniques.
function sList() {
var pl = document.getElementById("PartList");
var value = pl.options[pl.selectedIndex].value;
var text = pl.options[pl.selectedIndex].text;
str = 'URL1='+ "'" + text + "'" ;
//str1 = 'http://google.com';
//alert(value);
//alert(text);
window.location.href = str;
//window.open(str1);
}
function SelectValue() {
setTimeout(function(){
var pv = document.getElementById("PartList");
var value = pv.options[pv.selectedIndex].value;
str = 'URL2=' + value ;
//str1 = 'http://aol.com';
//alert(value);
window.location.href = str;
//window.open(str1);
},1000);
}

Kendo Grid - Window template button with update functionality

Right now I am using a window to view details that are not shown in the grid. I have made my own custom editor in the window as well which hides the details and replaces them with inputs.
Unfortunately I cannot get the Update button to have the same functionality as an update button in the kendo toolbar.
I am using transport and parameter map for my create which works perfectly. I just need to be able to hit the update, which I haven't been able to.
Here is a snippet of code for the template:
<li><b>Change Control Objective</b></li>
<li><textarea type="text" class="k-textbox k-input" data-bind="value:ChangeControlObjective">#= ChangeControlObjective #</textarea></li>
<li><b>Change Control Specifics</b></li>
<li><textarea type="text" class="k-textbox k-input" data-bind="value:ChangeControlSpecifics">#= ChangeControlSpecifics #</textarea></li>
<span class="k-update k-icon k-i-tick"></span>Save
I can't show my JS code but it is based off this dojo: http://dojo.telerik.com/abUHI
UPDATE:
I am able to hit the update in the parametermap off of my save button click but it's sending the old data to the update instead of the new. Here is the button click code:
$("#saveChanges").click(function () {
dataItem.dirty = true;
$("#ccrGrid").data('kendoGrid').saveChanges();
});
Each input has a data-bind attribute and the parametermap looks like this:
case "update":
var changeControlRequestId = options.ChangeControlRequestID;
var changeControlObjective = options.ChangeControlObjective;
var changeControlSpecifics = options.ChangeControlSpecifics;
var productAssociation;
if (options.AccountChangeInfo.ProductAssocation == undefined) {
productAssociation = "";
} else { productAssociation = options.ProductAssocation; }
var amortization;
if (options.AccountChangeInfo.Amortization == undefined) {
amortization = "";
} else { amortization = options.Amortization; }
var productType;
if (options.ProductChangeInfo.ProductType == undefined) {
productType = "";
} else { productType = options.ProductType; }
var productName;
if (options.ProductChangeInfo.ProductName == undefined) {
productName = "";
} else { productName = options.ProductName; }
var productDescription;
if (options.ProductChangeInfo.ProductDescription == undefined) {
productDescription = "";
} else { productDescription = options.ProductDescription; }
var productContract;
if (options.ProductChangeInfo.ProductContractualFeatures == undefined) {
productContract = "";
} else { productContract = options.ProductContractualFeatures; }
var productBehavior;
if (options.ProductChangeInfo.ProductBehavioralAssumptions == undefined) {
productBehavior = "";
} else { productBehavior = options.ProductBehavioralAssumptions; }
var evaluationBehavior;
if (options.ProductChangeInfo.ProductEvaluationBehavior == undefined) {
evaluationBehavior = "";
} else { evaluationBehavior = options.ProductEvaluationBehavior; }
var productStratification;
if (options.ProductChangeInfo.ProductStratificationRoutines == undefined) {
productStratification = "";
} else { productStratification = options.ProductStratificationRoutines; }
if (content.isreadonly == "True") {
alert("you have readonly access");
}
else {
var urlString = "env=" + content.env + "&allyid=" + content.userId + "&changeRequestID" + changeRequestID + "&changeControlObjective=" + changeControlObjective + "&changeControlSpecifics=" + changeControlSpecifics +
"&productAssociation" + productAssociation + "&amortization" + amortization +
"&productType" + productType + "&productName" + productName + "&productDescription" + productDescription +
"&productContract" + productContract + "&productBehavior" + productBehavior + "&evaluationBehavior" + evaluationBehavior +
"&productStratification" + productStratification;
return urlString;

I've been going through this a couple months ago. Per my extensive research there are 2 key sources for doing custom popup editing in Kendo in entire Internet ;) :
Custom editor template
I aslo created a simplified version of this for you here: http://jsbin.com/qudotag/
to cut the elements which can be expanded once you grap the key concepts. Note that this does not work fully as changes are not persisted. It is expected behaviour, as you would need to define the CRUD operations for the grid (what happens when save, cancel etc. is done).
How to deal with CRUD is available in the second source:
Crud with external form
Some heavy studying of these 2 along with going into some more depths of MVVM (which might be intimidating at first, but then really useful for much smoother work with Kendo) will get you going.
Edit: actually you could do with just first approach, which is easier and retain the state by refreshing the grid after cancel.

jquery remove entire div tag

I have an image upload script that creates a hidden div tag when an image is uploaded and should remove the image tag if somebody deletes the photo.
When somebody uploads it, it creates a tag like this:
<input type="hidden" id="hidden_image_1903180_620338339358jpg"
name="ad_image[]" value="image_1903180_620338339358.jpg">
The photo can be deleted with:
<a onclick="delete_media('image_1903180_620338339358jpg', 1, 1903180);">
Delete Photo</a>
The problem is what when somebody clicks delete, it doesn't remove the entire tag, it only removes the value like this:
<input type="hidden" id="hidden_image_1903180_620338339358jpg"
name="ad_image[]" value="">
How can I make it so the entire <div> ... </div> is removed?
The delete_media function is like this:
function delete_media_async(box_id, media_type, id) {
var file_name = document.getElementById('hidden_' + box_id).value;
var xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Browser does not support HTTP Request");
return;
}
var url = relative_path + 'file.php';
var action = url + '?do=remove&file_name=' + file_name + '&id=' + id;
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById('box_' + box_id).innerHTML = '';
document.getElementById('box_' + box_id).className = 'thumbnail_display_empty';
document.getElementById('hidden_' + box_id).value = '';
var nb_uploads = document.getElementById('nb_uploads_' + media_type).value;
nb_uploads--;
document.getElementById('nb_uploads_' + media_type).value = nb_uploads;
document.getElementById('btn_upload_' + media_type).disabled = false;
document.getElementById('item_file_upload_' + media_type).disabled = false;
document.getElementById('item_file_url_' + media_type).disabled = false;
document.getElementById('item_file_embed_' + media_type).disabled = false;
}
};
xmlHttp.open("GET", action, true);
xmlHttp.send(null);
}

$('#hidden_' + box_id).remove() will remove the input field. If the input field is enclosed in a div and you want to remove that:
$('#hidden_' + box_id).parent().remove()
Edit: this is using jQuery

Assuming that your hidden input has a div as its parent, you could remove that div using this:
var hidden_input = document.getElementById('hidden_' + box_id);
var parent_div = hidden_input.parentNode;
var parent_of__parent_div = parent_div.parentNode;
// now remove the parent div:
parent_of__parent_div.removeChild( parent_div );
Insert that in your function and it should remove your entire div.
I used only pure Javascript, since your code was the same way.

Selectors ignoring Ajax / Jquery loaded content

I'm working with a static json file. I'm using jquery to load my file into my store.
Everything loads fine.
At the side of my store, I have a categories menu, where I can filter my store items.
Because my store is items are dynamically generated, I dont seem to be able to select them with jquery.
Here is the ajax request:
<script>
$(function () {
var actionUrl = '#Url.Action("Items", "Home")';
$.getJSON(actionUrl, displayData);
function displayData(response) {
if (response != null) {
for (var i = 0; i < response.length; i++) {
$("#store").append("<div class='storeItem' data-price=" + response[i].PriceScale + " data-category=" + response[i].Cat + "> <img src='#" + response[i].Cat + "' class='itemImage' alt='" + response[i].Title + "'/><span class='itemTitle'>" + response[i].Title + "</span><span class='itemDesc'><p>" + response[i].Desc + "</p></span><span class='itemPrice'>"+ response[i].Price +"</span><a href='#' class='add2cart'>ADD TO CART</a>")
}
}
else {
$("#store").append("<h5>There was a problem loading the store content.</h5>");
}
}
});
</script>
Here is the code I have tride:
<script>
$(function () {
$( "nav#catagories ul li input").on("click", function () {
var a = $(this).prop("checked");
var b = $(this).attr("id");
if (a == true) {
$("div.storeItem").hide();
$(".storeItem").data("category", b).show();
}
});
});
</script>
I've also tried:
<script>
$(function () {
$(document).on("click","nav#catagories ul li input", function () {
var a = $(this).prop("checked");
var b = $(this).attr("id");
if (a == true) {
$("div.storeItem").hide();
$(".storeItem").data("category", b).show();
}
});
});
</script>
In both cases the script works up untill the div.storeItem hide.
Here is the HTML that is outputed:
<div class="storeItem" data-price="med" data-category="apparel">
<img src="#apparel" class="itemImage" alt="Shirt">
<span class="itemTitle">Shirt</span>
<span class="itemDesc">
<p>A Beatiful Shirt</p>
</span>
<span class="itemPrice">23.45</span>
ADD TO CART
</div>

Maybe your problem doesn't have to do anything with items being dynamically generated. Here $(".storeItem").data("category", b).show(); you are replacing category value with value stored in b, while it seems you want to select those which has category equal to b.
Maybe this will work or at least give you the direction:
$(function () {
$(document).on("click", "nav#catagories ul li input", function () {
var checked = $(this).prop("checked");
var category = $(this).attr("id");
if (checked) {
$(".storeItem").hide()
.filter(function () {
return $(this).data("category") === category;
}).show();
}
});
});

Is there something wrong with this jQuery?

Is there something wrong with this javascript and HTML? I am trying to make it so that when one of the .tagSuggestTag are clicked its value is inserted into the <input>, but for some reason it does nothing at all.
Javascript:
$('.tagSuggestTag').click(
function(){
var currentTags = $('#testTags').val();
var selectedTag = $(this).html();
if (currentTags == "") {
currentTags = selectedTag;
} else {
currentTags = currentTags + ", " + selectedTag;
}
$('#testTags').val(currentTags);
});
HTML:
<input type="text" id="testTags">
<ul>
<li class="tagSuggestTag">test</li>
<li class="tagSuggestTag">test2</li>
<li class="tagSuggestTag">test3</li>
</ul>
UPDATE:
See full HTML here: http://pastebin.com/NyCz669u
I figured out what was wrong, I didn't say that the content in the <ul> was added by AJAX so I had forgot I needed to pass the click throught .live()

Nothing wrong, the code works just great.
Make sure you wrap it in a $(document).ready:
$(function() {
$('.tagSuggestTag').click(function() {
var currentTags = $('#testTags').val();
var selectedTag = $(this).html();
if (currentTags == "") {
currentTags = selectedTag;
} else {
currentTags = currentTags + ", " + selectedTag;
}
$('#testTags').val(currentTags);
});
});

Chromedude: Make sure you're properly importing jQuery. Your code seems to work, look here:
http://jsfiddle.net/UqkKY/
Good luck,
Amit

The error must be somewhere else, your code works great : http://jsfiddle.net/C9WQ5/

There doesnt seem to be anything wrong with the JQuery code that you have presented. you just need to include $(document).ready() for initialization.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.tagSuggestTag').click(function () {
var currentTags = $('#testTags').val();
var selectedTag = $(this).html();
if (currentTags == "") {
currentTags = selectedTag;
} else {
currentTags = currentTags + ", " + selectedTag;
}
$('#testTags').val(currentTags);
});
});
</script>
Regards,
Junaid Mufti
PioneeringDev