jQuery equivalent to `return document.getElementById(theVar)' - javascript

I've a javascript function
function $m(theVar){
return document.getElementById(theVar)
}
The problem with the above code is, the element I want to pass is generated by ajax so I need something like the .live() in jquery, unless it throws an error
How do I rewrite the above function in jQuery so that any DOM element generated later can also be detected.
Update:
When my page first load, it loads
1) ajaxupload.js with codes
function ajaxUpload(form,url_action,msg){
var id_element= "pop-con";
function $m(theVar){
return document.getElementById(theVar)
}
if($m(id_element)==null){
erro += "The element of 3rd parameter does not exists.\n";
}
}
2) index.php with codes
<div id="popupMargin">
<div class="close">x</div>
<div id="pop-con"></div>
</div>
<div id="ajaxGenerateMarkUp"></div>
3) now on the click of a button, the following markUp is added to the #ajaxGeneratedmarkUp div (mark-up generated through ajax)
<form onSubmit="return disableForm(this);" action="crop/wizecho_upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
<input id="file" type="file" name="file" onChange="return disableForm(this), ajaxUpload(this.form,'crop/wizecho_upload.php', '<br>Uploading image please wait.....<br>'); return false;"/>
</form>
Now on change of this input type file, made the call on in the javascript. Now it shows the error.
[Note: I only posted sections of code I think might affect my question]

Like this:
return $('#' + theVar)[0];

jQuery's selector can detected newly generated items:
$('#id');
So in your case:
var theVar = 'something';
$('#' + theVar); //returns a jQuery object of the select item
$('#' + theVar)[0]; //returns the first DOM object that jQuery finds with that id

I think you need to add a live call somewhere to detect the new AJAX-loaded button. This way, the button will be automatically bound to a handler that works OK as in other answers. From your comment I guess you are doing one of these:
In the AJAX-loaded button you already include some JS logic, that is not working (something like onclick="do_something").
You are binding the second button to a handler withoug the live method.
Here's a working example. Although it doesn't load contents via AJAX, it does load a dynamic button.
http://jsfiddle.net/marcosfromero/VKfKL/
Update: Another example that does load contents via AJAX and binds the newly created button with live:
http://jsfiddle.net/marcosfromero/h9RSC/

Related

Is there a to change the value of an element using JavaScript

I'm trying to change the value of an element on a third-party web page using a JavaScript Add-on to display a hyperlink
I already have the link on the page i would like to be able to click it
I think I'm on the right track using document.getElementById although I'm not sure how to then change the id into a "a href" and then how to pass it back into the value.
Sorry, this is a bit of a tricky situation so I'll try my best to explain it. On a third-party web-page which we use for our HR related tasks, there is a section titled "File Link" although this isn't a link. When you copy and paste the address into a browser it displays the file. What i am trying to do is create a hyperlink on the "File Link" section to remove the need to copy and paste the link. Because this is a third party website. We have access to the JavaScript on the website and need to change the address into a hyperlink. I'm not entirely sure this is possible.The element id is "__C_cb_file_link" and i would like to insert the link address into the element using a variable then add the link parameters into the variable then reinsert it into the element/value.
function linkIt() {
var intoLink = document.getElementById("__C_cb_file_link");
var hLink = "<a href="+intoLink+"</a>;
intoLink.value = hLink;
}
window.onload = linkIt();
<td><div class="sui-disabled" title="">m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674</div>
<input type="hidden" name="__C_cb_file_link" id="__C_cb_file_link" value="m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674"/></td></tr>
In below code first we read input value with new link (however we can read this value from other html tags), then we remove this element (and button) and add to parent element (of removed input) the new link
function linkIt() {
let intoLink = __C_cb_file_link.value;
let parent = __C_cb_file_link.parentNode;
__C_cb_file_link.remove();
btn.remove();
parent.innerHTML += `${intoLink}`;
}
<input id="__C_cb_file_link" value="https://example.com">
<button id="btn" onclick="linkIt()">Link It</button>
There are a number of issues with your code:
1) The code snippet in your question doesn't run because of a missing " at the end of the second line of the linkIt() function.
2) intoLink is a hidden field so anything you add to it will not be visible in the page
3) Even if point 2 were not true, setting the value of a form field will not cause HTML to appear on the page (at best you might get some plain text in a textbox).
4) "<a href="+intoLink+"</a>" doesn't work because intoLink is a complex object which represents the entire hidden field element (not just its value property). You can't convert a whole object into a string directly. You need to extract the value of the field.
A better way to do this is by creating a new element for the hyperlink and appending it to the page in a suitable place. Also I recommend not adding your event via onload - when written using this syntax only one onload event can exist in a page at once. Since you're amending another page which isn't under your control you don't want to disable any other load events which might be defined. Use addEventListener instead, which allows multiple handlers to be specified for the same event.
Demo:
function linkIt() {
var intoLink = document.getElementById("__C_cb_file_link");
var hLink = document.createElement("a");
hLink.setAttribute("href", intoLink.value);
hLink.innerHTML = "Click here";
intoLink.insertAdjacentElement('beforebegin', hLink);
}
window.addEventListener('load', linkIt);
<td>
<div class="sui-disabled" title="">m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674</div>
<input type="hidden" name="__C_cb_file_link" id="__C_cb_file_link" value="m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674" /></td>
</tr>
P.S. m-files:// is not a standard protocol in most browsers, unless some kind of extension has been installed, so even when you turn it into a hyperlink it may not work for everyone.
[UPDATE] I supose that your "__C_cb_file_link" was a paragraph so I get the previous text http://mylink.com and create a link with, is it what you want, right?
function linkIt() {
let fileLink = document.getElementById("__C_cb_file_link");
let hLink = fileLink.textContent;
fileLink.innerHTML = ""+hLink+"";
}
linkIt();
<div>
<p id="__C_cb_file_link">http://myLink.com</p>
</div>

Send onclick event of element without id

I'm trying to automate through my Swift3 app the click of an HTML element in line2 which lacks an 'id'.
HTML portion from website containing desired element(line2)
<div id="actionButtons" style>
<input class="pptbutton" onclick="return addSimResults();" title="SimulateRace" type="submit" value="Simulate">
Clear All = $0
<div class="holder" style="font-size:0.8em;">
<input class="pttbutton" id="graphButton" onclick="return addGraphResults();" style title="Graph your simulation" type="submit" value="Graph HvH">
...etc
I've successful automated line5's element.onclick event with the Swift code
webView.evaluateJavaScript("document.getElementById('graphButton').click();")
I've attempted to grab the element by Class name with Swift code
webView.evaluateJavaScript("document.getElementsByClassName('pptbutton')[0];") {
(result, error) -> Void in
print(result)
}
which returns nil. I've also tried without the "[0]".
Any suggestions how I can cause line2's Element onclick Event?
webView.evaluateJavaScript("document.getElementsByClassName('pptbutton')[0];")
this line of code evaluates the javascript, defined as the given string. The String is pure Javascript which selects the first element within the dom with the css class pptbutton.
You forgot to call the click method on this element, so no click is triggered by your code.
It should be:
webView.evaluateJavaScript("document.getElementsByClassName('pptbutton')[0].click();")
In this way the click event is triggered on the selected element.

Clearing a div in Jquery using its i.d

I am trying to remove the user input and replace it with the original placeholder by using the empty() function.
Here is the jQuery file which takes input from user through a <form> and appends it to list with the template() structure:
var template = function(text) {
return '<p><input type="checkbox"><i class="glyphicon glyphicon-star"></i><span>' + text + '</span><i class="glyphicon glyphicon-remove"></i></p>';
};
var main = function() {
$('.form').submit(function() {
var text = $('#todo').val();
var html = template(text);
$('.list').append(html);
$('#todo').empty();
return false;
});
};
$(document).ready(main);
After the user submits their text and it is added to the list I want the 'form' input to empty so you can enter a new item with out deleting what you just typed.
Here is a snippet of the html file that jQuery is interacting with:
<form class="form">
<div class="form-container">
<input id="todo" type="text" class="form-input" placeholder="Add item">
</div>
<button type="submit" class="btn">+</button>
</form>
Why is the line
$('#todo').empty();
not removing the user input and returning it to the original placeholder?
The empty method doesn't delete the attributes or values but it removes the html inside an element. You should use val:
$('#todo').val('');//To empty the value
If you want to remove the placeholder too then use removeAttr method:
$('#todo').removeAttr('placeholder');
.empty() is for other use cases. From the docs...
Remove all child nodes of the set of matched elements from the DOM.
Instead, you can .val('') your <input />. Observe the following simplified example...
$('.form').submit(function() {
$('#todo').val('');
return false;
});
JSFiddle Link - demo
as an observation to your neighboring code you can also pass the event and call .preventDefault() in place of return false;. Alternatively, you can call reset() in your function block as such: this.reset() - reset demo with default behavior prevented.
Try this:
$('form').trigger("reset");
This is the most elegant and correct way since it will work when you have multiple and different type of inputs without needing to do any changes. Much better than trying to empty and resetting placehorders on all fields. This will make sure to set the fields to initial state (having placeholders set too).
Based on your code you could do:
$('.form').submit(function() {
// ...
$(this).trigger("reset");
// ...
});
See it working on an example form based on yours with more fields inputs and select here.
See JQuery reset Doc here: JQuery API Doc/reset

JQUERY appending a button with onClick event and passing javascript variable in it

parameters=eval([[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]);
<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>
this works fine when I'm just including this into my html code.
but I want to append this into a specific div using javascript or jquery. like this.
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>";
$('#content').append(myButton);
</script>
My problem is, it does not perform the function whenever I click the button. Maybe because of the variable parameter that I passed and my question is how can I do this correctly? And I'm avoiding using ajax cause it will affect a big portion of my codes.
Try this : use escape characters and add parameter variable using plus operator
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type=\"submit\" value=\"Pie Chart\" onClick=\"showChart('<?php echo $title;?>',"+parameters+",'#container','chart','Pie Chart')\"/>";
$('#content').append(myButton);
</script>
jQuery('#yourbutton').on('click', function() {
}); // your on click event
//to add content to innerhtml of div:
jQuery('#divelementorother').html(jQuery('#divelementorother').html() + YourDataToInside);
First, you see the .on function of jQuery to get an event handler on click to execute function. You can append that as JavaScript to the html of div, so you doesn`t have to use the button itselfs onclick
Second, to extend the innerhtml or html of an elemnt like , you've to use .html(data) . Or, i see above my post: you can use append.
Greetings

create a pop-up window and display a list of radio buttons using javascript

I'm writing on a js file.
Here is what I've tried so far. (My code is a bit long but here is what I'm trying to do)
var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C');
var showPopUpButton=$('<button type="button">Select a Letter</button>');
// showPopUpButton is appended to the body
showPopUpButton.click(function() {
alert(popUpList);
});
When I click on showPopUpButton, the alert window shows [object Object], which I guess means that the variable popUpList is empty.
I couldn't find how to do that in javascript.
I also tried with jQuery as suggested here Create a popup with radio box using js
var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C ');
showPopUpButton.click(function() {
popUpList.dialog();
});
Now, the buttons are displayed but not inside a pop-up window! And they are all superposed.
Any help will be appreciated.
Thanks!
You need to wrap your <input>s in a container element, e.g.: <div>, because dialog() works on a single element.
In your code, you are asking the dialog() function to work on multiple DOM objects and thus it will fail.
Here is the code:
var popUpList = $('<div><input type="radio">A<br><input type="radio">B<br><input type="radio">C</div>');
showPopUpButton.click(function() {
popUpList.dialog();
});
See it in action here. Try it yourself. :)
Changed your inputs to HTML string, parsing as HTML and inserting inside the #dialog element.
var popUpList= '<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C',
dialogHtml = $.parseHTML(popUpList);
showPopUpButton.click(function() {
$( "#dialog" ).html(dialogHtml).dialog();
});

Categories