Javascript form submit change action with attr attributes - javascript

I want to change the attribute action from my form in the goal to get the next page dynamically. In javascript, my variable action get the right 'value' but the page does not load still. It works fine if I return manually the right 'value', but it does not work when I use jQuery('#select_program').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(), to make it dynamically.
Here is my form (in php):
public function form_creation() {
$html = '<form id="search_projects" action="';
$html .= esc_url(get_bloginfo('url'));
$html .= '/" method="post">';
$html .= '<select id="select_langue" name="lg123" onchange="change_select(0, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('Language', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<select id="select_program" name="pg123" onchange="change_select(1, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('Program', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<select id="select_country" name="dst123" onchange="change_select(2, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('Country', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<select id="select_city" name="city123" onchange="change_select(3, this.value)">';
$html .= '<option value="nd" class="optionDefault">';
$html .= __('City', 'mon-plugin');
$html .= '</option>';
$html .= '</select>';
$html .= '<input type="hidden" name="data123" value="';
$html .= htmlspecialchars(json_encode($this->backend_select_category));
$html .= '"/>';
$html .= '<button id="submit_project_list" type="submit">';
$html .= '<i class="fa fa-search" aria-hidden="true"></i>';
$html .= __('Search', 'mon-plugin');
$html .= '</button>';
$html .= '</form>';
return $html;
}
Here is my javascript:
jQuery('#search_projects').submit(function() {
var selection_value = [
jQuery('#select_langue').val(),
jQuery('#select_program').val(),
jQuery('#select_country').val(),
jQuery('#select_city').val()
];
var selection_display = [
jQuery('#select_langue').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(),
jQuery('#select_program').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(),
jQuery('#select_country').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase(),
jQuery('#select_city').children().filter(':selected').text().replace(/\s+/g, '-').toLowerCase()
];
jQuery(this).attr('action', function() {
if (selection_value[1] !== 'nd') {
var action = selection_display[1];
if (selection_value[2] !== 'nd') {
action += selection_display[2];
if (selection_value[3] !== 'nd') {
action += selection_display[3];
}
}
} else {
var action = 'search_program';
}
return action;
});
});
Thank you for your help !

I solved the problem.
I realize when I do not change any select, the page changes like it should. But when I change just one select, the page does not load anymore.
I don't know why, but the problem comes from my hidden input in php. If I remove it, everything works.
Great.. but how can I send my data through this form to the other page so ?
Thank you in advance for your help !

Related

How to create a boostrap modal using chatGpt inside [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 days ago.
Improve this question
I tried to create a boostrap modal including a chat inside and using chatgpt.
I have just a problem after the message is sent, maybe my js is not well set or the orientation I take is not the good approach.
I need some help to close this point
What I need to change ?
No idea if I am int the good way. Please let me know
Thank you
My modal
$content = '<!-- Gpt start -->';
$content .= '<link rel="stylesheet" href="http://localhost/admin/css/chatgpt.css">';
$content .= '' . $this->app->getDef('text_gpt') . '';
$content .= '<!-- The Modal -->';
$content .= '<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">';
$content .= '<div class="modal-dialog modal-lg">';
$content .= '<div class="modal-content">';
$content .= '<!-- Modal Header -->';
$content .= '<div class="modal-header">';
$content .= '<h4 class="modal-title">Chat Box</h4>';
$content .= '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>';
$content .= '</div>';
$content .= '<!-- Modal body -->';
$content .= '<div class="modal-body">';
$content .= '<div class="chat-box">';
//the question
$content .= '<div class="chat-box-header">';
$content .= '<span class="col-md-10">';
$content .= HTML::inputField('msg', null, 'placeholder="Type a message..."');
$content .= '</span>';
$content .= '<span class="col-md-2">';
$content .= HTML::button($this->app->getDef('text_send'), null, null, 'success', ['params' => 'id="ajax_message_gpt" list="chatgpt_list"']);
$content .= '</span>';
$content .= '</div>';
// $content .= '</form>';
$content .= '<div class="chat-box-body">';
//the response
$content .= '<div class="chat-box-message" id="message">';
$content .= '<datalist id="chatgpt_list"></datalist>';
$content .= '<p class="message-text">Hello! How can I help you?</p>';
$content .= '<p class="message-time">12:00 PM</p>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '<!-- Gpt end -->';
// Call my ajax
$chtgpt_ajax = CLICSHOPPING::link('ajax/chatGpt.php');
//the javascript
//AS you see I have some problem inside
==> addEventListener("keyup", function(event) Keyup need to be change I think
==> `option.value = item.prompt;
Below all the script
$output = <<<EOD
<script>
window.addEventListener("load", function(){
// Add a keyup event listener to our input element
document.getElementById('ajax_message_gpt').addEventListener("keyup", function(event){hinterchatGpt(event)});
// create one global XHR object
// so we can abort old requests when a new one is make
window.hinterchatGptXHR = new XMLHttpRequest();
});
// Autocomplete for form
function hinterchatGpt(event) {
var input = event.target;
var ajax_message_gpt = document.getElementById('chatgpt_list'); //datalist id
// minimum number of characters before we start to generate suggestions
var min_characters = 0;
if (!isNaN(input.value) || input.value.length < min_characters ) {
return;
} else {
window.hinterchatGptXHR.abort();
window.hinterchatGptXHR.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse( this.responseText );
ajax_message_gpt.innerHTML = "";
response.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
option.value = item.prompt;//get name
ajax_message_gpt.appendChild(option);
});
}
};
window.hinterchatGptXHR.open("GET", "{$chtgpt_ajax}?q=" + input.value, true);
window.hinterchatGptXHR.send()
}
}
</script>
EOD;
Below my ajax
if (isset($_GET['q'])) {
$terms = HTML::sanitize(mb_strtolower($_GET['q']));
$client = OpenAI::client(CLICSHOPPING_APP_CHATGPT_CH_API_KEY);
$result = $client->completions()->create([
'model' => 'davinci',
'prompt' => $terms,
'temperature' => 0.9,
'max_tokens' => 150,
'frequency_penalty' => 0,
'presence_penalty' => 0.6
]);
# JSON-encode the response
$json_response = json_encode($result); //Return the JSON Array
# Return the response
echo $json_response;
}

javascript radio on click

I would know how to update a file when I click on radio button
When I click on the radio button, the page is updated with the new radio button checked.
I added :
id="radio_shipping_' . $j .'"
Now I miss the javascript. I don't know how to
Thank you
for ($j=0, $n2=count($quote['methods']); $j<$n2; $j++) {
$checked = (($quote['id'] . '_' . $quote['methods'][$j]['id'] == $_SESSION['shipping']['id']) ? true : false);
$data .= '<tr>';
$data .= '<td class="text-md-right">';
if (isset($quotes['error'])) {
$data .= ' ';
} else {
$data .= '<span class="moduleRadio">' . HTML::radioField('shipping', $quote['id'] . '_' . $quote['methods'][$j]['id'], $checked, 'required aria-required="true" id="radio_shipping_' . $j .'"') .'</span>';
}
$data .= '</td>';
$data .= '</tr>';
}

How can i refresh only data in table with javascript?

I have page with data table and i need to refresh only data in table and i use bootstrap datatable to sort but when i use refresh data in my page will can not use bootstrap to sort data. How can i fix it?
this my code for get data to refresh
$request = $this->m_request->get_request_list();
$row = '';
$row .= '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="datatable">';
$row .= '<thead>';
$row .= '<tr>';
$row .= '<td>Start</td>';
$row .= '<td>End</td>';
$row .= '<td>Type</td>';
$row .= '</tr>';
$row .= '</thead>';
$row .= '<tbody>';
foreach ($re as $r){
$row .= '<tr id="sh">';
$row .= '<td>'.$r->date_start.'</td>';
$row .= '<td>'.$r->date_end.'</td>';
$row .= '<td>'.$r->leave_type.'</td>';
$row .= '</tr>';
}
$row .= '</tbody>';
$row .= '</table>';
echo $row;
and this is my javascript to get data to show
var $container = $("#show_data");
$container.load("<?php echo site_url('request/get')?>");
var refreshId = setInterval(function()
{
$container.load('<?php echo site_url('request/get')?>');
}, 3000);
if i show table in view page the data will can not refresh to get data and if i call table in controller page i will can not use bootstrap datatable.
Please help. Thank you so much for your help.
Reinitialize you datatable after each ajax success
var $container = $("#show_data");
$container.load("<?php echo site_url('request/get')?>",function(){ $('table').DataTable();});
var refreshId = setInterval(function()
{
$container.load("<?php echo site_url('request/get')?>",function(){ $('table').DataTable();});
}, 3000);

How to create a javascript widget to load recent posts from my wordpress site and display in other sites?

I have a WordPress site. I want to allow others to place a web widget in their website which grabs recent posts from my site and display title with a link to its page for each of my recent posts. I know that this is possible through using iframe. But this has no positive effect on my website SEO. I found a solution here to use JavaScript for similar purpose. But it used Python and JSON to load HTML from the original site in the main() function. I am not familiar with JSON and Python. Is there any solution that I can return my recent posts using PHP and put it in the main function?
I use SimplePie to get RSS feeds. This is the function I use.
function start_rss(){
$urls = array(
0 => 'http://ogmarketreport.com',
1 => 'http://petroriveroil.com/feed/'
);
$numberOfPosts = 10;
foreach ($urls as $key => $value) {
$url = $value;
$feed = new SimplePie();
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/cache/');
$feed->set_feed_url($url);
$feed->set_stupidly_fast(true);
$feed->init();
$feed->handle_content_type();
$blog_title = $feed->get_title();
$blog_title_url = '<div class="row" style="width: 100%; display: block;"><h2><?php $title; ?></h2></div>';
$blog_desc = $feed->get_description();
$html = "";
$x = $feed->get_items(0, $numberOfPosts);
$html .= '<div class="container" style="width: 100%; display: block;"><h2><a target="_blank" href="' .$feed->get_permalink() . '">' . $feed->get_title() . '</a></h2></div>';
if (count($x) == 0 ) {
$html .= '<article class="rss col-md-12">';
$html .= '<p class="danger">No Recent Posts.</p>';
$html .= '</article>';
} else {
foreach ($x as $item) {
$html .= '<article class="rss col-md-12">';
$html .= '<h4 class="title">';
$html .= '' .$item->get_title() . '' ;
$html .= '</h4>';
$html .= '<p>';
$html .= $item->get_description();
$html .= '</p>';
$html .= '<p><small>';
$html .= "Posted on ";
$html .= $item->get_date('j F Y | g:i a');
$html .= '</small></p>';
$html .= '</article>';
}
}
print_r($html);
}

How to create mega dropdown menu dynamically using PHP?

I need to create mega drop down menu dynamically. I have created code but not able to display like this: http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html
I have studied other code but not helping me.
Below is my code:
$result = mysql_query("SELECT id, label, link, parent FROM menu ORDER BY parent, sort, label");
//Create a multidimensional array to conatin a list of items and parents
$menu = array(
'items' => array(),
'parents' => array()
);
//Builds the array lists with data from the menu table
while($items = mysql_fetch_assoc($result)) {
//Creates entry into items array with current menu item id ie. $menu['items'][1]
$menu['items'][$items['id']] = $items;
//Creates entry into parents array. Parents array contains a list of all items with children
$menu['parents'][$items['parent']][] = $items['id'];
}
//echo "<pre>"; print_r($menu);
//Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu) {
$html = "";
if(isset($menu['parents'][$parent])) {
$html .= "<ul id='mega-menu-9' class='mega-menu'>";
foreach($menu['parents'][$parent] as $itemId) {
if(!isset($menu['parents'][$itemId])) {
$html .= "<li><a href='Javascript: void(0);' class='arrow'><span><i class='fa fa-home'></i></span>".$menu['items'][$itemId]['label']."</a><li>";
}
if(isset($menu['parents'][$itemId])) {
$html .= "<li><a href='Javascript: void(0);' class='arrow'><span><i class='fa fa-home'></i></span>".$menu['items'][$itemId]['label']."</a>";
$html .= buildMenu($itemId, $menu);
$html .= "</li>";
}
}
$html .= "</ul> \n";
}
return $html;
}
Try this, it's working for me :)
$Testresult = mysql_query("select id,anchordescription,RootMenu,link from MenuTable");
$menu = array(
'menus' => array(),
'parent_menus' => array()
);
while ($row = mysql_fetch_assoc($Testresult))
{
$menu['menus'][$row['id']] = $row;
$menu['parent_menus'][$row['RootMenu']][] = $row['id'];
}
function buildMenu($parent, $menu)
{
$html = "";
if (isset($menu['parent_menus'][$parent]))
{
$html .= "<ul id='ulNav'>";
foreach ($menu['parent_menus'][$parent] as $menu_id)
{
if (!isset($menu['parent_menus'][$menu_id]))
{
$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['anchordescription'] . "</a></li>";
}
if (isset($menu['parent_menus'][$menu_id]))
{
$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['anchordescription'] . "</a>";
$html .= buildMenu($menu_id, $menu);
$html .= "</li>";
}
}
$html .= "</ul>";
}
return $html;
}
There is a huge amount of examples in the internet. Here is a nice step-by-step explanation of how to build a menu like the one that you want.
I also recommend you to look for jQuery plugins as there are a lot of working solutions there.

Categories