Passing javascript variable to jquery - javascript

Im facing some problems what i cannot solve for days now.
I wish to get the Position of an element which is have a uniqe ID
Code:
function e_div_show(sid,ctd)
{
var b_fos="t"+sid;
var pos = $(b_fos).offset();
alert(pos.top + ' ' + pos.left);
}
HTML Code:
<?php
...
echo ('<td ID="t'.$array['S_ID'].'">...</td>
...
?>
this is not working..
if i replace the ID to "b_fos" and i comment out the //var b_fos="t"+sid; it working fine.. however in this case the TD ID wont be unique becouse of the php array which generating the code.
Any help please how to define the pos correclty with a javascript variable?

Try changing:
var b_fos = "t" + sid;
To
var b_fos = "#t" + sid;

Try this code you have miss '#' before
function e_div_show(sid,ctd)
{
var b_fos="#t"+sid;
var pos = $(b_fos).offset();
alert(pos.top + ' ' + pos.left);
}

Related

Dynamically adding jquery into div

Apologies, I know there are a number of questions along the same lines and they've helped me a lot but I'm still falling at the final hurdle.
I'm trying to dynamically add some jQuery into a div using this:
function displayPage(position,page){
// position arrives looking something like '#pageW20' - ignore quotes
// page arrives looking something like 'pages/benefits.html' - ignore quotes
var pos = position.substring(1); // New variable without the '#' that appears in the first character of position
var myDiv = document.getElementById(pos); // Find the div, typically equates to a div id similar to 'pageW20'
var str = "<script type='text/javascript'>";
/* Build the script which typically looks like this:-
<script type='text/javascript'> $( "#pageB15" ).load( "pages/benefits.html", function(){openLetter()}); </script>
*/
str += '$( ' + '"' + position + '"' +' ).load(' + page + ', function(){openLetter()})';
str += '<';
str += '/script>';
alert(str); // Works to here, alert churns out expected output.
//$('"' + position + '"').append(str); // Tried this, end up with syntax error
myDiv.appendChild(str); // This gives Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
}
The last two lines show the errors I'm getting trying 2 different methods. Any clues.
Thanks appreciate your interest.
Update: Here's what I get in my console at the alert() stage which is what I was hoping for -
<script type='text/javascript'>$( "#pageW20" ).load("pages/work.html", function(){openLetter()})</script>
Update: Now solved, thanks #gaetano. My code now looks like:
function displayPage(position,page){
var pos = position.substring(1);
var myDiv = document.getElementById(pos);
myDiv.innerHTML=""; // Remove existing div content
/* Build the script which typically looks like this:-
<script type='text/javascript'> $( "#pageB15" ).load( "pages/benefits.html", function(){openLetter()}); </script>
*/
var str = '$( ' + '"' + position + '"' +' ).load(' + page + ', function(){openLetter()});';
console.log(str);
var s = document.createElement('script');
s.type = 'text/javascript';
s.text = str;
myDiv.appendChild(s);
}
I cannot understand why you are trying to create and append a script on the fly like described in the comments.
The error you get is:
myDiv.appendChild(str);
But appendChild requires as first parameter a node.
So if you need to continue in this direction you have to create a script node element and after you can append it to the html like in my example:
function displayPage(position, page) {
var pos = position.substring(1); // New variable without the '#' that appears in the first character of position
var myDiv = document.getElementById(pos); // Find the div, typically equates to a div id similar to 'pageW20'
var str = '$( ' + '"' + position + '"' + ' ).load("' + page + '", function(){openLetter()})';
var s = document.createElement('script');
s.type = 'text/javascript';
s.text = str;
myDiv.appendChild(s);
}
displayPage('_XXX', 'page');
console.log(document.getElementById('XXX').outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="XXX"></div>
The str variable you're passing isn't a Node, it's a String. Try first using:
var line = document.createElement("p");
line.innerHTML = str;
myDiv.appendChild(line);

hyperlink alternate text replacement

At the moment i've got this code, which replaces a span class whith a hyperlink. The hyperlink includes a abbreviation and the alternate texxt for the hyperlink includes the same abbreviation. Now what i want to do is, to somehow replace the second abbreviation in the alternate text of the hyperlink. So that there isn't "click here to visit + 'name of'abbreviation" but instead an alias. So if the abbreviaton is ggl, the alias should be google. But the hyperlink shouldn't use this alias. Can sb help me? thx
(function($) {
var number = "1234567";
function linkBuilder(abbreviation) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation + "</a>";
}
function linkBuilder2(abbreviation2) {
return "<a href='https://www.test.com/" + abbreviation2 + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation2 + "</a>";
}
jQuery(document).ready(function() {
var fl = $(".first-link");
if (fl.length > 0) {
fl.html(linkBuilder(fl.data("abbreviation")));
}
var sl = $(".second-link");
if (sl.length > 0) {
sl.html(linkBuilder2(sl.data("abbreviation2")));
}
});
})(jQuery);
Here is a working jsfiddle:
https://jsfiddle.net/e7qdx031/1/
linkBuilder() should be re-usable, as kalsowerus mentioned.
Another thing that should be mentioned is that the following code returns a collection of elements, not just a single element.
var fl = $(".first-link");
...
var sl = $(".second-link");
The code you have provided will not function properly if there are multiple .first-link classes on the page. So instead I would iterate over each element using $.each() and run the linkBuilder() function on them individually.
As for the linkBuilder function I would modify it to accept the element object, then read the properties to retrieve alias and name. Full name is something that you seemed to indicate you need, but was not present in the code.
(function($) {
var number = "123456";
function linkBuilder($obj) {
var abbreviation = $obj.data('abbreviation');
var name = $obj.data('name');
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + name + "</a>";
}
jQuery(document).ready(function() {
$('.first-link, .second-link').each(function(index, obj){
$(obj).html(linkBuilder($(obj)));
});
});
})(jQuery);
What you probably want is something like this:
function linkBuilder(abbreviation, alias) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + alias + "</a>";
}
Just pass the display-name you want for your link as the second argument.

using jQuery .each on a javascript variable before appending to screen

If i have some basic html that is saved in a variable $html and I want to use an each (jQuery) statement on it before appending to the page and I want to look in this string for each instance of a class and ammend $html.
This is what I was thinking...
$('.flipper', $html).each(function(){
var frontContent = $(this).find('.front > .content');
var backContent = $(this).find('.back > .content');
$(this).append('<div class="background"><div class="content">' + frontContent.html() + '<div class="back">' + backContent.html() + '</div></div></div>');
console.log($html);
});
this doesnt run - i guess because i am trying to update an element on the page rather than one stored in a variable
can I still use the each ?
Cheers
Looks like $html is a string, not a dom element reference... in that case changes made to the elements in the loop will not be reflected in the original string.
Try something like
var html = '';
var $html = $(html);
$('.flipper', $html).each(function () {
var frontContent = $(this).find('.front > .content');
var backContent = $(this).find('.back > .content');
$(this).append('<div class="background"><div class="content">' + frontContent.html() + '<div class="back">' + backContent.html() + '</div></div></div>');
});
console.log($html[0].outerHTML);
Demo: Fiddle
Try this:
$($html).find('.flipper').each(....);

Can't work out why this function doesn't work. Loading content via ajax/jquery and it doesn't load

It's probably something stupid I've done but I can't work it out. Heres the function:
function loadguides(softwareid){
var $softwareid = $('#'+softwareid);
$softwareid.load("devices/" + phoneid + firmwareid + ".html " + "#" + softwareid);
}
loadguides('ms1');
loadguides('ms2');
loadguides('ms3');
loadguides('ms4');
loadguides('ms5');
loadguides('ps1');
loadguides('ps2');
loadguides('ps3');
If you need more of the code just ask which parts. To give a comparison, this works:
loadtab('mac');
loadtab('pc');
loadtab('linux');
loadtab('safari');
loadtab('redsn0wM');
loadtab('redsn0wP');
loadtab('pwnagetool');
loadtab('limera1n');
loadtab('greenpois0n');
loadtab('spiritM');
loadtab('spiritP');
loadtab('sn0wbreeze');
function loadtab(tab){
var $tab = $('#'+tab);
$tab.hide();
$tab.load("devices/" + phoneid + firmwareid + ".html " + "#" + tab,
function(){
var tabcontent = $("#"+tab).text();
if (tabcontent == "1"){
$tab.show();
}
else{
$tab.hide();
}
});
}
It's not clear on what the problem is. Are you getting an error? Does it just simply not load?
It does not appear that you have phoneid or firmwareid JS variables defined.
BTW, you can post your full code on: http://jsfiddle.net
I would install/use Firebug and look at the console to determine if there is a javascript or network error.
should your function declaration go above where you are calling it? For example:
function loadtab(tab){
var $tab = $('#'+tab);
$tab.hide();
$tab.load("devices/" + phoneid + firmwareid + ".html " + "#" + tab,
function(){
var tabcontent = $("#"+tab).text();
if (tabcontent == "1"){
$tab.show();
}
else{
$tab.hide();
}
});
}
loadtab('mac');
loadtab('pc');
loadtab('linux');
loadtab('safari');
loadtab('redsn0wM');
loadtab('redsn0wP');
loadtab('pwnagetool');
loadtab('limera1n');
loadtab('greenpois0n');
loadtab('spiritM');
loadtab('spiritP');
loadtab('sn0wbreeze');

term_exists not working in Javascript

I finally got my back-end to create the wheel codes from the checked taxonomies in the add custom post admin area.
Now, I want to add that tire code to the wheel_type taxonomy.
The below code ran great, until I added the if statement under //Add code to Taxonomy
Now nothing is working, but I get nothing in the error console.
I figure it must be a stupid syntax mistake - can anyone help me out?
Or am I missing something else?
jQuery('#replace').click(function(){
//get tire code and name
var code = jQuery('input[name="tire_code"]').val();
var name = jQuery('input[name="tire_name"]').val();
var bname = jQuery('input[name="tire_bname"]').val();
alert(code + " + " + name + " + " + bname);
//get tire brand
var tirebran = jQuery('#tire_brandchecklist').find(":checked").parent('label').text();
tirebran = jQuery.trim( tirebran );
//Add code to Taxonomy
if( term_exists( code, wheel_type ){
continue;
}
else
{
wp_insert_term( code, wheel_type );
}
//update title
var title = code + ' : ' + name + ' tires';
if(tirebran!=''){
title += ' with ' + bname + ' letters';
}
jQuery('input[name="post_title"]').focus().val(title);
});
//-->
</script>
unless i've misunderstood your question, you're trying to call wordpress methods via javascript.
term_exists() and wp_insert_term() are PHP methods within the wordpress code, not accessible directly via Javascript (unless you have written interfaces to them).
continue doesn't make any sense there; just check for !term_exists... and call wp_insert_term when it doesn't exist.
if (!term_exists(code, wheel_type)) {
wp_insert_term(code, wheel_type);
}
The continue statement is for continuing loops from the top of the loop; it does not stand on its own.

Categories