I am having a little bit of trouble with the src on this code:
A event updates the src that depends on a variable collected from the form, then the those .jpg´s can't be name changed so I need to stick with that. The problem is all of their names are in numbers and also some of them start with a zero, so using attr from string is not working properly:
var newSrc = "http://charal.unacar.mx/fotos/" +credencial+ ".jpg";
$('#foto').removeAttr("src")
$('#foto').attr('src', newSrc);
This credential would work: ######
This credential would not: 0#####
Where lays my problem?
i have one example for you might it will help you. This is not the exact code but by checking this you can do what you want.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('li[id^="step"]').click(function(){
var imagepath = jQuery(this).attr('dir');
jQuery('#ImageDiv').find('img').attr('src',imagepath);
});
});</script>
<style>
li{ cusrsor:pointer; padding:10px; }
</style>
<li id="step1" dir="images1.jpg">Step1</li>
<li id="step2" dir="images2.jpg">Step2</li>
<li id="step3" dir="images3.jpg">Step3</li>
<li id="step4" dir="images4.jpg">Step4</li>
<li id="step5" dir="images5.jpg">Step5</li>
<div id="ImageDiv"><img src="images1.jpg"></div>
weird thing it started working by it self this morning i don't know what i did, thank you for your help , the working code is this:
$("#credencial").keyup(function(e) {
if ($("#credencial:focus") && (e.keyCode === 13)) {
var credencial = $("#credencial").val();
console.log("\n credencial " + credencial);
$(':input', '#frm')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
$.post("http://localhost/Aplicaciones%20con%20bases%20de%20datos/consulta.php", {
credencial: credencial
}, function(json) {
$('#matricula').val(json.matricula);
$('#des').val(json.des);
$('#carrera').val(json.carrera);
$('#nombre').text(json.nombre + " " + json.apellido);
//var newSrc = "background:url('http://charal.unacar.mx/fotos/"+json.matricula+".jpg'); background-size:300px;";
var newSrc = "http://charal.unacar.mx/fotos/" +credencial+ ".jpg";
$('#foto').removeAttr("src")
$('#foto').attr('src', newSrc);
},
"json");
}
});
Related
I'm sorry if this is too simple of a question. I am trying to change all instances of & to and using the event-handler blur. I am seeming to get no changes on blur even if my function is simply
id.value = "Random test string";
so I am assuming this is a problem with the event handler itself. Any help would be appreciated, thanks.
I have the code for changing & commented out because I was checking to see if the function tied to the blur eventhandler was triggering at all, which it was not. This code also has an HTML file with a text box with an ID of textid
<script type="text/javascript">
//var for saving the string
var textvar;
//var for the texta area
var id = document.getElementById("textid");
id.addEventListener("blur", function() {
//textvar = id.value;
//textvar = textvar.replace("&", " and ");
//id.value = textvar;
textvar = "Correct!!";
id.value = textvar;
}, false);
</script>
This code is working fine and as expected:
<input type="text" id="textid" />
JS Code
//var for saving the string
var textvar;
//var for the texta area
var id = document.getElementById("textid");
id.addEventListener("blur", function() {
textvar = id.value;
textvar = textvar.replace(/\&/g, " and ");
id.value = textvar;
}, false);
You can find the working Pen here
You might want to consider this other approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function change(element) {
let textvar = element.value;
if (textvar.indexOf('&') !== -1) {
textvar = textvar.replace("&", " and ");
}
element.value = textvar;
}
</script>
</head>
<body>
<input type="text" onblur="change(this)" />
</body>
</html>
I hope this could help.
This is my code in jsfiddle:
http://jsfiddle.net/qn7JG/1/
function go_to(lat,lon,hinttext,balloontext,event){
var domElement =$(event.target);
domElement.addClass('selected');
console.log(domElement);
return false;
}
I'm want to add new classname, when I click by link.
How I can do it?
EDITED
I was in hurry on last post an I forget the most important addClass :)))
I hope you get the clue with jquery data params.
After a lot of testing I find a solution for you
html:
<div id="res">
<a href="" class="ff" data-lat="123 " data-long="321 " data-hinttext="some hit text !" data-ballon="balloontext" >textr123</a>
</div>
js:
$('.ff').live('click', function(e) {
e.preventDefault();
var lat = $('.ff').data('lat');
var long = $('.ff').data('long');
var hinttext = $('.ff').data('hinttext');
var balloontext = $('.ff').data('ballon');
alert(lat + long + hinttext + balloontext);
$(this).addClass('selected');
return false;
});
});
and the DEMO IS HERE
Try this
$(element_id).addClassName(newClassName);
It will simply Add the class name.It won't remove the previous class name.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).click(function(event) {
var text = $(event.target.nodeName).selector;
$(text).addClass("newclass");
});
</script>
<style>
.newclass{
color: #00ff00;
}
</style>
<p>hello</p>
<input type="text" id="amount"/>
I have here this code:
var photo = place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 });
var sideClick = jQuery("<a class=side_click href='#'></a>");
$(sideClick).html(place.name+place.rating);
$("#side_bar").append("<div class='elemenat'><div class='draggable'><img style='margin-left:3px; margin-top:5px;' src="+ photo +" width='46' height='42' /></div><div class='elementname'>").append(sideClick).append("</div></div>");
$(sideClick).on("click", function() {
markers[i].modalWindow_.getDetails(markers[i].place_);
});
}
and this code render:
<div id="side_bar">
<div class="elemenat">
<div class="draggable ui-draggable">
<img style="margin-left:3px; margin-top:5px;" src="https://lh6.googleusercontent.com/-T0_fJX5zza0/UdSnOaucZvI/AAAAAAAAAFc/gQhK3IbHJfY/w50-h50-s0/Small%2BLogo.png" width="46" height="42"></div>
<div class="elementname"></div></div>
<a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a>
How I must change js code to render html where <a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a> will be into <div class="elementname"></div> so
must be rendered like this:
<div class="elementname">
<a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a>
</div>
Don't create elements by raw HTML text. Instead, use jQuery's DOM manipulation capabilities. It makes things much simpler to understand, maintain and less error-prone.
So instead of something like:
var sideClick = jQuery("<a class=side_click href='#'></a>");
$(sideClick).html(place.name + place.rating);
It is better to do:
var sideClick = $("<a>").addClass('side_click').attr('href', '#')
.text(place.name + place.rating);
Besides being easier to structure and spot errors, you also get the added benefit of escaping the place.name + place.rating string.
Check the updated code using this approach (and with the end result you expected):
var photo = place.photos[0].getUrl({
'maxWidth': 50,
'maxHeight': 50
});
var elemenatDiv = $('<div>').addClass('elemenat');
var draggableDiv = $('<div>').addClass('draggable');
var logo = $('<img>').css({'margin-left': '3px', 'margin-top': '5px'})
.attr('src', photo).attr('width', 46).attr('height', 42)
var sideClick = $("<a>").addClass('side_click').attr('href', '#')
.text(place.name + place.rating);
var elementnameDiv = $('<div>').addClass('elementname');
elemenatDiv.append(draggableDiv.append(logo));
elemenatDiv.append(elementnameDiv.append(sideClick));
$("#side_bar").append(elemenatDiv);
$(sideClick).on("click", function () {
markers[i].modalWindow_.getDetails(markers[i].place_);
});
See demo fiddle here.
Append sideclick to the elementname div, not to the side_bar div
var element = $("<div class='elemenat'><div class='draggable'><img style='margin-left:3px; margin-top:5px;' src="+ photo +" width='46' height='42' /></div>");
var elementName = $(<div class='elementname'>);
element.append(elementName);
elementName.append(sideclick);
$("#side_bar").append(element);
Take a look at http://api.jquery.com/category/manipulation/.
You have a couple of different options. You could just change the order in which you append things, use the InsertAfter or InsertBefore methods, or my personal recommendation, putting everything onto the DOM and then using the wrap() function to wrap the side_click link with the div.
Something like
\\append everything
$('.side_click').wrap('<div class="elementname" />');
I'm about 1 day old in using jquery, and is currently having a nightmare with it. I alreadt spent half of my day trying to get rid of this error.
I did some reading after “googling” the error (sorry, Bing!) and discovered that most of these errors result from the jquery file not being properly loaded. Okay…that started to point me in the right direction but I still couldn’t figure out why it wasn’t pathing properly. I mean, I was doing as people said – I would drag the .js file into my designer and it would print out the proper path, but still the error shows.
Here's my exact code in my editor template (with the error):
#model bool
#{
string status = "Active";
string buttonValue = "Deactivate";
string hiddenValue = "true";
if (!ViewData.Model)
{
status = "Inactive";
buttonValue = "Activate";
hiddenValue = "false";
}
}
<div style="width:100px; float:left;">
<img id = "AD_Img" src = "/Content/themes/base/images/icon_#(status).png" alt = #(status) />
<label for = "AD_Img" id = "AD_Label" >#(status)</label>
</div>
<div style="width:100px; float:left;">
<input type="button" id = "AD_Button" value = #(buttonValue) style = "width:100px" onclick = "ChangeStatus()" />
<input id = "AcntStatus" type = "hidden" name = "AcntStatus" value = #(hiddenValue) />
</div>
and in the same cshtml file, the script goes this way:
<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js">
function ChangeStatus()
{
var ButtonVal = $("#AD_Button").val();
alert(ButtonVal);
if (ButtonVal == "Deactivate")
{
var stat = "Inactive";
var buttonVal = "Activate";
var HiddenValue = "false";
}
else if (ButtonVal == "Activate")
{
stat = "Active";
buttonVal = "Deactivate";
HiddenValue = "true";
}
$("#AD_Img").attr({src: "/Content/themes/base/images/icon_"+stat+".png", alt: stat});
$("#AD_Label").html(stat);
$("#AD_Button").val(buttonVal);
$("#AcntStatus").val(HiddenValue);
}
</script>
The debugger stops on the ChangeStatus function of the input element on the following line:
<input type="button" id = "AD_Button" value = #(buttonValue) style = "width:100px" onclick = "ChangeStatus()" />
i tried to debug it by using this in my function code:
function ChangeStatus()
{
var ButtonVal = document.getElementById("AD_Button").value;
alert(ButtonVal);
}
And it works properly, it returns the exact string that I'm looking for without that error, but why? What's wrong with my codes?
Please help me figure this out.
This:
$("#AD_Img").attr(src: "../../../Content/themes/base/images/icon_"+stat+".png", alt: stat);
forces an Syntax-error. It has to be:
$("#AD_Img").attr({src: "../../../Content/themes/base/images/icon_"+stat+".png", alt: stat});
Edit:
Also take a look at your <script>, you can't mix external JS and internal JS.
This:
<script type="text/javascript" src="../../../Scripts/jquery-1.5.1.min.js">
//your code
</script>
Has to be splitted into
<script type="text/javascript" src="../../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
//your code
</script>
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