I need to add my captcha in a pop up but there are some stuff that need to be handled.
first of all as i get the captcha from back-end its a php class,
and secondly i need to add the object in an external js script,
so far i assigned the object to a variable in my blade file as below:
<script>
var captchaVar = '{!! NoCaptcha::display() !!}'
</script>
and for pop up I have the following code in my script file
.confirm({
title: 'Confirm!',
content: '<div class="col-xs-12">\n' +
'<div class="cr-item">\n' +
'<label class="inl-blk">security code</label>\n' +
'<div class="inp area inl-blk">\n' +
+ captchaVar + '\n' +
'</div>\n' +
'</div>\n' +
'</div>',
buttons: {
confirm: function () {
$(this).submit();
},
cancel: function () {
}
}
});
I get NaN instead of captchaVar which should be
<div class="g-recaptcha" data-sitekey=""></div>
.confirm({
title: 'Confirm!',
content: '<div class="col-xs-12">\n' +
'<div class="cr-item">\n' +
'<label class="inl-blk">security code</label>\n' +
'<div class="inp area inl-blk">\n' +
captchaVar + '\n' +
'</div>\n' +
'</div>\n' +
'</div>',
buttons: {
confirm: function () {
$(this).submit();
},
cancel: function () {
}
}
});
There was a plus too much in your code. It then created the NaN instead of the expected result.
Related
HTML
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas">Youtube (iframe)</a>
This code line works but I want to add dynamically javascript code.
JS
'<li>' +
'<div class="list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class="list-right">' +
'<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/' + videoID + '"><h3>' + title + '</h3></a>' +
'<small>By <span class="Title">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description + '</p>' +
'</div>' +
'</li>' +
'<div class="clearfix"></div>' +
'';
When I clicked the link, I can't open with fancybox. It's open with new page and console says
Mixed Content: The page at 'https://www.youtube.com/embed/OFMSUI7PAS8'
was loaded over HTTPS, but requested an insecure image
'http://www.youtube.com/favicon.ico'. This content should also be served over HTTPS.
Update
I just used your pen and everything worked fine for me, you forgot to pass type: 'iframe' to fancybox, also you should put your js code in js section in codepen, here is screenshot
And here is the codepen's link: Click me
I am currently using a Twitch API that receives information about a specific channel then prepends it to the HTML document. The code that prepends the information is used over and over. I was wondering how exactly do you create a function that could avoid repetition and be called throughout the document?
The codepen can be found here: http://codepen.io/sibraza/pen/AXRRvq
Here is the JQuery Code thats gets used repeatedly:
$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")
Would something like this work:
function addThis(){
$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")
}
And then I can could call addThis() after each $.getJSON request.
It would work, but you need to pass name, logo and status as parameters to the function. You can also remove the redundant string concatenation:
function addThis(name, logo, status) {
$("#follower-Info").prepend('<div class="row"><div class="col-md-4"><img src="' + logo + '"></div><div class="col-md-4">' + name + '</div><div class="col-md-4">' + status + '</div></div>');
}
Then you can call it from within your $.getJSON handler:
addThis('Foo', 'bar.jpg', 'online');
I have a Kendo mvc Grid and using client template as a column and i wrote a javascript function in the template to return the script block but its seems not working and no javascript error. I also tried to write the script to the client template directly but its not working too.
//html in client template
.Columns(columns =>
{
columns.Template(e =>
{ }).ClientTemplate(
"<div class='table-responsive'>" +
"<table border='0' class='table' >" +
...................................
"</table>" +
"</div>"+
"#=AlignDiv(Id)#"
);
})
//javascript function to return a script block as a string
<script type="text/javascript">
function AlignDiv(Id) {
var result = "<script> $('.calDiv"+Id+"').map(function () {" +
"return $(this).Height();" +
"}).get()," +
"maxHeight = Math.max.apply(null, heights);" +
"$('.calDiv" + Id + "').height(maxHeight);" +
"alert('test')<\/script>";
return result;
}
Thanks a lot,
Dennis
In order to format Kendo Grid Column value with conditionally chosen action you can use one of the suitable examples below. For more information: How Do I Have Conditional Logic in a Column Client Template?
UI for Javascript:
{
field: "EmployeeName", type: "string", width: "55px", title: "Employee Name",
template: "#= GetEditTemplate(data) #"
}
UI for MVC:
...
columns.Bound(t => t.EmployeeName)
.Title("Status Name")
.Template(#<text></text>)
.ClientTemplate("#= GetEditTemplate(data)#").Width("55px");
...
Javascript Method:
<script>
//Change the color of the cell value according to the given condition
function GetEditTemplate(data) {
var html;
if (data.StatusID == 1) {
html = kendo.format(
//"<a class=\"k-button\" href='" + '#Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a> ",
"<span class='text-success'>" +
data.EmployeeName
+ "</span>"
);
}
else {
html = kendo.format(
//"<a class=\"k-button\" href='" + '#Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a> ",
"<span class='text-danger'>Cancel</span>"
);
}
return html;
}
</script>
Im trying to figure out which is the best method for sending data from a get request to a div. The issue that confuses me is to send it only to a div that is relative to the one calling the action. So when I click on the message_tab I want to send the data from the get request to the thread_load. however the thread_load is not a direct descendant of the message_tab yet a sibling to the message_flyout. How can i get this to send the data only to the sibling's thread_load? Here is what i have:
The message_tab and message_flyout are both a part of the appended message_block.
HTML
var el = $(
'<div class = "message_block">'+
'<div class = "message_tab" value = '+ user_id +' >'+ '</div>' +
'<div class = "message_flyout">' +
'<div class = "message_content">' +
'<div class = "message_header">'+ '</div>' +
'<div class = "conversation_scroll">' +
'<div class = "scroll_content">' +
'<ul class = "thread_load">'+ '</ul>'+
'</div>' +
'</div>' +
'<div class = "message_form">' +
"<form class = 'myForm' action='"+'http://localhost:8000/newMsg/'+user_id+"' method= 'POST' accept-charset= 'UTF-8'>" + "<input name='_token' type='hidden' value='lbaqsTEePfIMYguGnsMvEDt8ExHly3dLKHtAu18c'>" +
'<div class = "message_form">' +
"<input class='input-mini' placeholder='Type a message...' name='body' type='text'>" +
'</div>'+
"</form>" +
'</div>'+
'</div>'+
'</div>'+
'</div>');
Javascript:
$(document).on('click', '.message_tab', function(){
var user_id = $(this).attr('value');
var elem_data = $(this).siblings('.message_flyout');
var data_transfer = $(elem_data).children('.thread_load');
console.log(data_transfer);
base_url = 'http://localhost:8000/thread';
$.get(base_url + '/' + user_id , function (data) {
$(data_transfer).closest('.thread_load').html(data);
});
$(this).siblings('.message_flyout').toggle();
$(this).parent('.message_block').css('width', '258px');
});
You should do:
$(document).on('click', '.message_tab', function () {
var user_id = $(this).attr('value');
var elem_data = $(this).siblings('.message_flyout').find('.thread_load');
console.log(data_transfer);
base_url = 'http://localhost:8000/thread';
$.get(base_url + '/' + user_id, function (data) {
elem_data.html(data);
});
$(this).siblings('.message_flyout').toggle();
$(this).parent('.message_block').css('width', '258px');
});
.closest traverse upwards and return the first matching element. Whereas, .find traverse inside the node giving all the matching element.
Note:
And you should not use value as an attribute for a div, it is not valid thingy. Always use data-whatever and fetch it using either .data('whatever') or .attr('data-whatever').
Something like this perhaps?
$(document).on('click', '.message_tab', function(){
var user_id = $(this).attr('value');
var data_transfer = $(elem_data).children('.thread_load');
var base_url = 'http://localhost:8000/thread';
// Target thread load here
var $thread_load = $(this).next('.message_flyout').find('ul.thread_load');
$.get(base_url + '/' + user_id , function (data) {
$thread_load.html(data);
});
$(this).siblings('.message_flyout').toggle();
$(this).parent('.message_block').css('width', '258px');
});
.message flyout comes directly after .message_tab, so if we move to that element then use .find which is the fastest way to retrieve thread load you should be good. I haven't tested this however.
I'm a C/C++ programmer and new to javascript. The following code is giving me grief and I don't really know what I'm doing wrong. I've searched and can't find where others have had the same problem.
I've taken my project and cut out my problem code to try and understand and fix it. The short version is when I click my "Enter data" image on an HTML page, it creates a dialog box with a form and table of inputs (with default data) and I enter/change some data. When I click the dialog box save button, it goes through JSON.stringify($('#form').jsonify()) to collect the form data and brings up an alert box showing the data that I entered. This part works fine.
If I click the "Enter data" image again, the dialog box comes up and I enter/change new data. When I click the dialog box save button, it brings up an alert box showing the previous data that I saved (in this case showed in the alert box).
No matter how many times I try it, it always returns the data form the very first entry and never any of the new(er) data.
What am I doing wrong?
Some references:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/test.js"></script>
<link href="~/Content/jquery/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
My HTML code
<div>
<img id="additem"
Title="Add Item"
onclick="addstuff(this)"
OnMouseOver="this.style.cursor='pointer';"
OnMouseOut="this.style.cursor='default';"
src="~/images/Sign_Add_Icon_32.png" />
</div>
My test.js file.
$.fn.jsonify = function (options) {
var settings = $.extend({
stringify: false
}, options);
var json = {};
$.each(this.serializeArray(), function () {
if (json[this.name]) {
if (!json[this.name].push)
json[this.name] = [json[this.name]];
json[this.name].push(this.value || '');
} else
json[this.name] = this.value || '';
});
if (settings.stringify)
return JSON.stringify(json);
else
return json;
}
function addstuff(obj) {
var strHtml = "";
var strHtml = "<div class=\"container\" id=\"addphonedlg\" title=\"Add Phone\" overflow:\"auto\">"
+ "<p>Please enter the following information.</p>"
+ "<form id=\"form\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 1" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data1" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 1 data" + "\" />" + "</td></tr>"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 2" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data2" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 2 data" + "\" />" + "</td></tr>"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 3" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data3" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 3 data" + "\" />" + "</td></tr>"
+ "</table></form>"
+ "</div>";
$(strHtml).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert("Add information " + JSON.stringify($('#form').jsonify()));
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
}
}).dialog('open');
}
This seems to be a known problem of forms in ui dialogs being cached. But you need to remove the form onClose of the dialog.
I added close event function to your code. You should be fine now.
$(strHtml).dialog({
autoOpen: false,
width: 400,
modal: true,
close: function( event, ui ) {
$('#form').remove(); // this where the problem is
},
buttons: {
Save: function () {
alert("Add information " + JSON.stringify($('#form1').jsonify()));
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
}
}).dialog('open');
}