Develop Reference

Converting Javascript Alert Into HTML

<script> $.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson", function(json)
{console.log(json); var newString = JSON.stringify(json, null, 0)var obj = JSON.parse(newString);alert(obj.features.length) })</script>
A helpful wrote some code which brought up an alert box on my website www.livehazards.com.
How do I convert this line of code into html so I can display that same sentence in my sidebar
Thanks in advance
alert("There have been " + obj.features.length + " Earthquakes in the last month");

With jQuery (since it looks like you're using jQuery there):
$("#elementID").text("There have been " + obj.features.length + " Earthquakes in the last month");
Where elementID is the ID of the element you want the text inside of.

ng-model doesn't update value when using JQuery datepicker

So I have two textboxes for the user to select a date and I am using JqQuery's datepicker UI to display a small calendar popup when the textbox is clicked. Now the problem is that when I click on the textbox, the calendar pops up, I select a date and then the textbox gets filled with that date and my scope variable in javascript also gets updated. However, in my HTML, the value of "From" date box doesn't get printed until I click on "To" date box. Below is my code:
home.html
<form name="myForm">
From Date:
<input type="text" id="dateFrom" ng-model="data.dateFromChosen" />
To Date:
<input type="text" id="dateTo" ng-model="data.dateToChosen" />
</form>
<p>You chose: {{ data.dateFromChosen }} and {{ data.dateToChosen }}</p>
script.js
$scope.data = {};
$("#dateFrom").datepicker({
onSelect: function(dateText) {
$scope.data.dateFromChosen = $("#dateFrom").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
alert("You chose " + $scope.data.dateFromChosen);
}
});
$("#dateTo").datepicker({
onSelect: function(dateText) {
$scope.data.dateToChosen = $("#dateTo").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
alert("You chose " + $scope.data.dateToChosen);
}
});
So this is what happens: I click on from date box and select a date. Then I get the popup saying that You chose 06/01/2016 which means the $scope.data.dateFromChosen = 06/01/2016. But it doesn't get displayed in my HTML. Then when I click on to date box, the value of dateFromChosen gets printed on HTML. Does anyone know why this happens and how to fix it? Thanks

Try adding $scope.$apply() to force angular to rerun digest cycle.
$scope.data = {};
$("#dateFrom").datepicker({
onSelect: function(dateText) {
$scope.data.dateFromChosen = $("#dateFrom").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
$scope.$apply();
alert("You chose " + $scope.data.dateFromChosen);
}
});
$("#dateTo").datepicker({
onSelect: function(dateText) {
$scope.data.dateToChosen = $("#dateTo").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
$scope.$apply();
alert("You chose " + $scope.data.dateToChosen);
}
});

Editable textbox in jQuery

I am working on Asp.net MVC4 application.
I have user's information and edit button in case any user wants to edit his/her information.
A user can edit his/her information by double clicking on it also.
Suppose if a username is there then user can edit it by clicking double on it. As soon as he clicks on UserName it is editable with its value in a textbox.
How can i make value editable with textbox?
I tried-
$(function(){
$('.double').on('dblclick',function(){
var val=$(this).html();
$(this).append('<input type="text" value=val/>');
});
});
But no success.
Fiddle

Try to use contentEditable attribute
$(".double").get(0).contentEditable = "true";
the contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).
DEMO1 |
DEMO2

Try like this:
Use .replaceWith():
$(document).on('dblclick', '.double' function() {
var val = $(this).text();
$(this).replaceWith('<input type="text" value="' + val + '" class="username" />');
});
And to revert back to div:
$(document).on('blur', '.username', function() {
var val = $(this).val();
$(this).replaceWith('<div class="double">' + val + '</div>');
});
Demo

$(function(){
$('.double').on('dblclick',function(){
var val=$(this).text();
$(this).append('<input type="text" value=\"' + val + '\" />');
});
});

You just need to concatenate val properly:
$(this).append('<input type="text" value="'+val+'">');
http://jsfiddle.net/asifrc/wKAvs/3/

rails 3 jQuery UI Datepicker want to enable only specific dates

I have a Registration model and form which uses a datepicker. I want the user to be only able to select dates which correspond to events (another model).
My problem is I can't find the right way to pass the event array to javascript.
this is in the controller:
#available_dates = Event.pluck(:start_time).as_json
this is in the view:
<script>
var availableDates = [<%= #available_dates.to_s.html_safe %>] ;
</script>
and this is the js:
function available(date) {
ymd = date.getFullYear() + "-" + ('0' + (date.getMonth()+1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
console.log(ymd+' : '+($.inArray(ymd, availableDates)));
if ($.inArray(ymd, availableDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$("#registration_date").datepicker({ beforeShowDay: available, dateFormat: "yy-mm-dd"});
I think I'm doing something wrong in the view since the js array seems to be empty looking at the console...
any help would be greatly appreciated

In the question comments you have mentioned #available_dates.to_s returns "[\"2013-01-05\", \"2013-02-02\", \"2013-03-02\"]". This itself will render the array on the page so no need to "box it up" again.
Try changing the following line:
var availableDates = [<%= #available_dates.to_s.html_safe %>] ;
to this:
var availableDates = <%= #available_dates.to_s.html_safe %>;
Hope it helps.
If it doesn't you are either clearing the value of #available_dates somewhere further in your code or #available_dates is not available in the context of your view. Have your tried stepping through the code using debugger;?

I would like to fill a jqmodal with data coming from a jquery post()

I have this code which is functional:
jQuery("#Zone__" + row + "__documents").find("td:eq(3)").mouseover(function(){
var text = jQuery("#Zone__" + row + "__documents").find("td:eq(3)").html();
if(text.indexOf("...") > 0){
jQuery.post("/_common/cfc/act_get.cfc?method=getNcas&returnFormat=json",
{document_id:doc_id,maxnum:100},
function(res,code){
alert(res);
},
"json"
);
}
});
Now, instead of an alert, I would like to open the jquery plugin 'jqmodal' with the data coming from the post inside it (res).
Could someone help me to achieve this ?
Thank you in advance,
Michel

Not familiar with that plugin but by a quick read of the documentation I would expect this to work (assuming you have included the required .js/.css resources:
<div class="jqmWindow" id="dialog"></div>
$(document).ready(function() {
$('#dialog').jqm();
jQuery("#Zone__" + row + "__documents").find("td:eq(3)").mouseover(function(){
var text = jQuery("#Zone__" + row + "__documents").find("td:eq(3)").html();
if(text.indexOf("...") > 0){
jQuery.post("/_common/cfc/act_get.cfc?method=getNcas&returnFormat=json",
{document_id:doc_id,maxnum:100},
function(res,code){
$('#dialog').html(res);
$('#dialog').jqmShow();
},
"json");
}
});
});