Develop Reference

Retrieving data from a form loaded with jQuery and passing it to a parent page

I have a 'parent' page that is using the following bit of code to pull in a form from a different page on the same domain. There are reasons why I can't just place the form directly on the 'parent'.
<script type="text/javascript">
jQuery("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
function() {}
).hide().fadeIn(1000);
</script>
The form that is pulled in looks like this:
<form action="https://example.com/form/" method="post" id="profile-edit-form" class="standard-form base" target="hiddenFrame">
<label for="field_1">Name</label>
<input id="field_1" name="field_1" type="text" value="Joey-Jojo Jr. Shabadoo">
<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="Save Changes " />
<input type="hidden" name="field_ids" id="field_ids" value="1" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="a62f8d5fec" />
<input type="hidden" name="_wp_http_referer" value="/form/" />
</form>
When 'submit' is clicked, https://example.com/form/ is opened in a hidden iframe and the user name gets properly saved. This all works well.
I would like the user name on the currently loaded 'parent' page to update via jquery, so that the user has some immediate visual feedback that the name change has taken place.
My approach has been to try and take the value out of the 'field_1' input when 'submit' has been clicked, and pass that variable onto a div in the parent page with an id of 'display_name'.
$(document).ready(function(){
function nameUpdate(){
$("#profile-group-edit-submit").click(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
}
nameUpdate();
});
I've also tried adding window.parent.
before the the #display_name selector section and it didn't change anything.
I've used this approach on another button/div combo on the same page and it works, the difference is that that particular button is in an iframe, not loaded by jquery. So I'm guessing my problem is related to that fact.
I've googled around, but have run out of ideas of how to phrase my question, what to look for, etc...
Any help would be greatly appreciated. Thanks!
Edit: For clarity, the div w/ id #display_name won't update.

Use jquery to handle the form submission.
$(document).ready(function(){
$('#profile-edit-form').submit(function(){
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
});
EDIT:
Due to your loading the form dynamically you need to bind the submit function after the load. So...
$(document).ready(function () {
var formLoaded = function () {
$('#profile-edit-form').submit(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
};
$("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
formLoaded
).hide().fadeIn(1000);
});

If I am understanding it correctly, your problem is "display_name" field is not getting updated with the latest value.
If this is the problem then can you try below thing?
Instead of
$("#display_name").text(updateName);
try using-
$("#display_name").val(updateName);
As per the documentation on jQuery site Val() works well with form Elements whereas text won't.
More on Val() method- https://api.jquery.com/val/#val2

cannot call javascript method from within tinymce editor

I am trying to make a javascript method call from within the tinymce editor on click event on a piece of text written inside the editor, but it is not working. Tinymce version 4 is being used by me.
Below mentioned is the code snippet. Though i can successfully call the inline alert method as in second div, i am unable to call my custom javascript method as in first div.
Suggestions would be much appreciated.
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
function customMethod(){
alert('custom method not being called !!');
}
tinymce.init({
selector: "textarea",
valid_elements: "*[*]"
});
</script>
<form method="post">
<textarea name="content" style="width:100%">
<div onclick="customMethod();">Call custom method.</div>
<div onclick="alert('alert called');">Call Alert.</div>
</textarea>
</form>

You have two options: First you add onclick as valid attribute to your divs (see tinymce configuration paramter valid_elements). Here is an example configuration
valid_elements: "#[id|class|title|style|onmouseover|onclick]," +
"a[name|href|target|title|alt]," +
"#div,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span[data-mce-type],hr",
Second option is to add this setup parameter you your tinymce config catching each onclick event in the editor
setup : function(ed) {
// Display an alert onclick
ed.on('click', function(evt) {
console.log('User clicked the editor. Element:', evt.target);
if (evt.target.className == 'do_1') alert('do_1');
if (evt.target.className == 'do_2') alert('do_2');
});
},
You may want to have a look at this tinymce fiddle to see it in action: http://fiddle.tinymce.com/QXdaab

Passing Values to Modal Popup Using Java Script

I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.
This is the code portion for button. Id will be assigned form DB. It is working fine.
<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>
Modal Window: Here I need to get the value form popupwindow function and query DB and view:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
</div>
</div>
JavaScript Function for Passing values to Modal Popup Window
function popupwindow(id) {
// code for Pass the value to modal window
window.location="#openModal"
}
I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.

I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:
function popupwindow(id) {
$("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
$("#openModal").show();
})
}
And your HTML:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
<div class="content"></div>
</div>
</div>

Instead of using onClick(), use jQuery click function. Here's how:
$("[input[name = 'button']").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Alternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:
<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>
Now, in JQuery, do the following
$(".modalBtn").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Hope it answers your question.

use window.location.hash for replace hash
function popupwindow(id) {
window.location.hash = '#openModal'
}

You can use the following script for loading and unloading pop up box,
<script type="text/javascript">
$(document).ready( function() {
loadPopupBox();
$("#popupBoxClose").click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$("#popup_box").fadeOut("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.8"
});
}
function loadPopupBox() { // To Load the Popupbox
$("#popup_box").fadeIn("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.2"
});
}
});
</script>
Other than that you dont need to send values through the JS , JS is a client side , u cannot play with server side language , using client side.
one solution is you can use something like,
window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"
and change the method of the form to GET instead of post.
After doing that you can write a php code , for excepting the value from $_GET and echo the modal pop-up using php.

jQuery UI modal confirmation dialog with ASP.NET not firing onClick event

jQuery newbie here. I've looked at dozens of similar questions on this site, as well as the answers provided so far here, all having pretty much the same response, and I've tried all of them, but nothing is working for me.
For the Javascript code in my .aspx, I currently have:
<script type="text/javascript" src="/resources/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/resources/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resources/ui-lightness/jquery-ui-1.8.20.custom.css" />
<script language="javascript" type="text/javascript">
$(function() {
var $myDialog = $("#cancelDialog").dialog({
autoOpen: false,
modal: true,
buttons: {
'Yes, cancel': function() {
$(this).dialog('close');
return true;
},
'No, resume editing': function() {
$(this).dialog('close');
return false;
}
}
});
$("[id$=btnCancel]").click(function(e) {
//e.preventDefault();
alert('boo');
//$myDialog.dialog('open');
});
});
</script>
The markup for "btnCancel" looks like this - notice that I don't have an "onClientClick" attribute because jQuery is supposed to do this for me, right?
<asp:Button ID="btnCancel" CssClass="btnCancel" runat="server" Text="Cancel"
CausesValidation="false" UseSubmitBehavior="false" />
And here's the markup I have for the cancellation dialog:
<div id="cancelDialog" style="display: none;" title="Please confirm cancellation">
<p>Are you sure you wish to cancel and abandon your changes?</p>
</div>
According to all the examples I've seen (and the answers provided here), this should give me a jQuery UI popup with my two buttons that just works. The page is no longer posting back when I hit the cancel button (due to the changes I made at Patrick Scott's suggestion). I could just use a standard Javascript confirm() dialog for this, but I want to be able to customize the prompts/styling.
The only other information I can think of to throw in is that this code is on an ASP.NET Wizard control (the cancel button is in the StepNavigationTemplate), but that shouldn't matter, should it?
Any hints as to what I need to change to get this working are greatly appreciated!
(question & code updated to reflect recent changes I've made)

The reason it isn't working is because the ID of the button changes when it's rendered to the page. To access the control in JavaScript, you need to use the ClientID property:
$("#<%= btnCancel.ClientID %>").click(function(e){
//open the dialog
});

Use $("[id$=btnCancel]") as your selector for the click event..
$= means ends with in the jquery selector, and webforms adds a bunch of stuff that will make your id not match.
$("[id$=btnCancel]").click(function(e) {
I also don't understand why you have the buttons declared separately from the rest of the dialog...
do this instead:
$(function() {
var $myDialog = $("#cancelDialog").dialog({
autoOpen: false,
modal: true,
buttons: {
'Yes, cancel': function() {
$(this).dialog('close');
return true;
},
'No, resume editing': function() {
$(this).dialog('close');
return false;
}
}
});
$("[id$=btnCancel]").click(function(e) {
e.preventDefault();
$myDialog.dialog('open');
});
});

you need to break it down - it sounds like there is another error in the JS somewhere which you don't see because the page is reposting. Try an alert on the click:
$('#btnCancel').click(function(e) {
alert('boo');
});
If this doesn't work you need to make the simplest script possible get that working and then add to it.

I figured it out! It turns out that <script> tags (nor most other tags, it seems) cannot be self-closed in HTML4 or HTML5. I was writing them like so:
<script type="text/javascript" src="whatever" />
when according to the standard, they must be written like so:
<script type="text/javascript" src="whatever"></script>
This was allowing my first <script> include to work (jquery-1.7.2.min.js), but following ones to fail. Weird, huh?
Here are some links with supporting information:
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1 (the HTML4 specification)
Can the <script> tag not be self closed?
http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/

<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
Hook this to the "yes" button on your modal confirmation dialog. You'll need to change the ID according to your needs.

jQuery - reset form after submit w/ form plugin

let me start by saying it may look simple but im finding it extremely difficult.
ive made a search script that uses PHP and to fetch a result would look like this
search.php?term=alice&submit=Submit
Standard stuff.. problem is, i use an SPI with AJAX and PHP so my results would have to load dynamically into a div, whilst still keeping the hash value, as not to lose the page the user had visited previous to searching.
jQuery.history.js is the plugin i use for back button support, which requires links to be like such:
Home Page
this would load 'home.html' into a div named pageContent. as far as i know theres no way to call php files unless you develop a little hack, which i have,
here is my JavaScript/jQuery for my search form:
<script language="JavaScript">
$(document).ready(function() {
// bind form using ajaxForm
$('#search1').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#pageContent',
// success identifies the function to invoke when the server response
success: function() {
$('#pageContent');
var hash = '#search.php?term='+($('#query').val()+'&submit=Submit').replace(/ /g, '+');
var stripped = hash.replace(/(<([^>]+)>)/ig,"");
update(window.location.hash = stripped);
}
});
});
</script>
Heres the form:
<form id="search1" action="search.php" method="post">
<input id="query" type="text" name="term" />
<input type="submit" name="submit" value="Submit" />
</form>
My problem is this:
ive tried this.form.reset(); this: Resetting a multi-stage form with jQuery , yet none of this works. please help me if you know a way of doing this..

$('#query').val(DefaultValue);
with this u can set your value to whatever you want, like blank: '';