Develop Reference

How to style oembedded tweet?

I have this script (using oembed):
<script type='text/javascript'> $(document).ready(function() {
$("#resolve").click(function() {
var url=$("#retweet_form_url").val();
if (url=="") {
$(".controls").addClass("error");
}
else {
$("#embed").show();
$.ajax( {
url: "https://publish.twitter.com/oembed?maxwidth=840&maxheight=1000&url="+url, dataType: "jsonp", success: function(data) {
$("#embed").html(data.html);
}
});
}
})
})
</script>
<input type="text" id="retweet_form_url" />
<button id="resolve">Get</button>
<div id="embed"></div>
It works, user input url of tweet and it tweet shows up, but I want to make it with no borders.. How?

jQuery: how to put a mouseover event on tag select generated by ajax

In my page I have a select menu inside:
<div class="div1" style="float: left">
<strong>Cerca Prodotto</strong>
<br/><br/>
<form class="form">
<div><input type="text" id="tags" value=""></div>
<div>
<img class="btnaggiungi" src="http://lainz.softwebsrl.it/img/carrello.jpg" alt="Aggiungi" id="add_newProduct"/>
</div>
</form>
</div>
which is controlled and generated by the following jQuery:
$( "#tags" ).autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
url: "http://lainz.softwebsrl.it/ajax/autocompletecibo",
dataType: "json",
crossDomain: true,
type : 'post',
data:
{
valore: request.term,
},
success: function (data)
{
response(data);
console.log(data);
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, data ) {
var selezione = data.item.label;
$.ajax({
type : 'POST',
url: "http://lainz.softwebsrl.it/ajax/autocompletecibolista/valore/"+selezione,
dataType: "html",
success: function(msg){
$(".div2").html(msg);
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare...1");
}
});
}
});
Now I need to add a mouse over event on every entry. I mean that when the user puts the mouse over an opion of the list, there are some other js code to be executed which, in the end, will show a map. How shall I add it?
UPDATE
This could be a solution:
<script>
$(document).on("mouseenter", "li", function() {
$(".div5").show();
});
$(document).on("mouseleave", "li", function() {
$(".div5").hide();
});
</script>

You have to bind the event to the static elements and then delegate it to your dynamically generated ones. I mean if <div class="div1"> is the container for your dynamically generated HTML, you have to do something like this:
$('.div1').on('mouseover','.div2 .dynamicallyGeneratedList',function(){
console.log('do something');
})

Your question is'nt quite entirely. How does your data response look like? Maybe does this help you.
$(data).each(function() {
var $li = $("<li>"+data+"</li>");
$li.bind("mouseover", showMap);
$("ul").append($li);
});
function showMap() {
// show map
}

Prevent Default Action on Hyperlink to Run AJAX

I have a hyperlink on my page
<a id="delete-file" href="">
<img border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
</a>
I'm trying to prevent the default action when it is clicked and run an AJAX function instead. For some reason when I click it, it just brings me to the top of the page and my my AJAX is not fired. No console error messages either.
Can someone help me with my syntax?
<!---Script to upload file link --->
<cfoutput>
<script>
$(document).ready(function() {
$('##upload-file').submit(function(event){
event.preventDefault();
$.each($('##upload')[0].files, function(i, file) {
var formData = new FormData();
formData.append('file-0', file);
ajaxUpload(formData);
});
$('##delete-file').click(function(event){
event.preventDefault();
ajaxDelete();
});
function ajaxUpload(formData) {
console.log("ajaxUpload function called");
$.ajax({
type: 'POST',
url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function(data) {
console.log("File successfully sent.");
$("##addFileResponse").append( "File successfully sent." );
PopulateFileUploadDiv();
},
error: function(data) {
console.log(data);
}
});
}
});
function ajaxDelete() {
console.log("ajaxDelete function called");
$.ajax({
type: 'POST',
url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#",
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function(data) {
console.log("File successfully deleted.");
$("##addFileResponse").append( "File successfully deleted." );
PopulateFileUploadDiv();
},
error: function(data) {
console.log(data);
}
});
}
});
</script>
</cfoutput>

$(document).on("click","##delete-file",function(e){
ajaxDelete();
e.preventDefault();
});
Try placing any div wrapping the ##delete-file (loaded before the DOM) that you might have in place of the document.
$(document).ready(function(){
$("#wrapper-div").on("click","##delete-file",function(e){
ajaxDelete();
e.preventDefault();
});
});
If you can't get it to work with the ID because of Cold Fusion, try adding a class to the link:
<a id="delete-file" href="" class="delete-btn">
And then try
$(document).ready(function(){
$(".delete-btn").on("click",function(e){
ajaxDelete();
e.preventDefault();
});
});

This is a very long shot but I think the problem is that you are not escaping all of your hash signs. Notice at your urls:
url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#"
url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",
You are escaping the hash sign for your ids but not there so I'm guessing your server is malforming your Javascript, creating an error and preventing the code from executing. You should try double-pounding them too.
If it's truly an issue with the Id, then maybe you can use other jQuery Constructor like this:
jQuery ( element )
$(document.getElementById('delete-file'));

Ok, so my assumption of the error relating to the fact that my AJAX calls lost their uniqueness because the code for the AJAX was outside of my was correct. I basically had to ajust my code so that I my AJAX code was within my tag, but more importantly, that the functions were giving unique names and were passing the unique data from my output.
Here is my modified and correct code:
<cfoutput>
<table width="50%" border="0" cellpadding="5">
<tr bgcolor="##CCCCCC">
<td width="8%"> </td>
<td width="67%" ><strong>Filename</strong></td>
<td width="18%" ><strong>Actions</strong></td>
</tr>
<cfloop query="filecheck">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#" class="btnav" onmouseover="style.backgroundColor='##FFFFCC';"
onmouseout="style.backgroundColor='###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#'">
<td><img src="images/Paper-Clip-icon.png" alt="Attachment" /><br /></td>
<td>#filecheck.file_path#
(Record-ID #ID#)
</td>
<td>
<a id="delete-file#ID#" class="delete-btn#ID#" href="">
<img border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
</a>
<!---Script to upload file link --->
<script>
$(document).ready(function(){
$(".delete-btn#ID#").on("click",function(e){
// ajaxDelete();
console.log("Start of prevent.");
e.preventDefault();
console.log("Calling AJAX with id of #ID#.");
ajaxDelete#ID#();
});
function ajaxDelete#ID#() {
console.log("ajaxDelete function called");
$.ajax({
type: 'POST',
url: "actionpages/delete_attachment.cfm?fileID=#filecheck.ID#&ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#&techID=#url.techID#&TT=#type.TT#",
data: #filecheck.ID#,
cache: false,
contentType: false,
processData: false,
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function(data) {
console.log("File successfully deleted.");
$("##addFileResponse").append( "File successfully deleted." );
PopulateFileUploadDiv();
},
error: function(data) {
console.log(data);
$("##addFileResponse").append( "Something went wrong." );
}
});
}
});
</script>
</td>
</tr>
</cfloop><br />
</table>
</cfoutput>

Form doesn't submit form data populated via AJAX

I'm having the following problem with my code below: when 'productSearchResult' is populated via AJAX, the contents are not included when the form is submitted using the 'Add' button.
UPDATE 1:
Strangely it is working, but only the first time productSearchQuery is populated. Any subsequent populations of productSearchQuery run into the problem above.
HTML:
<form name="productSearch">
<input name="productSearchQuery" type="textbox">
</form>
<form name="productAdd">
<div id="productSearchResult"></div>
</form>
<a>Add</a>
<div id="addResult"></div>
HTML loaded via AJAX into productSearchResult:
<input type="radio" name="productId" value="3944">
<input type="radio" name="productId" value="3946">
<input type="radio" name="productId" value="3999">
JS:
<script type="text/javascript">
function postData(type, url, data, targetDiv) {
$.ajax({
type: type,
url: url,
data: data,
success: function(response) {
$(targetDiv).html(response);
},
error: function() {
alert('Error! Plese try again.');
}
});
return false;
};
$(document).ready(function() {
$('input[name=productSearchQuery]').keyup(function() {
// submit the form
postData('POST', 'search.php', $('form[name=productSearch]').serialize(), '#productSearchResult');
});
$('a').click(function() {
postData('POST', 'add.php', $('form[name=productAdd]').serialize(), '#addResult');
});
});
</script>
UPDATE 2:
OK, first off I want to apologise for not including this code in my original post, I honestly didn't suspect it could be the cause. I've fixed my code after rolling back the JS which is returned with the radio buttons. I can't understand why the new JS causes the problem above, whereas the old JS does not.
Here's the old JS that works fine:
$('tr.product input[type=radio]').hide();
$('tr.product').mouseover(function() {
$(this).addClass('blueHover');
}).mouseout(function() {
$(this).removeClass('blueHover');
});
$('tr.product').click(function(event) {
$('tr.product').removeClass('blueChecked');
$(this).closest('tr').addClass('blueChecked');
if (event.target.type !== 'radio') {
$(':radio', this).attr('checked', true);
}
});
Here's the new JS that causes the problems above:
$('tr.product input[type=radio]').hide();
$(document).on({
mouseenter: function () {
$('td', $(this).parent()).addClass('blueHover');
},
mouseleave: function () {
$('td', $(this).parent()).removeClass('blueHover');
},
click: function (event) {
$('tr.product').removeClass('blueChecked');
$(this).closest('tr').addClass('blueChecked');
if (event.target.type !== 'radio') {
$(':radio', $(this).parent().parent()).attr('checked', false);
$(':radio', $(this).parent()).attr('checked', true);
}
}
}, 'tr.product td');

Try this instead
<script type="text/javascript">
function postData(type, url, data, targetDiv) {
$.ajax({
type: type,
url: url,
contentType: 'application/json',
data: data,
success: function(response) {
$(targetDiv).html(response);
},
error: function() {
alert('Error! Plese try again.');
}
});
return false;
};
$(document).ready(function() {
$('input[name=productSearchQuery]').keyup(function() {
// submit the form
postData('POST', 'search.php', $('form[name=productSearch]').serialize(), '#productSearchResult');
});
$('a').click(function() {
postData('POST', 'add.php', $('form[name=productAdd]').serialize(), '#addResult');
});
});
</script>

You have to use jQuery on method.
$('body').on('click', 'a', function() {
postData('POST', 'add.php', $('form[name=productAdd]').serialize(), '#addResult');
});

onkeypress event not work properly in Mozilla Firefox Web Browser

I have a html table with onkeypress event Like :
<tr onclick="RowOnClickEvent();" class="PikerBodyRowStyle" onkeypress="return Test(event);">
<td class="PikerCellStyle" style="width:10px; text-align:left"> <input type="checkbox" value="#item.AccountHeadID" name="chkBox" /> </td>
<td class="PikerCellStyle" style="width:150px; text-align:left">#Html.DisplayFor(modelItem => item.AccountCode)</td>
<td class="PikerCellStyle" style="width:160px; text-align:left">#Html.DisplayFor(modelItem => item.AccountHeadName)</td>
</tr>
And my JavaScript function like :
function Test(e) {
// debugger;
if (e.keyCode == 13) {
if (SelectedItemID > 0) {
$.ajax({
type: "GET",
dataType: "json",
url: '#Url.Action("GetData", "ChartsOfAccount")',
data: { id: SelectedItemID },
contentType: "application/json; charset=utf-8",
success: function (data) {
alert(data);
},
error: function (xhr, status, error) {
alert(error);
}
});
}
return false;
}
}
its work good in Internet explorer but Mozilla Firefox not work.

Change
onkeypress="return Test(e);"
to
onkeypress="return Test(event);"

You cannot give a javascript action to a tablerow. Instead you can use some button or link to create your action. You can also put it in td tag. javascript actions works there.