I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.
$("#see_comments").click(function() {
$.post(
"comments.php",
{aid: imgnum},
function (data) {
}
);
});
This function should go to comments.php page with the aid value in hand. It's posting fine but not redirecting to comments.php.
#Doug Neiner Clarification:
I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnum I opened. This imgnum I want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory
Your method successfully POSTs the aid value. But in the comments.php when I try to echo that value, it displays nothing.
I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.
I know what you are trying to do, but its not what you want.
First, unless you are changing data on the server, don't use a POST request. Just have #see_comments be a normal <a href='/comments.php?aid=1'>...
If you have to use POST, then do this to get the page to follow your call:
$("#see_comments").click(function() {
$('<form action="comments.php" method="POST">' +
'<input type="hidden" name="aid" value="' + imgnum + '">' +
'</form>').submit();
});
How this would actually work.
First $.post is only an AJAX method and cannot be used to do a traditional form submit like you are describing. So, to be able to post a value and navigate to the new page, we need to simulate a form post.
So the flow is as follows:
You click on the image, and your JS code gets the imgnum
Next, someone clicks on #see_comments
We create a temporary form with the imgnum value in it as a hidden field
We submit that form, which posts the value and loads the comments.php page
Your comments.php page will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
$("#see_comments").click(function () {
$('<form action="comments.php" method="POST"/>')
.append($('<input type="hidden" name="aid">').val(imgnum))
.appendTo($(document.body)) //it has to be added somewhere into the <body>
.submit();
});
While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.
I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by devside. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefox and it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.
I had to do this implementation for a Symfony2 project, since the path generator inside the .twig templates would only work with GET parameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).
i think what you're asking is to get to 'comments.php' and posting aid with value imgnum. The only way to do this is to submit this value with a form.
However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.
html necessary (put anywhere on page):
<form id='see_comments_form' action='comments.php' action='POST'>
<input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>
js necessary:
$("#see_comments").click(function(){
$('#see_comments_aid').val(imgnum);
$('#see_comments_form').submit();
);
this will redirect to 'comments.php' and send the proper value imgnum (that i assume you are getting from somewhere else).
Actually, $.post() sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:
To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - Show Comments.
Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:
$("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});
this appended the aid value to the URL as #Doug Neiner initially suggested me to do.
Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.
Related
does anyone here have any idea how to set up Site Tracking by passing a contact's email address into Javascript Code?
I am on Wordpress using the visual builder Elementor's native contact form.
Here's the contact form: https://www.bestseo.sg/free-report/ (Bottom of the page)
I have already inserted ActiveCampaign's site tracking code sitewide.
However, it does not seem to start site tracking even after the form submission.
According to ActiveCampaign's documentation(https://help.activecampaign.com/hc/en-us/articles/221542267-An-overview-of-Site-Tracking#how-to-pass-a-contact-s-email-address-into-javascript-code), I believe I have to add this line of code:
vgo('setEmail', 'Email_Address_Goes_Here');
above
vgo('process');
But I have no idea what to replace 'Email_Address_Goes_Here' with, in order to call the actual contact's email after form submission.
Any help would be much appreciated!
Thank you.
So the plugin used to insert these JavaScript codes is https://wordpress.org/plugins/header-and-footer-scripts/ - I’d suggest to maybe just keep using that, and keep the scripts in the footer, so that this does not require too much modication.
Inside your template, you have to output the email addresse somewhere, where the JS can read it from - via a custom data attribute added to the body element for example.
The header.php of your theme should contain something similar to
<body <?php body_class(); ?>>
Modify that, to add a custom data attribute to store the email address entered in the from:
<body <?php body_class(); ?> data-freereportemail="<?php echo !empty($_POST['form_fields']['email']) ? esc_attr($_POST['form_fields']['email']) : ''; ?>">
If the POST parameter by that name is set, then it will be output as content of this attribute, otherwise it’ll simply stay empty.
Then modify the JavaScript code you insert via the plugin like this,
var freereportemail = $('body').attr('data-freereportemail');
if( freereportemail != '' ) {
vgo( 'setEmail', freereportemail );
}
This assumes that jQuery has already been loaded at this point, but I think that should most likely be the case.
If the attribute contained an email address, then this will execute the vgo tracker function, if the attribute value is empty, then it will simply skip this call.
This is not the most sophisticated approach, but it should do.
(Only if you had other forms on the site as well, that use a form field of that exact same name, you might be tracking more than intended. In that case, you’d need to find some additional criterion, to be able to differentiate between these different forms.)
A person at the AC support gave me thsi code :
jQuery('form').submit(function() {
var userEmail = jQuery("form input[type='email']").val();
vgo('setEmail', userEmail);
vgo('process');
});
I hope it'll help you.
I use FluentForms, so i just went on the form specific Custom JS/CSS to apply it (so i had no problems of proper targeting...)
I'd like to know if its possible for me to do something from the following :
1) Replace the source code visible in view source , with an image , or nothing at all.
2) Hide the value attribute of <inpt type="password" ....> tag , so that the password entered by the user is not visible to anyone .
Thanks in advance.
You can minify your HTML to make it slightly unreadable, but it's trivial to unminify it. You can't do anything further to "remove" or "hide" it.
You mean to hide the value attribute after the user types something in, or to hide the value sent from the server? If the former, you could use JavaScript to extract the value as it's typed into some variable and replace the value with gibberish. If the latter, then the obvious answer is to not send that value.
View source is a representation of static HTML, so if you create any element dynamically, it will not be displayed in view source.
Note: These fields will still be accessible using dev tools.
Following is a sample code:
JSFiddle
function submit() {
var uName = document.getElementById("txtUserName").value;
var uPass = document.getElementById("txtUserPass").value;
console.log(uName, uPass);
}
function addPasswordField() {
var passInput = "<input type='password' id='txtUserPass' />";
document.getElementById("content").innerHTML += passInput;
}
(function() {
addPasswordField();
})()
<div id="content">
<input type="text" id="txtUserName">
</div>
<button onclick="submit()">submit</button>
There is no way to hide source code in a browser since that is how these things are built. The web is an open platform and developers working with the web need to have the view source functionality while working on their project(s). May I ask why you feel the need to hide the source code and the password?
To answer the first question: No. This is how browsers are designed and there are lots of other ways to request the page to see the source. For example, you could use Fiddler to see the traffic passing between the server and the browser.
As for the second question...why are you trying to hide the password?
Using the password input type will prevent anyone from seeing the password on the screen. so I assume this is to stop the data being viewed in transit?
If you want to secure your connection between the client and the server, you should consider using a secure (https) connection. Thanks to LetsEncrypt this is free, so it is no longer a costly option.
Evening all, this is really the last piece to my site being ready for testing.
Cant get my head around the correct way of this.
So im building a blogging cms per say.
I have blog posts that are echoed out into their own divs. In this div is also a hidden ckeditor text area.
If the user is logged in, and its their blog, they can see a edit button and when clicked the current text is hidden and the ckeditor is shown.
This is okay and works, when the ckeditor is shown, its also shown with a save button.
On clicking the save button some validation takes place and an ajax call is made to the update.php page where by the blog is updated. Also all good!
However, what i have tried to is when the response from that php page is okay, hide the editor, and update the current content of that div.
So far i have used this:
$("#container").load("#container");
The #container is a main container that holds all the blog information, and it works in sense as the content is reloaded. However, if i go to click the edit button again the text area is not replaced and also the text area has the red border around it suggesting its been submitted, and its empty. I set a red border if its empty.
The .load() seems to be messing with the other scripts on the page.
Am i using the .load() function correctly? And how can i just reload the current div as i think its more effective.
I was thinking of assigning each blog post div its own unique id, and then send that to the php page and send it back along with the response.
And then do e.g.
$("#container").load(response.blogPostID),
But i just want to know if im going about this in the way i should be, and is also going to be non buggy etc.
Worst case is that i have to perform a page reload after each edit, but it just doesnt feel a slick as i want.
I know the examples talk about loading content from another page and then loading a certain div from that. But the way i have build my site is that its just one query and the blog posts are echoed via a foreach loop.
Just need to know how to reload a single div, on the current page and not affect the other scripts etc.
If needed, i can set up a test account and blog on my site for an example.
Craig!
EDIT: this is the javascript for when the edit button is clicked:
$(".edity").click(function () {
$(this).parent().find('.edity').toggle();
$(this).parent().find('.saveupdatebutton').toggle();
$(this).parent().find('.updatebutton').toggle();
$(this).parent().find('.editor').toggle();
$(this).parent().find('.buildtext').toggle();
$(this).parent().find('.deleteupdatebutton').toggle();
});
This is the ajax call:
if (check) {
$.ajax({
type: "POST",
url: "process/updatepost.php",
data: $targetForm.serialize(),
dataType: "json",
success: function (response) {
if (response.databaseSuccess)
$("#container #postholder").load("http://url.com/viewblog.php?id=155 #container #postholder");
else
$ckEditor.after('<div class="error">Something went wrong!</div>');
}
});
}
This is how the data is shown on the page:
<div class="blogtest" id="156">
<form action="process/updatepost.php" class="updatepost" method="post">
<input type="button" class='.$editenabled.' value="Edit">
<input type="submit" name="saveupdatebutton" class="saveupdatebutton" value="Save">
<input type="submit" name="deleteupdatebutton" class="deleteupdatebutton" value="Delete">
<input type="hidden" class="postid" name="postid" value="'.$postID.'">
<input type="hidden" class="editorid" name="editorid" value="'.$ckEID.'">
<input type="hidden" class="pageurl" name="pageurl" value="'.$pageurl.'">
<input type="hidden" name="buildowner" value="'.$buildcreator.'" />
<br>
<div class="text">
<div class="buildtext" id="'.$postID.'">'.$convertedtext.'</div>
<div class="editor"><textarea name="muffin" id="'.$ckEID.'" class="ckeditor">'.$text.'</textarea></div>
</div>
</form>
</div>
It's kind of hard to understand what you are trying to do but I'll give it a go...
could you not just use .html() to replace the content inside the div where the editor is.
If you have sent the new data to where ever using ajax you should have a variable set or be able to set a variable for the content that you sent to the server and as such want to use in the div.
$("#container").html(what ever you used as data for the ajax request)
or something to that effect.
But it would be a lot easier if we could at least see some form of code snippet.
Hope this helps
I could probably have explained better let me know if it doesn't make sense and I'll try again :)
I wouldnt recommend reloading the entire page with an ajax call every time, the advantage of ajax calls is that you can load seperate parts to save a lot of bandwidth, so you guessed right.
I dont know what update.php returns exactly, if this can only return the entire page it's smart to make a special function that only returns a blog post
Then the call would like something like (a GET request would not be my first choice, that just depends on your system)
$( "#container #blog" + blogPostId ).load( "update.php?q=updatePost&id="+blogPostId );
For a quick fix, just give every post's div a unique id and add that to your load call
$("#container #blogPost"+blogPostId).load("*url* #container #blogPost"+blogPostId);
event delegation is what i was after and it seems like this is the answer:
$(document).on('click','.edity',function(){
// DO SOMETHING
)};
i have a form that is created from a textfile. I fill the form with values and then on the next step i just show the values with text. But if any of the values is wrong and i want to change it i would like to be able to go back and change them. But as it is now i can't because then i need to do all the steps again and generate the form again. Is there a way to just go back to the previous page?
now i use
$(document).on("click", "#btnBackO", function () {
window.location = "/Home/RiskScore";
});
but this does obviously not work. This code just sends me back to nothing because the form is not generated before it tries to go to the page. Is there a way to go back to a cached page of something?
I am pretty sure you would be required to be using some kind of server side language or javascript for this. Reason being is because the only way to "save state" is by passing the values back and forth. So when you hit back it's not like you are just going back to your last state, your essentially reloading the page.
Your code:
$(document).on("click", "#btnBackO", function () {
window.location = "/Home/RiskScore";
});
would change to something like:
$(document).on("click", "#btnBackO", function () {
window.location = "/Home/RiskScore?field1=value1&field2=value2"; //etc.. etc..
});
your page that holds the orginal form would have to be at bare minimum an HTML file that can support javascript tags. Preferable doing something server side via PHP:
VERY SIMPLIFIED EXAMPLE: (things like error catching, and escaping special characters are not addressed here)
<?php
$field1 = $_GET['field1'];
?>
<input type='text' value='<?php echo $field1; ?>' />
Any web language will be capable to accomplish this.
Sources:
How to get the query string by javascript?
http://php.net/manual/en/reserved.variables.get.php
If you want to go back to previous page :
history.go(-1)
history.back() or history.back(-1)
should work as well
I have an issue regarding sending form values to a script. I have a form set up, and upon the user pressing a button I want the values in the form to display on another part of the page. I can easily do this with php or another web scripting language, but all I know is how to do this by sending it to the script in a form of
http://www.example.com/myScript.pbp?value1=VALUE
is there a way to do this without loading a new page? Like just show a loading overlay on the page until the script completes and displays the value on the page?
I'm guessing this would be accomplished using Javascript or Ajax or something like that.
If anyone could help me out, or even just say where I should start to look, I'd really appreciate it!
Indeed. Just attach an onsubmit event listener to your form that always returns false to prevent actual sending of your form via the usual GET or POST request.
In your event listener you can send the form values using XMLHttpRequest and let the callback function update the relevant part(s) of your page.
But remember to always create a fallback option (with the usual GET or POST request of the form) to handle your form in case JavaScript is not available (e.g., turned off, blocked, etc.).
Yes AJAX would be exactly how you would do it. Have a look at the tutorial over at Tizag: http://www.tizag.com/ajaxTutorial/index.php
That will get you started in no time at all.
If you just want the values in the form to display on the page again without any interaction with the server then something like jQuery would be the best approach.
Jquery has a nice form plugin that you can do the following:
var form_values = $('#form_name').formHash();
the form_values will then be a hashed array of your form values in the system i.e.
<form id="test">
<input id="test1" name="test1" type="text" value="Test Text"/>
</form>
So form_values['test1'] would hold the value Test Text in it
Once you have the values you could then use some other jquery functions to display them on the page i.e.
<div id="displayDiv"></div>
then your javascript could be
for (key in form_values) {
$('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>');
}
This would put your values in the display div
Here is a simple javascript ajax object. You can use without loading any library.