Using document.getElementById() inside a function - javascript

I have this code:
<div id="com_22">
<a onclick="delete(22);">delete entry</a>
</div>
and the javascript code:
function delete(url){
var tupu = document.getElementById("#com_"+url+"");
alert(tupu);
}
the problem is I'm having a null alert
I want to get the id
document.getElementById("#com_22");
How I can solve it
update
this is my code:
function confirmDel(url){
$(document).ready(function(){
$.ajax({
type: 'POST',
url: '/files/assets/php/ajax/blog-stream.php?act=del',
data: 'url=' + url ,
success: function(h){
var status = h.status
if (status == "si" ) {
$("#com_"+url+"").fadeOut("slow");
}
}
});
});
}
the code excecutes so well except for the id didnt fade out
$("#com_"+url+"").fadeOut("slow"); <--- no working

See :: getElementById(), that should have been:
function delete_something(url){
var tupu = document.getElementById("com_"+url);
alert(tupu);
}
btw, try avoiding use of js pre-defined names as function name see:: delete

Don't include the hash when you're selecting by id. You're not using jQuery or querySelector.
var tupu = document.getElementById("com_"+url);
There is also no need to concatenate the empty string there at the end so I removed it.

Remove the '#' from within the bracket.

The function getElementById gets the element ID as a string, not a CSS-style selector. Change to:
var tupu = document.getElementById("com_"+url);

As can be extracted by javascript levels:
[{"file": ". m3u8" in this page: http: //ivm.antenaplay.ro/js/embed_aplay_fullshow.js? id = 6eI6sLVBfOL

Related

Use value from Input and set it to URL

I have an Input that takes a name, and I want to take that name from input and set the url accordingly .. Here's the code, and an example
.form-group
%input.form-control{'type':'name','placeholder':'Name',id:'wisher_name'}
%input.form-control{'type':'name','placeholder':'Special Message'}
%button.btn.btn.btn-success{'id':'wisher_btn'} Wish
Javascript
$(document).ready(function() {
$(document).on('click', '#wisher_btn', function() {
var e = document.getElementById("wisher_name");
var diwali_wisher = e.value
location.replace("localhost:3000" + "/loccasion/diwali/" + diwali_wisher);
});
});
But the last statement is never reached, I don't know why?
This is a very basic problem, but I am a beginner so need some help.
You need to use a full url, like https://stackoverflow.com.
Add the http protocol.
diwali_wisher= Input parameter name in receiver function
diwali_wisher = e.value
location.replace("localhost:3000" + "/loccasion/diwali?diwali_wisher=" + diwali_wisher);

Passing a jquery variable

i'm having trouble with the following jquery code
$this->registerJs(
'jQuery(document).ready(function($){
$(".member").on("change",function(){
var id = $(this).attr("id");
// alert(id);
var n = $(this).val();
// alert(n);
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation','id'=>'+id'])
.'&name="+id)
});
});'
);
i want the ajax link to be like this http://192.168.1.4/~user/church/backend/web/death/stl_set_relation?id=20&name=1
but with my code i'm not able to pass value of id correctly.
what my code creates is the following url
http://192.168.1.4/~user/church/backend/web/death/stl_set_relation?id=%2Bid&name=20
i also tried like this
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation','id'=>'"+id"'])
.'&name="+id)
but it didn't give me the desired result
how can i pass the value of id correctly?
try like this may be it will work..
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation','id'=>'"+id+"'])
.'&name="+n);
You can do this in another way that is by using yii\helpers\Url class.
For example :
$this->registerJs(
'jQuery(document).ready(function($){
$(".member").on("change",function(){
var id = $(this).attr("id");
// alert(id);
var n = $(this).val();
// alert(n);
$.post( "'.Url::toRoute('death/stl_set_relation').'", { id: id, name: id });
});
});'
);
I solved the problem using following code
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation'])
.'?id="+id+"&relation="+n)
Try this line
$.post("<?php echo \Yii::$app->getUrlManager()->createUrl([\'death/stl_set_relation\']) ?>?id="+id+"&name="+id).
Whatever you are writing in single quotes here will be printed as it is in the JS. You are printing + sign as it is here. Also you are using id inside PHP scope which should not be the case.

How do I Call a URL Action from Javascript?

I am doing:
var url = '#Url.Action("Attachments", "Transactions")';
url += '/?id=' + 3201;
$("#attachments").load(url);
However, on load it doesn't do anything. Am i missing something?
I essentially want to call something similar to:
#{Html.RenderAction("Attachments", "Transactions", new { id = 3301 });}
I get the following error on console:
http://server:54137/Transactions/#Url.Action(%22Attachments%22,
You must be using an external JavaScript file which will not parse your razor syntax hence the error in your console of #Url.Action(%22Attachments%22..
You have a couple of options:
Create a JavaScript function and pass in the url:
function loadUrl(url) {
$("#attachments").load(url);
}
Then in your razor call it within a script tag:
loadUrl(#Url.Action("Attachments", "Transactions", new { id = #Model.Id })
Add the url to the html element as data and read it from your JavaScript with the data method.
In your razor markup add this:
<button data-url="#Url.Action("Attachments", "Transactions", new { id = #Model.Id })" />
From your JavaScript event handler read it with:
var url = $(this).data('url');
$("#attachments").load(url);
I prefer the second option.
You Need to use Html.Raw check below
var url = "#Html.Raw(Url.Action("Attachments", "Transactions"))";
url += '/?id=' + 3201;
$("#attachments").load(url);

Make javascript if statement display html?

I wanted an if statement to show an image or html code depending on the webpage. I got this far and the html table doesn't appear at all (appears blank):
<script type="text/javascript">
<!--
var url = document.location.pathname;
if( document.location.pathname == '/tagged/photos' ){
document.innerHTML('<table><tr> hello </tr> </table>');
}
if( document.location.pathname == '/tagged/news' ){
document.write("<b>This is my news page</b>");
}
//-->
</script>
I'd do it slightly differently
Add both markup to the page, and show/hide as approproate:
<table id="table"><tr> hello </tr></table>
<span id="title"><b>This is my news page</b></span>
<script type="text/javascript">
$(function(){
var url = document.location.pathname;
if( url == '/tagged/photos' ){
$('#title').hide();
$('#table').show();
}
if( url == '/tagged/news' )
{
$('#title').show();
$('#table').hide();
}
})
</script>
I have assumed you have JQuery since it is tagged
You're using document.innerHTML, which doesn't exist. At the very least, you need to get a proper element:
document.documentElement.innerHTML = 'some HTML';
Setting aside everything else that's wrong with this approach, I'm not sure, why would you use document.write() in one branch and someElement.innerHTML in the other.
I'd suggest the following approach:
function pagePopulate() {
// you're looking at the pathname, use a sensible (meaningful) variable-name:
var pagePath = document.location.pathname,
// this is a map, of the relationship between page and content:
pathToContent = {
// pagename : html
'photos': '<table><tbody><tr><td>photos page</td></tr></tbody></table>',
'news': '<b>This is the news page</b>'
},
// getting a reference to the <body> element:
body = document.querySelector('body');
// setting the innerHTML of the <body>,
// if pagePath = 'tagged/photos', splitting with '/' would return:
// ['tagged','photos'], calling 'pop()' returns the last element of the array
// 'photos', which returns that string to the square brackets, resulting in:
// pathToContent['photos'], which would yield the '<table>...</table>' HTML.
// if that call resulted in an undefined, or falsey, value, then the default
// (the string *after* the '||' would be used instead:
body.innerHTML = pathToContent[pagePath.split('/').pop()] || '<h2>Something went wrong</h2><img src="http://blog.stackoverflow.com/wp-content/uploads/error-lolcat-problemz.jpg" />';
}
// calling the function:
pagePopulate();
References:
|| (logical 'or' operator).
Array.prototype.pop().
document.querySelector().
String.prototype.split().

get the title from a context

How Do I select the title of the context? I am suppose to select it to change the title of the page.
var handler = function(context){
document.title = //context's title
....
}
//sample context from ajax request
var context = '<!DOCTYPE html><html>\
<head><title>Hello</title></head>\
<body>\
Click Here<p>This is my sentence.</p>\
</body></html>';
.ajax{(
...
success: function(data){
handler(data);
}
});
EDIT: I forgot the doctype just incase it's necessary. The context was from an AJAX Request.
You can use regex to extract the title as well
var matches = context.match(/<title>(.*?)<\/title>/);
var title = matches[1];
Demo
Just discovered a way to do this, the non-regex way
title = $(context).filter("title");
console.log(title.html());
Demo
The second argument to the jquery $ function is the context
So you can try $("title",$(context)).text()
this should do:
var title = $(context).eq(0).text()
var handler = function(context){
$xml=$.parseXML(context);
console.log($($xml).find('title').text());
}
var context = '<html><head><title>Hello</title></head><body>Click Here<p>This is my sentence.</p></body></html>';
handler(context);
http://jsfiddle.net/MdvWq/
Please check http://jsfiddle.net/sethunath/UAt5p/
$(context)[1].innerHTML
returns the title
I don't know why, but nobody mention this. This is a popular method to search for elements in responses:
$(function() {
var context = '<html><head><title>Hello</title></head><body>Click Here<p>This is my sentence.</p>< /body></html > ';
alert($(context).filter("title").html()); //Use filter to get elements you want
alert($(context).filter("a").html()); //Will get HTML of that link (<a>)
alert($(context).filter("body > p").html()); //HTML of <p>
});​
http://jsfiddle.net/DerekL/THdaC/2/

Categories