How to get button to invoke form - javascript

Another newbie here. I took this code from old site page and want to use it on a page in a new WP site.
I put the appropriate HEAD info in the HEADER section on WP, and the following script on the page, but I can't seem to get the button to invoke the form itself.
Would greatly appreciate help.
<center><form><input type="button" id="feedback-button" class="button" value="Open Support Ticket" /></form></center>
<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
// ==== custom trigger function ====
triggerFunction : function( showCollectorDialog ) {
$('#feedback-button').on( 'click', function(e) {
e.preventDefault();
showCollectorDialog();
});
}
});
</script>

If you mean you want the button to submit the form, there is absolutely no need to use JavaScript for that; that's the browser's default behavior. However, you'll need to make sure that all your inputs including the submit button are in the same form element. You'll also need to make sure that that form element has an action attribute and a method attribute.

Seems to me that the custom trigger event is calling to showCollectorDialog()
Do you also have the code for showCollectorDialog?
You might want to try adding an alert message to see if the function is getting invoked.
<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
// ==== custom trigger function ====
triggerFunction : function( showCollectorDialog ) {
$('#feedback-button').on( 'click', function(e) {
alert("Yes, the button is getting executed!");
e.preventDefault();
showCollectorDialog();
alert("No, looks like I passed the showCollectorDialog and is not working");
});
}
});
</script>
Other options include having some code in the button that is an onClick event like...
<center><form><input type="button" id="feedback-button" onClick="functionName()" class="button" value="Open Support Ticket" /></form></center>
The onClick can be used to fireoff some sort of function depending on the action you need. I can't tell exactly what the code is doing, but perhaps is opening a pop-up window for a support ticket?
Really we need some more details, but see if the above helps you at least trouble shoot down what is happening to get started.

Related

How can I set data-* attributes on the button when the AJAX requests complete?

This is a follow up question for the one asked before https://stackoverflow.com/a/33550107/4662074
And to be honest I just need a hint here. I have the jquery validate submit handler and it calls the ajax query. This query returns some data and I want this data to be used when user clicks a button on the webpage.
Now, the user suggests that I cannot use the click hangler attached to the button inside the submit handler of my validate. But how can I pass the data there?
I have my button in html:
<a class="btn btn-default" data-transaction="" name="submitForm" id="submitForm" >Submit</a>
I added there a data-transaction now. And in my submit handler I'm doing:
success: function(response) {
var myNumber= (response[0].myNumber);
$("#submitForm").attr('data-transaction', myNumber);
alert(myNumber);
That alerts me my number. But when I do this outside of the success function:
$("#submitForm").on('click', function() {
var number_id = $("submitForm").attr('data-transaction');
alert("number: "+number_id );
});
}
it prints me: number: undefined. How can I pass this value then?
Use jquery data instead:
$("#submitForm").data('transaction', transactionID);
And
var number_id = $("#submitForm").data('transaction');
Notice that this will not add the attribute to the DOM, if you inspect the element via the developers tool, you won't see data-transaction, but the element will have the data referenced.
Edit:
Your method should also work, but as #Tushar pointed out, you are missing the # from your selector: $("submitForm") -> $("#submitForm")

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.
I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});
You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/
you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})
$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

Execute Javascript on new HTML-Page

I have two HTML-Pages (A.html and B.html). On Page A there is a button called "UploadButton"
<input id="UploadButton" type="button" value="Dateien auswählen" />
This is connected to some jQuery code
<script language="javascript" type="text/javascript">
$(function () {
$().SPServices({
operation: "GetList",
listName: "Doc",
async: false,
completefunc: function (xData, Status) {
id = $(xData.responseXML).find("List").attr("ID");
}
});
reference = "./_layouts/Upload.aspx?List=" + id + "&RootFolder=";
$('#UploadButton').click(function (event) {
NewItem2(event, reference);
return false;
});
});
</script>
So far so good... The Button or a little closer the NewItem2() method open up a new HTML Page (Page B). On page B there is an anchor I want to click.
So my question is, how can I click an anchor on page B with a Script from page A. Is there a possibility to do that? I don´t know how to do that properly.
The NewItem2() is not written through my hands, so I cant tell you whats happening in there. I tried to find something via Google or in the forum but I don´t know how to call my problem so I found nothing, sorry.
Thankls for all effort!
Simple - You cant´t use Page A`s scriptvariables on Page B.
When you just want to click an HTML anchor, why don´t you simply add #anchorname to your reference to create the same effect?
The easiest way to submit information between pages is the QueryString.
Just pass the ID of the control which you want to click and write some javascript to read the QueryString and execute the .click().
Should use external JavaScript file by copying your JavaScript/jQuery code to the onther file and set extencion .js in last include your this this file in both page (A.html and B.html) as shown below.
<SCRIPT TYPE="text/javascript" SRC="|YOUR FILE NAME|" />
So you does not need to specify different methods for different pages where same type of action are being done.
If window.open is used to open that new window, than you can take a refference to that window like this:
var newWindow = window.open("...new window url here...");
and than, using newWindow you can access its content:
newWindow.$("#anchore_to_click").click()
(assuming jquery is available there too)

How do I get this validationTextBox to focus?

After performing an ajax request if the input in the form was wrong I am trying to get this validatationTextBox to be focussed on and display an indicator message showing the problem.
The code is:
dijit.byId("passwordField").focusNode.focus()
The form element is as mentioned a validationTextBox.
The matter that is confusing me even further is that before in dojo 1.5, this piece of code was simply dijit.byId("passwordField").focus() and this worked fine. How can I fix this?
I have also tried :
require(["dijit/focus"],function(focusU){
focusU.focus(dojo.byId("ID"));});
But this does not work either.
If the dijit.widget.focus() fails, then the _FocuxMixin is not loaded properly during its startup.
With any dijit.form.Type, you should be able to successfully gain focus via:
dijit.byId('ID').focus();
I think youre confusing DOM event focus with widget focus handling. If you fire widget.focusNode.focus - you will not benifit from the messaging in ValidationTextBox in any browser.
Can you try something like this in the form tag:
<script language="javascript" type="text/javascript">
Sys.Application.add_load
(
function () {
window.setTimeout(focus, 1);
}
)
function focus() {
if (document.getElementById('txtComm1') != null) {
if (document.getElementById('txtComm1').disabled != true) {
document.getElementById('txtComm1').focus();
}
}
}
</script>
If your form fields are inside a dijit/Dialog, the Dialog will automatically focus on the first input. You can disable this behaviour by setting:
autofocus: false
on the Dialog, after which,
widget.focus();
should work fine.
This worked for me...
setTimeout(function(){
widget.focus();
}, 100);

Problem preventing form submission with jquery

I wish to execute a jquery based ajax form submission on pressing the enter key. Obviously this involves stopping the normal form submission process. My form consists of a single input field. Here is the code:
<script type="text/javascript">
$(document).ready(function() {
// add vid ajax
$.ajaxSetup({
cache:false;
});
var ajax_load = '<div class="displayBox">Adding url...</div>';
var loadUrl = 'ajax/add';
$("#vidForm").submit(function(){
e.preventDefault();
alert("hello");
/*$("body").html(ajax_load)
.load(loadUrl,{url:$("#addurl").value},function(responseText){
$("#videos").append(responseText);
});*/
return false;
});
});
</javascript>
...
<form id="vidForm" action="ajax/">
<input id="addurl" name="addurl"/>
</form>
I'd expect the above to submit to 'ajax/add' but it doesn't, submitting instead a full blown http-request to 'ajax' the default behaviour (in Chrome at least).
What am I doing wrong?
As a general rule, any JavaScript errors will probably result in the same behavior as no JavaScript at all, and that's what you're seeing...the default submission behavior because of script errors. I've outlined the issues below:
Your closing tag is off:
</javascript>
should be:
</script>
Also object literals shouldn't have a ; for properties, so change:
$.ajaxSetup({
cache:false;
});
To:
$.ajaxSetup({
cache:false
});
And lastly, remove this:
e.preventDefault();
Your return false is already taking care of this (and would error anyway because of the missing parameter, as in TJ's answer).
Update: Now that you've cleared up the earlier issues, I'm not seeing any problem. Fundamentally, it works: http://jsbin.com/ugowa4 (Tested on Chrome, Firefox, and Opera for Linux; IE6 and IE8.) You'll have to walk through with a debugger to figure out at what point things are failing. The basics should work.
Looks like you've forgotten to declare the event parameter:
$("#vidForm").submit(function(e){
^--- Add this
Without it, you're trying to access a variable e from the containing scope. If there isn't one, or it doesn't have a function called preventDefault, you'll get an exception at that point and the rest of the function will be ignored.
See also Nick's note about the closing tag (should be </script>) and the misplaced ;.
Do you have any button with the type submit in the form? For example like
<form id="vidForm" action="ajax/">
<input id="addurl" name="addurl"/>
<button type="submit">Send</button>
</form>
or
<form id="vidForm" action="ajax/">
<input id="addurl" name="addurl"/>
<input type="submit" value="Send" />
</form>
Clicking of the "Send" button in the example will submit the form. If you form has more elements please post the whole code.

Categories