Actually I am new in cs-cart and I am trying to show my result set into html/smarty block which contains the form code which I added from backend
Design->Layout but it only shows response in console ,I am pasting of some code here
Block code (added from backend Design->Layouts) :
<div class="quick-quote">
<h3>Quick Quote!</h3>
<form class="cm-ajax" action="index.php" method="post" id="quick_quote_form">
<div id="quick-quote">
<div class="clearfix">
<label style="width:73px;" >Width:</label>
</div>
<div class="input">
<input type="text" placeholder="enter width" name="d_width" id="d_width" class="required form-control" >
</div>
<div class="clearfix">
<label style="width:73px;" >Height:</label>
</div>
<input type="submit" class="get-quote-btn" value="Get Quote" name="dispatch[get_qoute.get_rates]" />
</div>
<div class="result"></div>
<!-- tag -->
<input type="hidden" name="result_ids" value="result" />
</form>
</div>
Controller code:
<?php
use Tygh\Registry;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($mode == 'get_rates') {
$height= $_POST["d_height"];
$width=$_POST["d_width"];
$val = $height+$width;
Registry::get('view');
Registry::get('ajax')->assign('get_rates', $val);
}
exit;
}
?>
Result set is coming correctly , Now I don't know how to show response in block div.
<div class="result"></div>
<!-- tag -->
<input type="hidden" name="result_ids" value="result" />
Thanks in advance.
Dont goto design ->layout because its common for all forms and pages.
Goto the website menu-> content then choose the form you want to change, there you can see layout tab, edit block done.
In form you set what block must refresh by ajax method
<input type="hidden" name="result_ids" value="result" />
Your problem in this line:
<div class="result"></div>
All refresh results must be in ID tag:
<div id="result"></div>
Related
In my .nercore razor page project I have a number of forms with multiple onPost handlers - different buttons for different events (eg. add / copy / edit / delete)
My problem is - I do not understand how I can differentiate client-side validation depending on the button pressed.
EDIT
Let's assume, I have the following .cshtml which defines two input data fields and two buttons. By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B):
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
<button type="submit" value="Copy" class="btn btn-warning">Edit Record</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
at the end of my .cshtml page, but it runs always when onPost is called.
I need to run validation "in groups": for one button set of one fields and ignore others, for another - another set and so on like written above
Is there any way to achieve it without writing custom javascript or do it on server side?..
ANOTHER EDIT
The answer was provided for the case where we have clear separation of input fields / buttons. But how can we handle this if we have two input fields and one button. Validation should NOT be fire if either of them is filled in and should fire if both are null. I understand, this sounds a bit strange, but in my example I have one input field and one dropdown-list. So, either a field should be filled-in or an item should be selected from the list, but for code simplicity let's stay with two input fields (Filed A and Field B, one of them should be filled) and one button:
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Thanks in advance!
By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B) should be validated
You can try to put them in separate <form> and specify handler method via the asp-page-handler attribute, like below.
<h1>Go Add Handler</h1>
<form method="post">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Add" class="btn btn-success" asp-page-handler="Add">Add Record</button>
</div>
</form>
<hr />
<h1>Go Copy Handler</h1>
<form id="myform" method="post">
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Copy" class="btn btn-warning" asp-page-handler="Copy">Edit Record</button>
</div>
</form>
#section scripts{
#await Html.PartialAsync("_ValidationScriptsPartial")
}
Test Result
Here how to use it according to its GitHub
I already install the package:
Use Opengraph
$data = OpenGraph::fetch("http://www.addemyplus.com/blogs/my-faith-for-your-love");
that may return an array:
{"type":"website","title":"My Faith For Your Love","description":"","image":"http:\/\/www.addemyplus.com\/images\/frontend_images\/blogs\/medium\/57670.jpg"}
My problem is how can I use it on my blade that whenever I type a link in the form it will fetch the Og data of that site.
and show below the image and description
I have this code on form:
<form action="{{route('store_post_path')}}" method="POST">
{{csrf_field()}}
<div class="form-group">
<label class="sr-only" for="title">title</label>
<input type="text" class="form-control" name="title" placeholder="Your Post Title or Question">
</div>
<div class="form-group">
<label class="sr-only" for="post">post</label>
<textarea class="form-control" name="post_content" id="post_content" rows="3" placeholder="Briefly explain your question or Your Post Content"></textarea>
</div>
<div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
<div class="form-group">
<div class="custom-file">
</div>
</div>
<div class="py-4"></div>
</div>
<div class="btn-toolbar justify-content-between">
<div class="btn-group">
<button type="Submit" class="btn btn-primary">Share your Post</button>
</div>
</div>
</form>
How can I use the code to fetch the Og property of the link? I want to view the image and title of the link below before submitting my post.. Please show some tutorial sites for this.
Get the link from the form in post content. You can do it using regex.
function getUrl($string)
{
$regex = '/https?\:\/\/[^\" ]+/i';
preg_match_all($regex, $string, $match);
return ($match);
}
$url = getUrl($string)
If there are any links in post content you will get array of links.
Use OpenGraph::fetch($url) to fetch the OG data of the url. That you can show in the view.
I've got a Google recapture that refuses to accept my answers (error: incorrect-captcha-sol) yet I think I've test every step without any problems. Its on a simple HTML/CSS type site.
I can see in Firebug that the response and challenge are being sent from the contact form.
I've echoed back the fields in php and they are the same I'm sending (match firebug)
I've got a table on the same page but its not part (or in any way related) to the contact form.
HTML code:
<!-- Contact Form -->
<div class="row">
<div class="span9">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name (Required)" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address (Required)" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message (Required)" name="message" rows="15" cols="40" maxlength="150"></textarea>
</p>
<p class="contact-challenge">
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input id="recaptcha_response_field" type="text" name="recaptcha_response_field" />
<div>Get another CAPTCHA</div>
<div class="recaptcha_only_if_image">Get an audio CAPTCHA</div>
<div class="recaptcha_only_if_audio">Get an image CAPTCHA</div>
<div>Help</div>
</div>
</p>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=XXXX">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/challenge?k=XXXX" height="300" width="500" frameborder="0"></iframe>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<p class="contact-submit">
<a id="contact-submit" class="submit" href="#">Send</a>
</p>
<div id="response">
</div>
</form>
</div>
PHP
require_once('recaptchalib.php');
$privatekey = "XXXX";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$details["recaptcha_challenge_field"],
$details["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
$this->response_html .= '<p>The code you entered was incorrect, please try again. ' . $resp->error . '</p>';
$this->response_status = 0;
}
Thanks
I eventually figured it out I didn't initialize $resp before I used it.
So I've now got
$resp = null;
before the start of the IF statement and the code is now working correctly.
That's what I get for copy/pasting Google's code and not checking it carefully!
I'm having an issue where the form generated with ruby isn't included inside my #content div, is this because the form is generated after the html is read by the browser (sorry if I sound like a moron on this)
-- edit update - view source --
The code below generates with the email box and submit button outside of the content box
<div id="content">
<!-- text here -->
<form accept-charset="UTF-8" action="/password_resets" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="afmtpSAc93w1uMcnouhY9XmbVTM7fE1VNFvZKnp0kMs=" />
</div>
<div class="field">
<input id="email" name="email" placeholder="email#website.com" type="text" />
</div>
<div class="actions">
<input name="commit" type="submit" value="Reset Password" />
</form> </div>
</div>
I'm not sure I got the question right, but in the html above the last </form> </div> should be </div> </form>
figured it out after visiting this link
Is it correct to use DIV inside FORM?
once I removed the div's for field and action it cleared everything up
I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?
My search filter (code):
#using (Html.BeginForm())
{
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search for Towers Watson Subscribers/Contacts</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Reg Date:</div>
<div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="#regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="#regDateEnd" name="regDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Profile Mod Date:</div>
<div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="#profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="#profileModDateEnd" name="profileModDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Last Name:</div>
<div class="div-table-col"><input type="text" id="lastName" name="lastName" value="#lastName" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
<div class="div-table-col"></div>
</div>
</div>
</fieldset>
}
{#Html.Partial("List_Ajax", Model)}
http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.
Place the following div where you would like the loading icon to appear.
<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>
Then this in your Javascript file
$(document).ready(){
$('#search').click(function(){
$('#loadingDiv').show();
});
});
Then when you're done loading, simply:
function SomeCallBackEvent(){
$('#loadingDiv').hide();
};